Vue.js文档学习

Vue细碎小点

生命周期钩子：created()、mounted()、updated()、destroyed()

不要在选项属性或回调上使用箭头函数，比如

created: () => console.log(this.a)

vm.$watch('a',newValue => this.myMethod())

因为箭头函数是和父级上下文绑定在一起的，this不会是如你预期的Vue实例，经常导致

Uncaught TypeError: Cannot read property of undefined

或

Uncaught TypeError: this.myMethod is not a function

{{}}双大括号语法，又叫'Mustache'语法，只能绑定单个表达式，不能是语句，或者流控制。

v-once v-html(容易导致XSS攻击，绝对不要对用户提供的内容使用插值)

？ XSS攻击：全称为：跨站脚本攻击(Cross Site Scripting)

计算属性

对于任何复杂逻辑，你都应当使用计算属性。

// 属性reversedMessage的getter函数
computed: {
    reversedMessage: function(){
        return this.message.split('').reverse().join('')
    }
}

计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值。

Date.now()不是响应式依赖。
相比之下，每当出发重新渲染时，调用方法将总会再次执行函数。

侦听属性：watch（命令式的）

// 计算属性的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 也会相应地被更新。

侦听器:

需要在数据变化时执行异步或者开销较大的操作时，这个方法最有用。

？绑定HTML Class：

<div v-bind:class="(active: isActive)"></div>

上面的语法表示这个class是否存在取决于数据属性isActive的值。其也可以与普通class属性共存。

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

绑定的数据对象不必内联定义在模板中,

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

或者我们可以绑定一个返回对象的计算属性。

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组:
应用一个class列表:

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。