模块语法
概述:vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有 Vue的模板都是合法的 HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组 件,并把 DOM 操作次数减到最少。
插值
文本
使用“Mustache”语法 (双大括号) 进行文本插值
实例:<span>Message: {{ msg }}</span>
在上述代码中Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时,绑定的数据对象上 msg property 发生了改变,插值处的内容都会更新。
通过使用 v-once 指令,可以执行一次性地插值,当数据改变时,插值处的内容不会更新。
实例: <span v-once>这个将不会改变: {{ msg }}</span>
原始html
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:
<div v-html="htmlStr">
</div>
<script></script>
new Vue({
el: "#app",
data: {
msg: 'hello',
htmlStr: '<span>123</span>'
},
)}
Attribute
Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
注意点:对于布尔 attribute (它们只要存在就意味着值为 true),v-bind 工作起来略有不同,在这个例子中:
如果 isButtonDisabled 的值是 null
、undefined
或 false
,则 disabled attribute
甚至不会被包含在渲染出来的 <button>
元素中
使用 JavaScript 表达式
对于所有的数据绑定,Vue.js 都提供了完全的 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 } }}
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute
。指令 attribute
的值预期是单个 JavaScript 表达式
指令的作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
<p v-if="seen">现在你看到我了</p>
这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p>
元素。
参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute:
<a v-bind:href="url">...</a>
在这里 href 是参数,告知 v-bind 指令将该元素的 href
attribute 与表达式 url
的值绑定
另一个例子是 v-on 指令,它用于监听 DOM 事件:
<a v-on:click="doSomething">...</a>
在这里参数是监听的事件名
动态参数
可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:
<!--
注意,参数表达式的写法存在一些约束
-->
<a v-bind:[attributeName]="url"> ... </a>
这里的attributeName
会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href"
,那么这个绑定将等价于 v-bind:href
。
同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中,当 eventName 的值为 “focus” 时,v-on:[eventName]
将等价于 v-on:focus
。
对动态参数的约束
动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
- 动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式.
- 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写(微信小程序也会出现这样的情况):
!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property,否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
修饰符
修饰符 (modifier) 是以半角句号 .
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent
修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v-bind
缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on
缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
条件渲染
v-if
<h1 v-if="exp">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>
当exp返回true的时候h1的内容会被渲染,否则渲染v-else指令中的内容,v-if可以单独使用
v-show
<h1 v-show="ok">Hello!</h1>
v-show
只是简单地切换元素的CSS property display
。如果需要非常频繁地切换,使用v-show
比较好
注意点:不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
列表渲染
用于将列表数据进行渲染。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源 数据数组,而 item
则是被迭代的数组元素的别名
<ul> <li v-for="item in items" :key="item.message"> {{ item.message }} </li>
</ul>
<!-- 当items为数组的时候,item为数组元素 -->
<ul>
<li v-for=“(item,index) in items" :key="item.message"> {{ item.message }}
</li>
</ul> index表示索引
<ul>
<li v-for= "(value,key,index) in obj" :key="value"> {{ value}}
</li>
</ul>
<!-- 当obj为对象的时候,value为属性值,key为属性名,index为索引 -->
key
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得 非常快。但是有些时候,我们却不希望vue复用,这时候Vue 为你提供了一种方式来表达“这两个元 素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key
class绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是attribute,所以我们可 以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因 此,在将v-bind用于class和style时,Vue做了专门的增强。表达式结果的类型除了字符串之外,还 可以是对象或数组
<div v-bind:class="{ active: isActive }"></div>
<!-- 当isActive 为true,该div具有active这个class -->
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
属性绑定
v-bind 指令可以用于响应式地更新 HTML attribute,v-bind指令名称之后以冒号表示要接受的参数
<a v-bind:href="url"></a>
<!-- url为变量,表示将url变量的值动态赋值给a标签的href属性,注意,这里url在vue中是什么类型就传递给 href属性什么类型。 -->
<a :href="url"></a>
<!-- 由于属性绑定在vue中使用概率较大,所以这里提供了简写形式 -->
style绑定
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 测试样式 -->
<div :style="styleObj">Hello</div>
<!-- 冒号后面的style只能跟数组和对象 -->
<div :style="{color: currentColor}">World</div>
<div :style="[styleObj,styleObj2]">Hello World</div>
</div>
<script>
new Vue({
el: "#app",
data: {
currentColor: 'blue',
msg: 'hello',
styleObj: {
color: 'red',
"font-size": "30px" //fontSize
},
styleObj2: {
"background-color": 'pink',
fontSize: "30px" //fontSize
}
},
methods: {
}
})
</script>
</body>
</html>