指令是带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为
v-bind
--> 数据绑定v-for
--> 循环v-if
--> 判断v-on
--> 事件监听v-model
--> 双向绑定v-once
--> 一次性插值v-html
--> 输出html
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用
一些指令能够接收一个“参数”,在指令名称之后以冒号表示
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
.prevent
修饰符告诉 v-on
指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
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 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。
计算属性默认只有 getter
,不过在需要时你也可以提供一个 setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
对象语法
v-bind:class ---> 动态地切换 class
active 这个 class 存在与否将取决于数据属性 isActive 是否为真值
v-bind:class 指令也可以与普通的 class 属性共存
可以绑定对象
`<div v-bind:class="classObject"></div>`
data: {
classObject: {
active: true,
'text-danger': false
}
}
可以绑定返回对象的计算属性
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
数组语法
把一个数组传给 v-bind:class
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
对象语法
v-bind:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>