1.插值
（a）文本（双大括号）
<p>{{ message }}</p>（b）html元素（v-html指令）
<div id="app"> <p v-html="spanHTML"></p> </div>
<script>
new Vue({
el: '#app',
data: {
spanHTML: '<span>显示文本内容</span>'
}
})
</script>（c）属性（v-bind指令）
<div id="app">
<div v-bind:class="classVal"> 测试文本 </div>
</div>
<script>
new Vue({
el: '#app',
data:{
classVal: "redColor"
}
});
</script>2.指令
| v-text | 更新textContent。（直接用双大括号也是可行的） |
| v-html | 输出真正的HTML。（一般输出真正html直接用组件更方便） |
| v-pre | 跳过这个元素和它的子元素解析和渲染。（时显时不显操作可以用） |
| v-cloak | 这个指令是用来保持在元素上直到关联实例结束时进行编译。（会出现闪烁的可能） |
| v-once | 关联的实例只会渲染一次。（一般后边指定跟着组件） |
| v-if | 可以实现条件渲染。（销不销毁这个元素的操作） |
| v-else | 是搭配v-if使用的。 |
| v-else-if | 充当v-if的else-if块，可以链式的使用多次。（更方便实现switch-case语句） |
| v-show | 根据条件展示元素。（实现原理是display:none所以只是隐藏，没有销毁） |
| v-for | 根据遍历数组来进行渲染。（三参数含义：值value，键名key，下标index） |
| v-bind | 动态的绑定一个或者多个特性。（常用的是绑定class，style，href） |
| v-model | 表单上创建双向数据绑定。（登录或者表单提交用的很多） |
| v-on | 监听dom事件。 |
（a）参数
v-bind:常用的是直接绑定数据对象，其简写方式例子中会见
<div id="app">
<div :class="classObject">123456789</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject:{
'isActive': false,
'redColor': true
}
}
})
</script>（b）修饰符
| v-model | .lazy 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步 .number 自动将用户的输入值转化为数值类型 .trim 自动过滤用户输入的首尾空格（常用） |
| v-on | .stop 阻止事件继续传播（常用） .prevent 事件不再重载页面（常用） .once 事件将只会触发一次（常用） .self 只当在 event.target 是当前元素自身时触发处理函数 .passive 告诉浏览器你不想阻止事件的默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 |
3.用户输入
v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '显示文本'
}
})
</script>4.过滤器
（a）管道符“ | ”实现过滤语法书写；
（b）可串联，可单独书写，例如：{{value | filterA | filterB}} ；
（c）允许自定义过滤函数；
<div id="app">
{{ value | filterA(1,2) }}
</div>
<script>
new Vue({
el: '#app',
data: {
value: '显示文本'
},
filters: {
filterA: function (val,num1,num2) {
return val.subString(num1,num2)
}
}
})
</script>（d）自定义过滤器函数允许有参数，如上所示（值，1参，2参）；
（e）vue自带过滤器
| capitalize |
首字母大写 |
| uppercase | 全部大写 |
| lowercase | 全部小写 |
| currency | 输出金钱以及小数点 |
| pluralize | 输出复数的形式 |
| debounce | 延期执行函数 |
| limitBy | 在 v-for 中使用，限制数量 |
| filterBy | 在 v-for 中使用，选择数据 |
| orderBy | 在 v-for 中使用，排序 |