一：模板语法：
1.{{ }}：数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
2.v-html ：指令用于输出 html 代码
<div id="app7">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
var obj={
rawHtml:"<span>Hello jennifer</span>"
};
var vm=new Vue({
el:'#app7',
data:obj,
});
</script>
输出后的内容：
Using mustaches: <span>Hello jennifer</span>
Using v-html directive: Hello jennifer
备注：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
3.v-bind ：HTML 属性中的值应使用 v-bind 指令（缩写：v-bind:href="url" / :href="url" ）
4.v-if ：根据表达式 seen 的值(true 或 false )来决定(v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。)
*.因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
注意我们不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅风格指南。
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用
v-else：
v-else if：
5.v-show：指令来根据条件展示元素（v-show 只是简单地切换元素的 CSS property display）
注意，v-show 不支持 <template> 元素，也不支持 v-else。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
6.v-for:我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果：
·Foo
·Bar
也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。
5. v-on ：它用于监听 DOM 事件(缩写：v-on:click="change" / @click="change")
事件修饰符
.stop.prevent.capture.self.once.passive
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2.1.4 新增
<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>
2.3.0 新增 Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit">
*鼠标按钮修饰符
6.修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
7.v-model ：v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定
8.过滤器
9.v-once: 只要加上了这个属性，能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<div id="app7"> <p v-on:click="message = 'jennifer'" v-once>{{message}}</p> //加上了v-once后，点击事件不会执行了 </div> <script> var obj={ message:"Hello world!" }; var vm=new Vue({ el:'#app7', data:obj, }); </script>
10.Object.freeze(obj)：Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
<div id="app7">
<p v-on:click="message = 'jennifer'">{{message}}</p>
</div>
<script>
var obj={
message:"Hello world!"
};
Object.freeze(obj); //备注：这段代码的执行会阻止P标签的点击事件无效。
var vm=new Vue({
el:'#app7',
data:obj,
});
</script>
11.computed：计算属性（setter(做了修改后执行)、getter（未修改前的正常执行））
<div id="app7">
<p>{{message}}</p>
<p>{{reversedMessage }}</p>
</div>
<script>
var obj={
message:"Hello world!"
};
var vm=new Vue({
el:'#app7',
data:obj,
computed:{
reversedMessage(){
return this.message=this.message.split("").reverse().join(".")
}
}
});
</script>
上面的操作，我们可以通过在表达式中调用方法来达到同样的效果：
<div id="app7">
<p>{{message}}</p>
<p>{{reversedMessage（）}}</p>
</div>
<script>
var obj={
message:"Hello world!"
};
var vm=new Vue({
el:'#app7',
data:obj,
methods:{
reversedMessage(){
return this.message=this.message.split("").reverse().join(".")
}
} }); </script>
重点解读：不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
12：watch：侦听属性
<div id="app8">{{name}}</div>
<script>
var vm=new Vue({
el:"#app8",
data:{
firstName:"刘",
lastName:"希贤"
},
computed:{
name(){
return this.name=this.firstName+this.lastName
}
}
})
</script>
结果输出：刘希贤
方法二：
push()pop()shift()unshift()splice()sort()reverse()filter()、concat()和slice()