工欲善其事必先利其器(多學一點知識,少寫一行代碼:)

vue學習筆記

關于vue

（2015年 前端也開始模塊化工程化了，前端框架層出不窮）
vue的作者是ex-Googler，阿里的Weex(vue作者說不介意叫Vue-Native呵呵)也是借鑒了vue

需要知道的基礎知識

先看一個 todolist栗子

    html
    //要操作的對象
    <div id="app">
    //綁定模型 按鍵事件
      <input v-model="newTodo" v-on:keyup.enter="addTodo">
      <ul>
        //循環(huán)
        <li v-for="todo in todos">
           //文本插值 
          <span>{{ todo.text }}</span>
          //  指令的值 為綁定表達式（參數(shù)）
          <button v-on:click="removeTodo($index)">X</button>
        </li>
      </ul>
    </div>
    js
    //創(chuàng)建vue
    new Vue({
        //創(chuàng)建對象        
        el: '#app',
        //屬性賦值     
        data: {
            newTodo: '',
            todos: [
                { text: 'Add some todos' }
            ]
        },
        //調(diào)用方法
        methods: {
            //方法一 添加todo
            addTodo: function () {
                //去掉空格
                var text = this.newTodo.trim()
                if (text) {
                    //加入數(shù)組
                    this.todos.push({ text: text })
                    //置空
                    this.newTodo = ''
                }
             },
             //方法二 刪除todo
             removeTodo: function (index) {
                //刪除
                 this.todos.splice(index, 1)
             }
         }
    })

• 雙向綁定
  數(shù)據(jù)（dom文本或結(jié)構(gòu)）和視圖同步變化

    var data = { a: 1 }
    var vm = new Vue({
      data: data
    })
    vm.a === data.a // -> true    
    // 設置屬性也會影響到原始數(shù)據(jù)
    vm.a = 2
    data.a // -> 2    
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3
  

  • 數(shù)據(jù)綁定最基礎的形式是文本插值

            <span>Message: {{ msg }}</span>  //2個Mustache 標簽
            <span>This will never change: {{* msg }}</span>  //*單次插值
    

  • HTML屬性(Attributes) 插入（ Vue.js 指令和特殊特性內(nèi)不能用插值）

            <div id="item-{{ id }}"></div>
    

• 放在 Mustache 標簽內(nèi)的文本稱為綁定表達式
  （一段綁定表達式 由一個簡單的 JavaScript 表達式和可選的一個或多個過濾器構(gòu)成）

    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    //一個限制是每個綁定只能包含單個表達式(壞栗如下，不能這么吃?。?！)
    <!-- 這是一個語句，不是一個表達式： -->
    {{ var a = 1 }}
    <!-- 流程控制也不可以，可改用三元表達式 -->
    {{ if (ok) { return message } }}
  

• 過濾器 (Filter)

    //將表達式 message 的值“管輸（pipe）”到內(nèi)置的 filterA過濾器。
    //過濾器函數(shù)始終以表達式的值作為第一個參數(shù)。
    //帶引號的參數(shù)視為字符串，而不帶引號的參數(shù)按表達式計算。
    //字符串 'arg1' 將傳給過濾器作為第二個參數(shù)，表達式 arg2 的值在計算出來之后作為第三個參數(shù)。
    {{ message | filterA 'arg1' arg2 | filterB }}
  

• 指令 (Directives)
  是特殊的帶有前綴 v- 的特性。指令的值限定為綁定表達式

    //v-if 指令將根據(jù)表達式 greeting 值的真假刪除/插入 <p> 元素。
    <p v-if="greeting">Hello!</p>
    //有些指令可以在其名稱后面帶一個“參數(shù)” (Argument)，中間放一個冒號隔開
    <a v-bind:href="url"></a> // 縮寫 <a :href="url"></a>
    <a v-on:click="doSomething"> // 縮寫 <a @click="doSomething">
  

• 修飾符 (Modifiers)
  以半角句號 . 開始的特殊后綴，用于表示指令應當以特殊方式綁定

    //.literal 告訴指令 將它的值 解析為一個字面字符串 而不是一個表達式
    <a v-bind:href.literal="/a/b/c"></a>
  

• 計算屬性

  • 計算屬性默認是 getter

     <div id="example">
        a={{ a }}, b={{ b }}
       </div>         
    var vm = new Vue({
    el: '#example',
    data: {
      a: 1
    },
    computed: {
      // 一個計算屬性的 getter
      b: function () {
        // `this` 指向 vm 實例
        return this.a + 1
      }
    }
    })
    
      a=1,b=2   
      console.log(vm.b) // -> 2
      vm.a = 2
      console.log(vm.b) // -> 3
    

  • $watch（用于觀察 Vue 實例上的數(shù)據(jù)變動）

    <div id="demo">{{fullName}}</div>
     var vm = new Vue({
      data: {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
      }
    })    
    vm.$watch('firstName', function (val) {
    this.fullName = val + ' ' + this.lastName
    })    
    vm.$watch('lastName', function (val) {
    this.fullName = this.firstName + ' ' + val
    })
    //當一些數(shù)據(jù)需要根據(jù)其它數(shù)據(jù)變化時,通常更好的辦法是使用計算屬性 而不是一個命令式的 $watch 回調(diào)。
    //最優(yōu)解
    var vm = new Vue({
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
    })  
    

  • 計算屬性setter

    // ...
    computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
    }
    // 現(xiàn)在在調(diào)用 vm.fullName = 'John Doe' 時,setter 會被調(diào)用，vm.firstName 和 vm.lastName 也會有相應更新。