文章目录
- 一，v-on
- 1，指令简介
- 2，在button按钮中添加v-on:click
- 3，事件修饰符
- 阻止冒泡
- 执行一次
- 阻止默认
- 4，按键修饰符
- 5，组合按钮
- 二，v-for
- 1，遍历数组
- 2，v-bind:key
- `:key` 的重要性
- 使用 `:key` 的最佳实践
- 3，遍历对象
本节主要介绍了几个指令的使用：
- v-on
- v-for
- v-if
一，v-on
1，指令简介
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。
v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
2，在button按钮中添加v-on:click
在index.html中增加一个button按钮。
<button v-on:click="num++" >点赞</button>
注意，这个按钮使用了v-on:click指令，指令中是js代码，当按钮被点击后，执行这段代码，model中的num自增。
当然，在v-on中也可以调用model中的方法。
<button v-on:click="cancel" >取消点赞</button>
如上，在一个button中使用v-on:click指令注册了click事件，这个事件调用了cancel方法，其在vue对象中的声明如下。
let vm = new Vue({
el: '#app',
data: {
name: "张二强",
num: 100
},
methods:{
cancel(){
this.num--;
}
}
})
注意，方法都要声明在methods下。
事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'，后面的示例都采用简写。
3，事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管可以在方法中轻松实现这点，但最佳实践是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop：阻止事件冒泡到父元素.prevent：阻止默认事件发生.capture：使用事件捕获模式.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）.once：只执行一次
定义如下View演示事件修饰符的使用。
<div id="app">
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" @click="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click="hello">
小div <br />
</div>
</div>
</div>
let vm = new Vue({
el: '#app',
methods:{
hello(){
alert("点击了")
}
}
})
效果如下，一个div内嵌套着另一个div，两个div注册了点击事件。
阻止冒泡
如果点击内部div，会发现有两次Alert弹窗，原因是点击事件会冒泡到外部div，触发外部div的点击事件，可以通过事件修饰符阻止冒泡。
<div id="app">
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" @click="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br />
</div>
</div>
</div>
内部div注册点击事件时加上修饰符stop，即可阻止冒泡。
执行一次
注册点击事件时加上修饰符once，表示只有第一次点击时执行一次函数，后续的点击事件都不执行。
阻止默认
对于a标签，点击时默认会跳转到href属性执行的网站，可以通过修饰符阻止这个默认行为。
<div id="app">
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" @click="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br />
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
</div>
</div>
</div>
注意a标签的click指令后有连续两个修饰符.prevent.stop，启动的作用有两个：
- prevent，阻止默认的跳转行为
- stop，阻止冒泡
4，按键修饰符
在监听键盘事件时，经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
记住所有的 `keyCode` 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
5，组合按钮
可以用如下修饰符来实现同时按下两个键时才有指定的响应。
.ctrl
.alt
.shift
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
二，v-for
遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。
1，遍历数组
model中定义了一个名为users的数组。
let app = new Vue({
el: "#app",
data: {
users: [
{ name: '柳岩', gender: '女', age: 21 },
{ name: '张三', gender: '男', age: 18 },
{ name: '范冰冰', gender: '女', age: 24 },
{ name: '刘亦菲', gender: '女', age: 18 },
{ name: '古力娜扎', gender: '女', age: 25 }
]
}
})
通过v-for遍历users数组，渲染到页面上。
<div id="app">
<ul>
<li v-for="(user,index) in users" >
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
</li>
</ul>
</div>
语法：v-for=“(item,index) in items”
- items：要迭代的数组
- item：迭代得到的数组元素别名
- index：迭代到的当前元素索引，从 0 开始。
页面渲染效果如下。
2，v-bind:key
在 Vue.js 中，v-for 指令用于渲染列表或集合中的元素，而 :key 属性则与 v-for 配合使用，以提高列表渲染的效率和准确性。
key 的主要作用在于帮助 Vue 的虚拟 DOM 更高效地更新和重用元素。
:key 的重要性
当 Vue 需要更新使用 v-for 渲染的列表时，它会比较新旧虚拟 DOM 的差异，然后只做必要的更新。
如果没有提供 key，Vue 会采用一种基于元素位置的策略来决定哪些元素需要被更新。
然而，这种方法在某些情况下可能会导致不准确的更新或不必要的重渲染。
提供唯一的 key 值可以给每个元素一个唯一标识，这样 Vue 在更新列表时就能精确地知道哪些元素被添加、删除或移动。这有助于避免不必要的 DOM 更新，从而提高性能。
使用 :key 的最佳实践
使用唯一值：key 应该是一个在列表中独一无二的值。通常，从后端获取的 ID 或索引可以作为 key 的好选择。对于上面的例子，可以用name属性作为key。
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="user.name">
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
</li>
</ul>
</div>
3，遍历对象
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="user.name">
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
遍历对象信息：
对象信息：<br/>
<span v-for="(v,k,i) in user">第{{index}}个对象的第{{i}}个属性：{{k}}=={{v}}；<br/></span>
</li>
</ul>
</div>
页面渲染效果如下。
