Vue 模板语法
阅读数:81 评论数:0
跳转到新版页面分类
html/css/js
正文
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量, 也可以不用模块, 直接写渲染函数, 使用可选的JSX语法.
1. 插值
(1) 文本
数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值:
<span>Message: {{ msg }}</span>
mustache标签将会被替代为对应数据对象上msg属性的值, 无论何时, 绑定的数据对象上msg属性发生改变, 插值处的内容都会更新.
通过v-once指令, 也能执行一次性地插值, 当数据改变时, 据条件需处的内容不会更新.
<span v-once>这个将不会改变: {{ msg }}</span>
(2) 原始HTML
双大括号会将数据解释为普通文本, 而非HTML代码. 为了输出真正的HTML, 需要使用v-htm指令.
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
但注意, 动态渲染任意html可能会非常危险, 因为它很容易导致xss攻击.
(3) 特性
mustache语法不能作用于html特性上, 遇到这种情况应该使用v-bind指令:
<div v-bind:id="dynamicId"></div>
对于布尔特性, v-bind工作起来略有不同
<button v-bind:disabled="isButtonDisabled">Button</button>
如果isButtonDisabled的值是null, undefined或false, 则disabled特性甚至不会被包含在渲染出来的<button>元素中.
(4) 使用JavaScript表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析, 有个限制就是, 每个绑定都只能包含单个表达式.
2. 指令
指令是带有v-前缀的特殊特性, 指令的职责是, 当表达式的值改变时, 将其产生的连带影响, 响应式地作用于DOM.
(1) 参数
一些指令能够接收一个"参数", 在指令名称之后以冒号表示.
<a v-bind:href="url">...</a>
(2) 动态参数
可以用方括号括起来的JavaScript表达式作为一个指令的参数:
<a v-bind:[attributeName]="url"> ... </a>
这里的attributeName会被作为一个JavaScript表达式进行动态求值, 求得的值将会作为最终的参数来使用.
(3) 修饰符
修饰符是以半角句号指明的特殊后缀, 用于指出一个指令应该以特殊方式绑定.
3. 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>