vue学习记录(二)
说明:因为是在vue官网学习的 ,所以先按官网的进度来,一些详细的可以在官网的api文档中浏览,目前先不做整理。
-------------------
我知道 当数据改变时,视图会进行重新渲染。注意点:“只有当实例被创建时 data 中存在的属性才是响应式的,”(也就是说如果你添加一个新属性,那么对新属性的更改不会触发任何视图的更新。如果你晚些需要一个属性,请在一开始把他设置为空或不存在)
我们还需要注意的一点是使用 Object.freeze() 时,他会阻止修改现有属性,响应系统无法追踪到变化,响应式会没反应。
官网的例子:
var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj })
<div id="app"> <p>{{ foo }}</p> <!-- 这里的 `foo` 不会更新! --> <button v-on:click="foo = 'baz'">Change it</button> </div>
在vue中 除了数据属性,还有一些有用的实例属性与方法,为便于区分,他们都有前缀$。例如:
var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
实例生命周期钩子
Vue 实例在被创建时都要经过一系列的初始化过程,(需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等),在这个过程中会运行一些生命周期钩子的函数,方便用户在不同阶段添加自己的代码。
created钩子
new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // => "a is: 1"
其它的钩子:mounted、updated和destroyed等。
注意点:
1.申明周期钩子的this上下文指向的是调用他的vue实例。
2.不要在选项属性或回调上使用箭头函数。(会出现的报错
Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function
之类的错误。)
生命周期图示
注意位置与写法: