模板语法

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>
结果看下图

喜欢的朋友别忘了点赞和收藏啊