善假于物:前端mvvm框架vue.js

工欲善其事必先利其器(多学一点知识,少写一行代码:)

vue学习笔记

关于vue

（2015年 前端也开始模块化工程化了，前端框架层出不穷）
vue的作者是ex-Googler，阿里的Weex(vue作者说不介意叫Vue-Native呵呵)也是借鉴了vue

需要知道的基础知识

先看一个 todolist栗子

    html
    //要操作的对象
    

    //绑定模型 按键事件
      
      

        //循环
        

           //文本插值 
          {{ todo.text }}
          //  指令的值 为绑定表达式（参数）
          X
        
      
    
    js
    //创建vue
    new Vue({
        //创建对象        
        el: '#app',
        //属性赋值     
        data: {
            newTodo: '',
            todos: [
                { text: 'Add some todos' }
            ]
        },
        //调用方法
        methods: {
            //方法一 添加todo
            addTodo: function () {
                //去掉空格
                var text = this.newTodo.trim()
                if (text) {
                    //加入数组
                    this.todos.push({ text: text })
                    //置空
                    this.newTodo = ''
                }
             },
             //方法二 删除todo
             removeTodo: function (index) {
                //删除
                 this.todos.splice(index, 1)
             }
         }
    })

• 双向绑定
  数据（dom文本或结构）和视图同步变化

    var data = { a: 1 }
    var vm = new Vue({
      data: data
    })
    vm.a === data.a // -> true    
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2    
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3
  

  • 数据绑定最基础的形式是文本插值

            Message: {{ msg }}  //2个Mustache 标签
            This will never change: {{* msg }}  //*单次插值
    

  • HTML属性(Attributes) 插入（ Vue.js 指令和特殊特性内不能用插值）

• 放在 Mustache 标签内的文本称为绑定表达式
  （一段绑定表达式 由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成）

    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    //一个限制是每个绑定只能包含单个表达式(坏栗如下，不能这么吃！！！)
    
    {{ var a = 1 }}
    
    {{ if (ok) { return message } }}
  

• 过滤器 (Filter)

    //将表达式 message 的值“管输（pipe）”到内置的 filterA过滤器。
    //过滤器函数始终以表达式的值作为第一个参数。
    //带引号的参数视为字符串，而不带引号的参数按表达式计算。
    //字符串 'arg1' 将传给过滤器作为第二个参数，表达式 arg2 的值在计算出来之后作为第三个参数。
    {{ message | filterA 'arg1' arg2 | filterB }}
  

• 指令 (Directives)
  是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式

    //v-if 指令将根据表达式 greeting 值的真假删除/插入 
   元素。
    
  Hello!
    //有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开
     // 缩写 
     // 缩写 
  

• 修饰符 (Modifiers)
  以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定

    //.literal 告诉指令 将它的值 解析为一个字面字符串 而不是一个表达式
    
  

• 计算属性

  • 计算属性默认是 getter

     
    
        a={{ a }}, b={{ b }}
       
             
    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 实例上的数据变动）

    {{fullName}}
     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
    })
    //当一些数据需要根据其它数据变化时,通常更好的办法是使用计算属性 而不是一个命令式的 $watch 回调。
    //最优解
    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]
      }
    }
    }
    // 现在在调用 vm.fullName = 'John Doe' 时,setter 会被调用，vm.firstName 和 vm.lastName 也会有相应更新。