1.模板语法
1.1.文本插值，数据绑定。{{}}，如：
<p>{{ message }}</p>
1.2.输出HTML代码。v-html，如：
<div v-html="message"></div>
1.3.HTML属性值绑定。 v-bind，如：
<div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div> <script> new Vue({ el: ‘#app‘, data: { url: ‘http://www.runoob.com‘ } }) </script>
缩写：
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
1.4.判断指令。v-if，如：
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: ‘#app‘, data: { seen: true } }) </script>
1.5.监听DOM事件。 v-on，如：
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
1.6.双向数据绑定。v-model，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。如：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: ‘#app‘, data: { message: ‘Runoob!‘ } }) </script>
1.7.if else指令：v-if, v-else； else if指令：v-if, v-else-if, v-else;
1.8.使用 v-show 指令来根据条件展示元素。如：
<h1 v-show="ok">Hello!</h1>
1.9.循环使用 v-for 指令。可以用来迭代数组，对象，整数如：
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: ‘#app‘, data: { sites: [ { name: ‘Runoob‘ }, { name: ‘Google‘ }, { name: ‘Taobao‘ } ] } }) </script>
1.10.计算属性。computed，如：
<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { message: ‘Runoob!‘ }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split(‘‘).reverse().join(‘‘) } } }) </script>
computed与methods的区别：我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
computed setter：computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
var vm = new Vue({
el: ‘#app‘,
data: {
name: ‘Google‘,
url: ‘http://www.google.com‘
},
computed: {
site: {
// getter
get: function () {
return this.name + ‘ ‘ + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(‘ ‘)
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = ‘菜鸟教程 http://www.runoob.com‘;
2.修饰符
2.1.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。. （半角句号）。如：
<!--event.preventDefault() 阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。--> <form v-on:submit.prevent="onSubmit"></form>
3.过滤器
3.1.过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: ‘#app‘, data: { message: ‘runoob‘ }, filters: { capitalize: function (value) { if (!value) return ‘‘ value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
原文：https://www.cnblogs.com/wang-liang-blogs/p/11934842.html