Class 与 Style 绑定
绑定HTML Class
对象语法
<div :class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness 。
这个对象也不必内联在模板里，下面的写法更为常用：
<div :class="classObject"></div>
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
数组语法
<div :class="[activeClass, errorClass]"></div>
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
可以把一个数组传给 :class，以应用一个 class 列表。
绑定内联样式
对象语法
:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，需要用引号括起来) 来命名：
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
也可以直接绑定到一个样式对象：
<div :style="styleObject"></div>
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
数组语法
与class绑定类似：
<div :style="[baseStyles, overridingStyles]"></div>
...
使用style绑定有一个好处，就是在 :style 中使用需要 (浏览器引擎前缀) vendor prefixes 的 CSS property 时，如 transform，Vue 将自动侦测并添加相应的前缀。
条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染：
<h1 v-if="awesome">Vue is awesome!</h1>
当awesome是truthy时，上面的标题会被渲染。
v-if指令块后面可以跟着v-else-if和v-else指令块：
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
v-show指令同样可以用来控制是否渲染指定代码块，并且它的用法与v-if相似。
不过他们也有区别：
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
基本用法
可以用v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名：
<ul id="array-rendering">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
Vue.createApp({
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}
}).mount('#array-rendering')
维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
<div v-for="item in items" :key="item.id">
<!-- content -->
</div>
数组更新检测
数组通过以下方法进行变更时，会触发视图更新：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
事件处理
监听事件
可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"：
<div id="basic-event">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
Vue.createApp({
data() {
return {
counter: 1
}
}
}).mount('#basic-event')
事件处理方法
v-on 还可以接收一个需要调用的方法名称：
<div id="event-with-method">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">Greet</button>
</div>
Vue.createApp({
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// `methods` 内部的 `this` 指向当前活动实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
}).mount('#event-with-method')
内联处理器中的方法
可以在内联 JavaScript 语句中调用方法：
<div id="inline-handler">
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>
Vue.createApp({
methods: {
say(message) {
alert(message)
}
}
}).mount('#inline-handler')
如果需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
// ...
methods: {
warn(message, event) {
// 现在可以访问到原生事件
if (event) {
event.preventDefault()
}
alert(message)
}
}
多事件处理器
事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
Submit
</button>
// ...
methods: {
one(event) {
// 第一个事件处理器逻辑...
},
two(event) {
// 第二个事件处理器逻辑...
}
}
事件修饰符
Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的：
- .stop // 阻止单击事件继续传播
- .prevent // 提交事件不再重载页面
- .capture // 修饰符可以串联
- .self // 只当在 event.target 是当前元素自身时触发处理函数(即事件不是从内部元素触发的)
- .once // 点击事件将只会触发一次
- .passive // 默认行为触发的事件会立即触发
按键修饰符
Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
按键别名
- .enter // enter键
- .tab // tab键
- .delete // delete键和backspace键
- .esc // esc键
- .space // 空格键
- .up // 向上箭头
- .down // 向下箭头
- .left // 向左箭头
- .right // 向右箭头
系统修饰符
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器：
- .ctrl // ctrl键
- .alt // alt键
- .shift // shift键
- .meta // 不同操作系统对应的按键不同，例如在Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
鼠标按钮修饰符
- .left // 鼠标左键
- .right // 鼠标右键
- .middle // 鼠标滚轮
表单输入绑定
基础用法
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将当前活动实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
-
text和textarea元素使用 value property 和 input 事件； -
checkbox和radio使用 checked property 和 change 事件； -
select元素将 value 作为 prop 并将 change 作为事件；
文本(text)用法
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
多行文本(Textarea)用法
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
注意，在文本域的插值是不起作用的
复选框 (Checkbox)用法
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组：
<div id="v-model-multiple-checkboxes">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
单选框 (Radio)用法
<div id="v-model-radiobutton">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
选择框(Select)用法
<div id="v-model-select" class="demo">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
复选框 (Checkbox)用法
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
单选框 (Radio)用法
<input type="radio" v-model="pick" v-bind:value="a" />
选择框选项 (Select Options)用法
<select v-model="selected">
<!-- 内联对象字面量 -->
<option :value="{ number: 123 }">123</option>
</select>
修饰符
- .lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步： - .number
自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符 - .trim
自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
