目录
一、Vue构造选项
| 选项 | 说明 |
| el | 唯一根标签，决定Vue实例会管理哪一个DOM节点 |
| data | Vue实例对应的数据对象 |
| methods | 定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用 |
| computed | 定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质上是一个属性而不是一个函数，在电泳时不用加小括号 |
| components | 定义Vue实例的子组件 |
| filters | 定义Vue实例的过滤器 |
| watch | 监听数据变化，观察和响应Vue实例上的数据变动 |
el根标签
在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。
data数据对象
data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data属性能够响应数据变化，格式如下：
var app = new Vue( { 数据 } )
（1）以对象（Object）的形式，代码如下：
<div id="app">{
{content}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"Mustache表达式通过data为对象获取content的值"
}
})
</script>（2）以函数（function）的形式，代码如下：
<div id="app">{
{content}}</div>
<script>
var app = new Vue({
el:"#app",
data:function(){
return{
content:"Mustache表达式通过data为对象获取content的值"
}
}
})
</script>methods定义方法
methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。基本语法如下：
<script>
var app = new Vue({
methods:{
方法名:function(){ }
}
})
</script>演示单击按钮修改文本：
<p>单击按钮修改文本</p>
<div id="app">
<p>{
{msg}}</p>
<button @click="doChange">请单击</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"初始化文本！"
},
methods:{
doChange:function(){
this.msg="新的文本！" //改变data中msg属性的值
}
}
})
</script>执行结果对比
二、生命周期
一个Vue实例完整的生命周期可以分为4个阶段：
初始化阶段、模板编译阶段、挂载阶段、卸载阶段
生命周期流程详细介绍如下：
（1）实例化Vue: new Vue()
（2）初始化事件和生命周期：init events 和 init lifecycle
（3）执行beforeCreate钩子函数
（4）挂载数据（属性赋值）
（5）执行Created钩子函数
（6）检查
（7）执行beforeMount钩子函数
（8）模板编译
（9）执行Mounted钩子函数
（10）执行before Update钩子函数
（11）执行updated钩子函数：Vue实例销毁之前
（13）执行destroyed钩子函数：Vue实例销毁后
三、常用指令
1、v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当作普通字符串处理，不会解析标签，与插值表达式作用相同。
<div id="app" v-text="msg"></div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hello,v-text!"
}
})
</script> 
注意：如果同时显示用户前台数据，那么就需要用插值表达式；如果只是单独显示Vue实例里的数据，建议使用“v-text”指令。
2、v-html
v-html用来在DOM元素内部插入HTML代码内容
<div id="app" v-html="msg"></div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"<h1>Hello,v-html!</h1>"
}
})
</script>
可以看出v-text与v-html指令不同的是，v-html绑定的数据可以是HTML结构
3、v-cloak
v-cloak指令可以隐藏未编译的Mustache标签直到关联实例结束编译
<style>
[v-cloak]{
display:none;
}
</style>
<div id="app"v-cloak>{
{msg}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hello,v-cloak!"
}
})
</script>
4、v-bind
v-bind指令用于实现单向动态数据绑定
<div id="app">
<input v-bind:value="msg">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hello,v-bind!"
}
})
</script>
注意：当改变app.msg的值时，页面文本框中的数据会自动更新，但不能实现视图驱动数据变化，所以v-bind指令时单向数据绑定，而不是双向数据绑定
v-bind可以省略v-bind，简写为一个冒号“ : ”
<!-- 完整写法 -->
<img v-bind:src="src"></img>
<!-- 简写 -->
<img:src="src"></img>5、v-on
v-on指令用来绑定事件监听器
<div id="app">
<p>{
{msg}}</p>
<button v-on:click="sayHello">请单击</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"Hi"
},
methods:{
sayHello:function(){
this.msg="Hello,v-on!"
}
}
})
</script>
v-on可以直接使用“@”简写：
<!-- 完整写法 -->
<a v-on:click="do"></a>
<!-- 简写 -->
<a @click="do"></a>所有支持Vue.js的浏览器中都能正确解析简写方式，并且它们不会出现在最终渲染的标签中