1. 要点
Vue.js 使用了基于 HTML 的模板语法
也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语法
2. 细节点
2.1 插值
2.1.1 文本
“Mustache”语法 (双大括号) {{ msg }}
<span>Message: {{ msg }}</span>
2.1.2 html
v-html 指令 v-html="rawHtml" 不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎
<span v-html="rawHtml"></span>
扩展:
v-text 与 v-html 相比,前者输出转义后字符,即未渲染的dom
2.1.3 特性(属性)
v-bind 指令 v-bind:id="dynamicId"
<div v-bind:id="dynamicId"></div>
2.1.4 js 表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
2.2 指令 指令 (Directives) 是带有 v- 前缀的特殊特性
2.2.1 普通指令
显示隐藏
<p v-if="seen">现在你看到我了</p>
一次绑定
2.2.2 带参数指令
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
2.2.3 动态参数 使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式 浏览器会把特性名全部强制转为小写
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
2.2.4 修饰符 以半角句号 .
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit">...</form>
2.3 缩写
2.3.1 v-bind 缩写
<a v-bind:href="url">...</a>
<a :href="url">...</a>
2.3.2 v-on 缩写
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>
3. 代码
View Code
4. 参考网址