vue教程自学笔记（一）

一、介绍

1.指令

指令带有前缀v-，以表示它们是Vue提供的特殊特性。eg：v-bind，v-if，v-for，v-on，v-model（实现表单输入和应用状态之间的双线绑定）

v-bind跟v-on的区别是：v-bind用于HTML属性，v-on是DOM事件监听。

2.组件component

官网2.x组件不显示问题：定义组件后，要同时new一个实例，然后把组件放在实例里面。先组件，后实例。

 

二、Vue实例

1.数据与方法

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有的属性，当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

值得注意的是只有当实例被创建时data中存在的属性才是响应式的。如果你添加一个新的属性，则并不会触发任何视图的更新。所以，如果你知道你会在晚些时候需要一个属性，你需要对他设置一些初始值。

Object.freeze()，会阻止修改现有的属性，响应系统无法再追踪变化。（注意位置）

除了数据属性，Vue还有实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开。eg：

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’改变后调用
}) 

 

2.实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程，这个过程中会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。eg：created、mounted、updated、destroyed。生命周期钩子的this上下文指向调用它的Vue实例。

不要在选项属性或回调上使用箭头函数，易报错。

3.生命周期图示