Vue深入解析-插值,绑定与指令

在上一篇文章<<Vue深入解析-Mustache>>中,我们解释了vue在插值和绑定表达式时使用的模板语言Mustache的相关知识,这篇文章我们会深入解析下Vue是如何使用Mustache模板的语法.

插值

插值是Vue用来实现使用数据绑定的一种方式,在Vue中常用的方式如下:

• 文本插值
  使用"Mustache"语法(双括号 {{keyName}} 语法 直接输出与键名匹配的键值),实现文本插值对数据的基本绑定: 在解析过程中Mustache标签会被相应数据对象的属性的值替换,每当这个属性变化时它也会更新.
  代码段:

<div id="msg">
<p>{{msg}}</p>
</div>
<script>
var msg = new Vue({
el:"#msg",
data:{
msg:"This is a message."
}
})
</script>

如果这时通过控制台,运行:
** msg.$data.msg = "This is a new message" **
这时你会发现页面中的文本会跟着发生变化.
插值与数据彼此关联,数据更新引发插值更新.如果只想进行单次插值,可以向如下使用:

<span>This will never change: {{* msg}}</span>

• 原始HTML
  使用三括号的Mustache,进行原始HTML输出(这是Mustache的语法 {{{keyName}}}会保持内容原样输出)

<div id="vueHtml">
{{{vueHtml}}}
</div>
<script>
var vueHtml = new Vue({
el:"#vueHtml",
data:{
vueHtml:"<p>这段文字会原样输出HTML代码</p>"
}
})
</script>

• HTML属性:
  Mustache标签( {{keyName}} 会直接输出与键名匹配的键值的特性)可以用在html属性内:

<div id="component">
<div id="item-{{id}}"></div>
</div>
<script>
var comp = new Vue({
el:"#component",
data:{
'id':"val1"
}
});
</script>

绑定表达式

放在Mustache标签内的文本称为绑定表达式,在Vue.js中,一段绑定表达式由一个简单的Javascript表达式和可选的一个多个过滤器构成.
** a.Javascript表达式 **
在双括号的Mustache标签内,可以包含的是单个js表达式,如果是语句的话就是无效的.
{{ number + 1}}
{{ ok ? "Yes" : "No"}}
{{message.split('').reverse().join("")}}
以下均无效
{{var a = 1}} //这是一个语句
{{if(ok) {return message}}} //控制语句

<div id="component">
<div>{{ number + 1}}</div>
<div>{{ ok ? "Yes" : "No"}}</div>
<div>{{message.split('').reverse().join("")}}</div>
</div>
<script>
var comp = new Vue({
el:"#component",
data:{
'message':"edcba",
'number':12,
'ok':"1"
}
});
</script>

b.过滤器
vue.js允许在表达式后添加可选的"过滤器",将表达式message的值,运用管道(pipe),输到相应的过滤器内,过滤器对输入进行处理,最好返回处理后的 值.(真是个很棒的想法)除了vue内部自带的过滤器,还可以自定义过滤器.
{{ message | capitalize }}
这里我们将表达式 message 的值通过内部管道输入到内置过滤器 capitalize过滤器中,这个过滤器其实只是一个Javascript函数,返回大写化的值.
由表达式到过滤器通过类似管道的方式进行传递数据,处于这种特性也就不难理解,vue的过滤器可以串联了(A过滤器处理完的数据,又传到B过滤器进行处理):
{{ message | filterA | filterB}}
由于过滤器本质就是函数,所以其必然可以接收参数:
{{ message | filterA "arg1" arg2}}
在Vue的过滤器的预设中,如果是带引号的会直接当作参数传递个过滤器("arg1"会直接传递给过滤器filterA当作第二个参数,第一个参数是message的 返回值),arg2会被当作表达式,在arg2值计算出来后,把arg2计算出的值,当作第三个参数传递给过滤器filterA.
下面是一个过滤使用的例子,这里对item.name使用lowercase进行小写过滤,item.price使用currency对输出进行过滤.

<div id="component">
<ul>
<li v-for="item in fItems"> name: {{item.name|lowercase }}; price:{{item.price|currency "$"}} </li>
</ul>
</div>
<script>
var comp = new Vue({

el:"#component",
data: {
fItems: [{name: "《精通Spring》",price: "38.80"},
{name: "《精通Hibiernate》", price: "28.80"},
{ name: "《精通Jquery》", price: "25.99"},
{name: "《精通Vue》",price: "18.88"}]
}
});
</script>

指令

指令是vue.js中特殊的带有前缀v-的特性,指令的值限定为绑定表达式.指令的职责就是当表达式的值发生改变时,把某些特殊的行为应用到Dom上.

<p v-if="greeting">Hello</p>

这里的v-if指令将根据表达式greeting值的真假删除/插入<p>元素
参数
有些指令可以在其名称后面带上一个参数,中间用一个冒号隔开.
例如,v-bind指令用于响应地更新HTML特性:

<a v-bind:href="url"></a>

这里href是参数,它告诉v-bind指令将元素href特性跟表达式url的值绑定.
v-on指令,用于监听DOM事件:

<a v-on:click="doSomething"></a>

修饰符
修饰符(Modifiers)是以半角句号(.)开始的特殊后缀,用于表示指令应当以特殊方式绑定.
比如:.literal修饰符告诉指令将它的值解析为一个字面字符串,而不是一个表达式:

<a v-bind:href.literal="/a/b/c"></a>