数据与方法
除了数据属性,vue实例还暴露了一些有用的实例属性和方法,它们都有前缀$,以便与用户定义的属性区分开来。例如 :
var data = { a: 1}
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data //=> true
vm.$el === doucment.getElementById('example') //==>true
//$watch是一个实例方法
vm.$watch('a',function(newValue,oldValue){
//这个回调将在'vm.a'改变后调用
})
这些实例方法和属性可以在vue官网给出的API参考中查询其功能和用法。
实例生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。
比如created钩子可以在一个实例被创建后执行代码。也有一些其他钩子,在实例生命周期的不同阶段被调用,如:mounted、updated和destroyed。生命周期钩子的this上下文指向调用它的vue实例。
不要在选项属性或回调上使用箭头函数,比如: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
之类的错误。
生命周期图示:
下图展示了生命周期图示。在学习vue的过程中,掌握它。
模板语法:
vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层vue实例的数据。所有vue.js的模板都得合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,vue能够智能地计算出最少需要重新渲染多少组件,并把DOM操作次数减少到最少。
如果你熟悉虚拟DOM并且偏爱js的原始力量,你也可以不用模板,直接写渲染函数(render)函数,使用可选的jsx语法。
插值
#文本
数据绑定最常见的形式就是使用"Mustance”语法(双大括号)的文本插值:
<span>Message:{{msg}}</span>
Mustance标签将会被替代为对应数据对象上msg属性的值。无论何时,绑定的数据对象上msg属性发生了变化,插值处的内容都会更新。
通过使用v-once指令,你也能执行一次性地插值,当数据更新时,插值处的内容不会更新。但请留心这会影响到该节点上的其他数据绑定:
<span v-once>这个将不会改变:{{msg}}</span>
帮助链接:
Vue.js 模板语法:
https://www.runoob.com/vue2/vue-template-syntax.html
计算属性和侦听器
计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单计算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。
计算属性vs侦听属性
computed watch created
getter setter
知道v-前缀指令怎么用