vue学习笔记系列（二）
动手第一个demo
我们多少都会了解vue的核心就是数据，实现了数据的双向绑定。话不多说先上代码：
<div>
<input type="text" v-model="name" placeholder="请输入你的名字">
<h1>你好，{{name}}</h1>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
name:''
}
})
</script>
此时输入的表单的数据就会自动绑定到name这个值上面去，然后显示到页面上。
1 、 Vue实例与数据绑定
创建实例，这里的构造函数Vue就创建了一个app实例
var app = new Vue({
el:'#app',
data:{
name:''
}
})
必不可少的就是el，用于指定一个已存在的DOM元素来挂载Vue实例，挂载成功后我们可以通过app.$el来访问该元素。Vue实例本身***了data对象里的所有属性：
var myData={
a:1
}
var app = new Vue({
el:'#app',
data:{
myData
}
})
console.log(app.a) //1
app.a=2;
console.log(myData.a); //2
myData.a=3;
console.log(app.a); //3
以上例子可以说明，显式声明的数据指向一个已有的变量，并且它们之间默认建立了双向绑定，修改任意一个另一个就会跟着改变。
2 、 生命周期
- beforeCreate：在实例初始化之后，数据观察者（data observer）和event/watcher事件配置之前调用。
- created：实例创建完成后立即调用。实例已完成数据观察者的运算，watch/event事件回调。然而，挂载阶段还没开始，
$el属性不可见。 - beforeMount：在挂载开始之前调用，相关的render函数首次调用。
- mounted：el被新创建的
vm.$el替换，并且挂载到实例上之后再调用该钩子。如果root实例挂载了一个文档内元素，当调用mounted时vm.$el也在文档内。 - beforeUpdated：在数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
- updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
- beforeDestroy：实例销毁之前调用，此时实例完全可用。
- destroyed：实例销毁后调用，实例指示的所有东西都接触绑定，所有的事件***会被移除，子实例也会被销毁。
- activated：keep-alive组件激活时调用。
- deactivated：keep-alive组件停用时调用。
- ErrorCapture：捕获一个来自子孙组件错误时调用。
5和6这两个不常用，且不推荐使用
3 、指令和事件
- v-if
- v-for
- v-show
- v-on
- v-model
- v-bind
- v-html
上面的指令为常用的指令，下面就来说一下它们的区别和用法：
- v-if 和 v-show的区别：v-show是CSS级别的display:none;和display:block;之间的切换，而v-if 决定是否显示代码块的内容，是属于DOM级别的操作。频繁操作时使用v-show，一次性渲染完成的时候选择v-if。对于v-if的优化，由于v-if为false的时候内部组件是不会渲染的，所以在特定时候需要渲染组件的时候（或异步，如
$nextTick是在下次更新循环结束之后延迟执行回调，用于获得更新后的DOM）设置为true，优先渲染其他内容。 - v-bind用于动态更新HTML元素上的属性，如id、class等。而v-on表示给元素绑定一个点击事件，可以是原生的事件，如果绑定原生事件则需要
@click.native这样写。它们的语法糖（简写）为：bind和 @click - v-model主要是实现数据的双向绑定的，用于表单元素上。
- v-html主要是解析HTML文档，防止以字符串形式解析出来。
ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！
