1. 程式人生 > >【vue】vuejs入門(一)

【vue】vuejs入門(一)

###vue物件的屬性

new Vue({
        el:'#app',
        data:{
            msg:'',
            mag:'呵呵呵',
            mnb:[
                {title:'啊哈哈'},
                {title:'啊哈哈2'},
                {title:'啊哈哈3'}   
            ]
        },
        // 偵聽器
        watch:{
            msg(){
                console.
log('哈哈哈'); } }, template:'', // 計算屬性 computed:{ mpl(){ return this.mag+this.msg; } }, methods:{ mplclick(){ alert(this.mpl); } }, // 定義元件 components:
{ 'todo-item':{ template:'<li>item</li>' } }, })

###vue的全域性

	//全域性元件
	Vue.component('todo-item',{
        template:'<li>item</li>'
    })

###vue的指令

指令 詳細
v-text 純字串輸出
v-html 轉成html程式碼輸出
v-bind: 簡寫(:) data與元素的屬性繫結
v-on: 簡寫(@) 繫結事件到元素上
v-modul 雙向資料繫結
v-if 銷燬或建立dom
v-show 改變display顯示或隱藏dom
v-for 迴圈顯示某陣列

###計算屬性和偵聽器

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return this.message.split('').reverse().join('')
    }
  }
})

計算屬性會快取上一次的計算結果,已達到提高效能的目的。用於內部資料的計算。

偵聽器:當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。

偵聽資料項或計算屬性是否發生變化,可用於限制ajax或者開銷較大的方法的操作頻率

在這個示例中,使用 watch 選項允許我們執行非同步操作 (訪問一個 API),限制我們執行該操作的頻率,並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的。

###v-for的key和多引數