模板语法
Vue.js使用了最基本的HTML语法,可以声明试的将DOM绑定到底层Vue实例的数据中。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合响应系统,Vue 能够得出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
<p> 计算结果:{{ msg }} </p>
Mustache(双大括号) 标签将会被替代为对应数据对象上 msg 的值。无论何时,绑定的数据对象上 msg的值发生了改变,插值处的内容就会被更新。
提示:通过添加 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。简单说就是赋值后就不可改变,但请留心这会影响到该节点上的其它数据绑定:
<h1 v-once>{{ message }}</h1>
1、文本与原始HTML
双大括号会将数据解释为普通文本(默认是:v-text指令),而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html指令,要把二者区分开来,示例如下:
<div id="app">
<p v-text>{{ message }}</p>
<p v-html style="color: red;">Hello!</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "<p style='color: red;'>Hello!</p>"
}
})
</script>
提示:第一个p标签会原样输出属性值,第二个p标签会解析成HTML输出(会忽略属性值中的数据绑定)。
不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。
站点上动态渲染的HTML都可能非常危险,因为它很可能导致XSS(跨站脚本攻击)攻击,请只对可信赖的内容使用HTML插值,不要对用户提供的内容使用插值。
2、使用javascript表达式
在示例中,都是简单的绑定属性值,但实际上,,对于所有的数据绑定,Vue.js都提供了完整的 JavaScript 表达式支持。
{{ number+1 }}
{{ ok ? 'Yes' : 'No' }}
{{ message.split('').reverse().join('') }}
这些表达式会在所属Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
指令
指令 (Directives) 是带有 “v-” 前缀的特殊 标志。指令的职责是,当表达式的值发生改变时,将其产生的连带影响,响应式地作用于 DOM,重新渲染Web。回顾我们在介绍中看到的例子:
<p v-if="see">现在你看到我了</p>
这里的v-if指令是根据表达式see的值的真/假来插入/移除元素的,如果为真则插入p元素,为假则移除p元素。
1、参数
有些指令可以接收参数,在指令后面接:表示,如v-bind指令可以用于响应式的更新HTML属性。
<a v-bind:href="url">这是一个链接</a>
在这里href是参数,告知v-bind指令将该元素的href属性与表达式url的值绑定。
另一个是v-on指令,用来监听DOM时间,如:
<a v-on:click="onClick">点击事件</a>
在这里参数是监听的时间名
2、修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
(event.preventDefault()是通知浏览器不要执行与事件关联的默认动作)
缩写
v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的 属性。当你为现有标签添加动态行为时,v-前缀很有标识,然而,对于需要频繁用到的指令来说,就很繁琐,这时,就可以用对应缩写,如上面用到的v-bind与v-on,这两个也是经常使用到的,特定简写为:
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 完整语法 -->
<a v-on:click="onClick">...</a>
<!-- 缩写 -->
<a @click="onClick">...</a>
缩写语法是完全可选的,但是它们不会出现在最终渲染的标记上。