成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

vue.js 學(xué)習(xí)筆記（一）

gaosboy / 2340人閱讀

摘要：一縮寫(xiě)完整語(yǔ)法縮寫(xiě)完整語(yǔ)法縮寫(xiě)二縮寫(xiě)完整語(yǔ)法縮寫(xiě)三過(guò)濾器四條件渲染五列表渲染數(shù)組變動(dòng)檢測(cè)包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。

一、v-bind 縮寫(xiě)
二、v-on 縮寫(xiě)
三、過(guò)濾器 
{{ message | capitalize }}
四、條件渲染 v-if 
Yes


No





  Sorry




  Not sorry
template-v-if
v-show 
Hello!
五、列表渲染 for v-for 
    
  
  • 
    {{ item.message }}
  
    • 


var example1 = new Vue({
  el: "#example-1",
  data: {
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
});
    

    
  
  • 
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  
    • 


var example2 = new Vue({
  el: "#example-2",
  data: {
    parentMessage: "Parent",
    items: [
      { message: "Foo" },
      { message: "Bar" }
    ]
  }
});
數(shù)組變動(dòng)檢測(cè)

Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: "Baz" });
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/);
});
template-v-for
對(duì)象 v-for 
    
  
  • 
    {{ $key }} : {{ value }}
  
    • 


new Vue({
  el: "#repeat-object",
  data: {
    object: {
      FirstName: "John",
      LastName: "Doe",
      Age: 30
    }
  }
});
值域 v-for 

  {{ n }}
六、方法與事件處理器 方法處理器 

  



var vm = new Vue({
  el: "#example",
  data: {
    name: "Vue.js"
  },
  // 在 `methods` 對(duì)象中定義方法
  methods: {
    greet: function (event) {
      // 方法內(nèi) `this` 指向 vm
      alert("Hello " + this.name + "!")
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代碼中調(diào)用方法
vm.greet(); // -> "Hello Vue.js!"
內(nèi)聯(lián)語(yǔ)句處理器 

  
  


new Vue({
  el: "#example-2",
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
});

有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪(fǎng)問(wèn)原生 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法


 methods: {
  say: function (msg, event) {
    // 現(xiàn)在我們可以訪(fǎng)問(wèn)原生事件對(duì)象
    event.preventDefault()
  }
};

## 事件修飾符

## 按鍵修飾符

全部的按鍵別名：enter，tab，delete，esc，space，up，down，left，right

## 其他實(shí)例

new Vue({
  el: "#demo",
  data: {
    newLabel: "",
    stats: stats
  },
  methods: {
    add: function (e) {
      e.preventDefault()
      if (!this.newLabel) {
        return;
      }
      this.stats.push({
        label: this.newLabel,
        value: 100
      });
      this.newLabel = "";
    },
    remove: function (stat) {
      if (this.stats.length > 3) {
        this.stats.$remove(stat); // 注意這里的$remove
      } else {
        alert("Can"t delete more!")
      }
    }
  }
});
七、過(guò)渡 CSS 過(guò)渡 
hello

然后為 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 規(guī)則:

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定義進(jìn)入的開(kāi)始狀態(tài) */
/* .expand-leave 定義離開(kāi)的結(jié)束狀態(tài) */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

你可以在同一元素上通過(guò)動(dòng)態(tài)綁定實(shí)現(xiàn)不同的過(guò)渡：

hello
 
new Vue({
  el: "...",
  data: {
    show: false,
    transitionName: "fade"
  }
}

另外，可以提供 JavaScript 鉤子:

Vue.transition("expand", {

  beforeEnter: function (el) {
    el.textContent = "beforeEnter"
  },
  enter: function (el) {
    el.textContent = "enter"
  },
  afterEnter: function (el) {
    el.textContent = "afterEnter"
  },
  enterCancelled: function (el) {
    // handle cancellation
  },

  beforeLeave: function (el) {
    el.textContent = "beforeLeave"
  },
  leave: function (el) {
    el.textContent = "leave"
  },
  afterLeave: function (el) {
    el.textContent = "afterLeave"
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79031.html

相關(guān)文章

  • Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實(shí)踐筆記（附DEMO）

    摘要：有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識(shí)的學(xué)習(xí)實(shí)踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來(lái)聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時(shí)有點(diǎn)亂，之后會(huì)進(jìn)行整理優(yōu)化。 上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個(gè)頁(yè)面間切換，將頁(yè)面搭建了起來(lái)。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類(lèi)似于redux來(lái)應(yīng)用的全局狀態(tài)。 注：本...

    DobbyKim 評(píng)論0 收藏0

  • (原創(chuàng))vue 學(xué)習(xí)筆記

    摘要：菜鳥(niǎo)教程這是一個(gè)屬性其值是字符串菜鳥(niǎo)教程同上這是一個(gè)屬性其值是字符串用于定義的函數(shù)，可以通過(guò)來(lái)返回函數(shù)值。它們都有前綴，以便與用戶(hù)定義的屬性區(qū)分開(kāi)來(lái)。 開(kāi)篇語(yǔ) 我最近學(xué)習(xí)了js,取得進(jìn)步,現(xiàn)在學(xué)習(xí)vue.js.建議新手學(xué)習(xí),請(qǐng)不要用npm的方式(vue-cli,vue腳手架),太復(fù)雜了. 請(qǐng)直接下載vue.js文件本地引入,就上手學(xué)習(xí)吧參照菜鳥(niǎo)教程網(wǎng)站的vue.js教程http://...

    layman 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱(chēng)為，讀音類(lèi)似，錯(cuò)誤讀音，由華人尤雨溪開(kāi)源并維護(hù)。隱藏四事件之前說(shuō)了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤(pán)事件，具體參考官方文檔。模板就是，用來(lái)進(jìn)行數(shù)據(jù)綁定，顯示在頁(yè)面中，也稱(chēng)為語(yǔ)法。 一、Vue.js介紹 Vue.js也稱(chēng)為Vue，讀音類(lèi)似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開(kāi)源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶(hù)界面的框架 是一...

    baoxl 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱(chēng)為，讀音類(lèi)似，錯(cuò)誤讀音，由華人尤雨溪開(kāi)源并維護(hù)。隱藏四事件之前說(shuō)了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤(pán)事件，具體參考官方文檔。模板就是，用來(lái)進(jìn)行數(shù)據(jù)綁定，顯示在頁(yè)面中，也稱(chēng)為語(yǔ)法。 一、Vue.js介紹 Vue.js也稱(chēng)為Vue，讀音類(lèi)似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開(kāi)源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶(hù)界面的框架 是一...

    liukai90 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱(chēng)為，讀音類(lèi)似，錯(cuò)誤讀音，由華人尤雨溪開(kāi)源并維護(hù)。隱藏四事件之前說(shuō)了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤(pán)事件，具體參考官方文檔。模板就是，用來(lái)進(jìn)行數(shù)據(jù)綁定，顯示在頁(yè)面中，也稱(chēng)為語(yǔ)法。 一、Vue.js介紹 Vue.js也稱(chēng)為Vue，讀音類(lèi)似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開(kāi)源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶(hù)界面的框架 是一...

    rollback 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<