模板语法_vue笔记1

参数

插值

文本

使用“Mustache”语法 (双大括号) 进行文本插值

<span>Message: {{ msg }}</span>

v-once指令能执行一次性插值,请留心这会影响到该节点上的其它数据绑定

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

使用v-html指令

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

特性

Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用v-bind指令:

<div v-bind:id="dynamicId"></div>

在布尔特性的情况下,它们的存在即暗示为 true,v-bind 工作起来略有不同,在这个例子中:

<button v-bind:disabled="isButtonDisabled">Button</button>

如果isButtonDisabled的值是nullundefinedfalse,则disabled特性甚至不会被包含在渲染出来的<button>元素中。

使用JavaScript表达式

对于所有的数据绑定,Vue.js都提供了完整的JavaScript表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

每个绑定都只能包含单个表达式

<!--下面例子不会生效-->
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。

v-bind指令可以用于响应式地更新 HTML 特性

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

v-on:

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

修饰符

修饰符 (Modifiers) 是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。 例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

缩写

v-bind——:

v-on——@

模板语法
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。