(---取值vue官方文档
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
)
最常见的形式为‘Mustache’语法(双大括号)的文本插值;
Mustache标签 将会被替代为对应数据对象上的 message 属性的值,绑定的数据对象 message 属性改变,插值处内容也会更新。
使用v-once指令,也能执行一次性的插值(数据改变时,插值处的内容不会更新:注意 会影响该节点上其它的数据绑定):
这个将不会改变: {{ msg }}
双大括号会将数据解释为普通文本,而不是HTML代码,如果想输出的是真正的HTML,要用v-html指令:
例如对比
html:
<p> 正常的{{myhtml}} p> <p> v-html的 <span v-html="myhtml">span>p>
data:
myhtml : " 这是红色",
输出结果:
正常的 这是红色
v-html的 这是红色
注意点:
1,你不能使用 v-html
来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。
2,你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
Mustache语法不能擢用在HTML特性上,如遇到可以使用
v-bind 指令:
<div v-bind:id="dynamicId">div>
在布尔特性下,它们的存在即暗示为 true ,v-bind工作起来略有不同:
<button v-bind:disabled="isButtonDisabled">Buttonbutton>
如果 isButtonDisabled
的值是 null
、undefined
或 false
,则 disabled
特性甚至不会被包含在渲染出来的 元素中。
vue除了绑定简单的属性键值,还可以使用JavaScript表达式:
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">div> |
(这些表达式会在所属vue示例的数据作用域下作为JavaScript被解析。限制就是每个绑定都只能包含一个表达式,)
不会生效的例子:
{{ var a = 1 }} {{ if (ok) { return message } }}
注意:模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math
和 Date
。你不应该在模板表达式中试图访问用户定义的全局变量。
参数
一些指令能够接受一个“参数”,在指令名称之后以冒号表示。
例如:
1,v-bind指令可以用于响应式地更新HTML特性:
<a v-bind:href="url">...a>
href 是参数, 告知 v-bind 指令 将该元素的 href 特性与表达式 url 的值 绑定。
2,v-on 指令 ,它用于监听DOM事件:
<a v-on:click="doSomething">...a> |
修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如:
.prevent 修饰符 告诉 v-on 指令 对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...form>
其它的例如 v-on 和 v-for 等功能的修饰符 ,会在探索功能的时候看到,现在只是了解一下。
缩写
Vue.js 为 v-bind
和 v-on
这两个最常用的指令,提供了特定简写:
v-bind
缩写<a v-bind:href="url">...a> <a :href="url">...a> |
v-on
缩写<a v-on:click="doSomething">...a> <a @click="doSomething">...a> |
:
与
@
对于特性名来说都是合法字符,在所有支持 Vue.js 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的