vue语法模板
插值
-
文本插值是最基本的形式,使用双大括号(Mustache语法) {{}},代码如下所示:
<span>Text:{{ text }} </span>
-
有时候只需渲染一次数据,后续数据变化不再关心,可以通过v-once指令来实 现,代码如下所示:
<span v-once>Text:{{ text}}</span>
-
文本插值还可以使用v-text指令来代替双大括号标签,代码如下所示:
<span v-text="text"></span>
实例绑定数据的几种方式;
HTML代码:
<div id="app">
<p>{{ userName }}</p>
<p v-once>{{ userName }}</p>
<p v-text=
"userName"></span>
<p v-html=
"userName"></p>
</div>
JavaScript代码:
var vm = new Vue({
el: "#app"
,
data: {
userName: "<h1>欢迎您,管理员!</h1>"
}
});
-
文本插值也接受表达式形式的值,表达式可由JavaScript表达式和过滤器构成, 其中过滤器可以没有,也可以有多个。
-
n表达式是各种数值、变量和运算符的综合体。简单的表达式可以是常量或者变量名称。
-
n表达式的值是其运算结果,如下示例代码所示
html代码: <div id= "app"> <p></p>{{ number+1 }}</p> <p>{{ ok? "Yes":"No" }}</p> <p>{{ message.split("").reverse().join("") }}</p> <div v-text="'list-'+id"></div> </div> JavaScript代码: var vm = new Vue({ el: "#app", data: { number: 1, ok: true, message: "Hello world", id: "01" } });
注意
Vue只支持单个表达式,不支持语句和流控制。另外,在表达式中,不能使用用户自定义的全局变量,只能使用JavaScript的全局变量,例如Math和Date。以下是无效的表达式代码:
<!--这是语句,不是表达式-->
{{ var book =
"JavaScript权威指南" }}
<!--不能使用流控制,要使用三元条件运算符-->
{{ if(ok) return msg }}
指令
-
指令(Directives)是Vue.js中一个重要的特性,主要提供了一种机制将数据的 变化映射为DOM行为。
-
n指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单一 JavaScript表达式(除了v-for,之后再讨论)。指令的职责就是当其表达式的 值改变时相应地将某些行为应用到DOM上。如下代码所示;
<p v-if= "seen">现在可以看到的内容</p> var vm=new Vue({ el:”#app” , data:{ seen:true } });
v-if指令将根据 表达式seen的值 的真假来移除/插入元素
-
一些指令能接受一个“参数” ,在指令后以冒号指明。例如,v-bind指令被用 来响应地更新HTML属性,代码如下所示:
<a v-bind:href="url"></a>
href是参数,告知v- bind指令将该元素的 href属性与表达式url 的值绑定。
-
v-on指令,它用于监听DOM事件,代码如下所示:
<a v-on:click="doSomething">
在这里参数是监 听的事件名
-
一些指令能接受一个“参数” ,在指令后以冒号指明。例如,v-bind指令被用 来响应地更新HTML属性,代码如下所示:
<a v-bind:href="url"></a>
href是参数,告知v-bind指令将该元素 的href属性与表达式url的值绑定。
-
v-on指令,它用于监听DOM事件,代码如下所示:
<a v-on:click="doSomething">
在这里参数是监 听的事件名
-
修饰符(Modifiers)是以半角句号“.”指明的特殊后缀,用于指出一个指定 应该以特殊方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件调 用event.preventDefault(),代码如下所示:
<form v-on:submit.prevent="onSubmit"></form>