模板语法
1、插值
a、文本
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值
我们在普通插值的时候无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新
【案例】
<div id="app"><span>{{ msg }}</span><br/>
</div><script>var app = new Vue({el:"#app",data:{msg:"wo zai xue xi vue!"}});
</script>
结果就是：wo zai xue xi vue!
我们在使用 v-once指令的时候，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
【案例】
<div id="app"><span>{{ msg }}</span><h4 v-once>{{ msg }}</h4>
</div><script>var app = new Vue({el:"#app",data:{msg:"wo zai xue xi vue!"}});
</script>
打印结果看下图
b、纯HTML
双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令
【案例】
<div id="app"><div v-html="message"></div>
</div><script>var app = new Vue({el:"#app",data:{message:"我是纯HTML"}});
</script>
打印结果：我是纯HTML
c、特性
mustache 语法不能作用在 HTML 属性上，遇到这种情况应该使用 v-bind 指令：
【案例】
<div id="app"><div v-bind:title="msg2">nihao</div>
</div><script>var app = new Vue({el:"#app",data:{msg1:"<li>nihao</li>",msg2:"你好啊"}});
</script>
d、使用 JavaScript 表达式
什么是表达式
由变量函数返回值和运算符以及常量组成的式子就叫表达式
2、指令
什么是指令
指令（Directives）是带有 v- 前缀的特殊属性。
指令的职责是什么
当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
最常用的指令有：
v-bind和v-on
a、参数
指令的参数都有哪些
比如href
b、修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用
【案例】
<div id="app"><a v-bind:href="url" v-on:click.prevent="a">百度</a>
</div>
<script>var app = new Vue({el:"#app",data:{msg:"xue xi vue!",url:"http://www.baidu.com"},methods:{a:function(){console.log("阻止跳转!")}}});
</script>
结果看下图
3、过滤器
过滤器是用来干什么的
对文本进行格式化的
过滤器用在什么地方
过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。
【反转案例】
<div id="app">{{msg|guolvqi}}{{msg|guolvqi}}{{msg|guolvqi}}
</div>
<script>var app = new Vue({el:"#app",data:{msg:"xue xi vue!"},//定义过滤器filters: {guolvqi:function(value){return value.split("").reverse().join("")}}});
</script>
打印结果：!euv ix eux !euv ix eux !euv ix eux
【串联一个大写案例】
<div id="app">{{msg|guolvqi|daxie}}{{msg|guolvqi|daxie}}{{msg|guolvqi|daxie}}
</div>
<script>var app = new Vue({el:"#app",data:{msg:"xue xi vue!"},//定义过滤器filters: {guolvqi:function(value){return value.split("").reverse().join("")},daxie:function(value){return value.toUpperCase();}}});
</script>
打印结果：!EUV IX EUX !EUV IX EUX !EUV IX EUX
过滤器也可以接收参数
4、缩写
a、v-bind缩写
【案例】
<div id="app"><div :title="msg">缩写</div>
</div>
<script>var app = new Vue({el:"#app",data:{msg:"xue xi vue!"}});
</script>
结果看下图
b、v-on缩写
【案例】
<div id="app"><div @click="shijian">缩写</div>
</div>
<script>var app = new Vue({el:"#app",data:{msg:"xue xi vue!"},methods:{shijian:function(){console.log(this.msg)}}});
</script>
结果看下图
喜欢的朋友别忘了点赞和收藏啊
