点击上方「蓝字」关注我们
v-for指令
Vue 中的 v-for 循环允许你在模板代码中编写 for 循环，尤其是当我们做下面的操作时非常有用：
渲染数组或列表
遍历对象属性
在最基本的用法中， v-for 循环是这样使用的：
<ul><li v-for='product in products'>{{ product.name }}</li></ul>
不过它还有一些你不知道的用法，可以使你的 v-for 代码更加精确、和高效。
始终在 v-for 循环中使用 key
首先要讨论的很多人都已经知道的⼀种用法：在 v-for 循环中使用 key。通过设置唯一的 key 属性，可以确保你的组件按期望的方式工作。
如果我们不使用 key，vue 将会使 DOM 尽可能的高效。这可能意味着 v-for 元素可能出现乱序或其他不可预测的行为。
如果我们对每个元素都有⼀个唯一的键引用，那可以更好地预测 DOM 将会如何被操纵。
<ul><li v-for='product in products':key='product.id'>{{ product.name }}</li></ul>
⽤ v-for 在⼀个范围内进⾏循环
虽然大多数情况下 v-for 用于遍历数组或对象，但肯定存在我们可能只想迭代特定次数的情况。
假设我们要网店创建⼀个分页系统，并且想在每页只显示 10 个商品品。通过使用变量来跟踪我们当前的页码，可以像这样处理分页：
<ul><li v-for='index in 10' :key='index'>{{ products[page * 10 + index] }}</li></ul>
避免在循环中使⽤ v-if
在 v-for 循环中错误地使用 v-if 来过滤数据是非常常见的。虽然这样做看起来很直观，但它会导致⼀个巨大的性能问题—— vue 的 v-for 优先于 v-if 指令。
这意味着你的组件会遍历每⼀个元素，然后检查 v-if 条件查看它是否应该被渲染。
“如果把 v-if 与 v-for 放在⼀起使用，无论你的条件是什么，都会将遍历数组的每⼀个元素。”
// 不好的代码<ul><li v-for='product in products':key='product.id'v-if='product.onSale'>{{ product.name }}</li></ul>
上面的代码会引发什么题呢？
假如我们的商品数组中有几千个项目，但是只有 3 个处于销售状态产品需要渲染。那么每次重新渲染时，即使销售的 3 种产品根本没有变化，vue 也必须遍历几千个项目。所以应该尽量避免这种情况。
接下来是两种替代方案，而不是把 v-for 与 v-if 放在一起用。
改⽤计算属性或⽅法
为了避免上述问题，应该在我们的模板中迭代之前先过滤这些数据。有两种非常相似的方法可以做到：
使用计算属性
使用过滤方法
⾄于用哪种方法你自己说了算。下面对两者进行简单的介绍。
首先需要设置⼀个计算属性。为了打到与之前使用 v-if 相同的效果，代码应该是这样：
<ul><li v-for='products in productsOnSale' :key='product.id' >{{ product.name }}</li></ul>// ...<script>export default {data () {return {products: []}},computed: {//在此处过滤productsOnSale: function () {return this.products.filter(product => product.onSale)}}}</script>
这样做有几个好处：
数据属性只会在依赖项发生变化时才会被重新评估
模板只会遍历在售商品，而不是每⼀个项目
第⼆种方法的代码几乎和前面⼀样：
<ul><li v-for='products in productsOnSale(50))' :key='product._id' >{{ product.name }}</li></ul>// ...<script>export default {data () {return {products: []}},methods: {productsOnSale (maxPrice) {return this.products.filter(product => product.onSale &&product.price < maxPrice)}}}</script>
把循环放到包装元素中
有时候你可能想把 v-for 与 v-if 结合起来使用，用来确定是否需要渲染⼀个列表。
假如我们只想在用户登录时渲染商品列表该怎么办？
// 不好的代码<ul><li v-for='product in products' :key='product._id' v-if='isLoggedIn'>{{ product.name }}</li></ul>
上面的代码会有什么问题？
和前面⼀样， vue 模板会优先考虑 v-for ，所以它会遍历每个元素并检查 v-if 。
即使最终什么都不渲染，也会遍历几千个元素！
比较简单的解决方案是给代码的 v-if 语句换个位置。
// 这样⽐较好<ul v-if='isLoggedIn'> <!-- Much better --><li v-for='product in products':key='product._id' >{{ product.name }}</li></ul>
这要好很多，因为如果 isLoggedIn 为 false 的话根本不需要进行迭代。
在循环中访问索引
除了遍历数组并访问每个元素之外，还可以跟踪每个项目的索引。
为了达到这个目的，必须在我们的项目之后添加⼀个索引值。这非常简单，对于分页、显示列表索引、显示排名等操作都很有用。
<ul><li v-for='(products, index) in products' :key='product._id' >Product #{{ index }}: {{ product.name }}</li></ul>
迭代对象
到目前为止，我们只真正研究了用 v-for 遍历数组。但是我们可以很容易地迭代对象的键值对。
与访问元素的索引类似，我们必须向循环中添加另⼀个值。如果用单个参数循环对象的话将会循环所有项目。
如果我们再添加⼀个参数，将会得到 item 和 key。如果添加第三个还可以访问 v-for 循环的 index。
假设要遍历商品的每个属性，代码应该是这样：
<ul><li v-for='(products, index) in products' :key='product._id' ><span v-for='(item, key, index) in product' :key='key'>{{ item }}</span></li></ul>
v-on指令
用于进行元素的事件绑定
<div id="app"><!-- content为data选项中变量 --><p>{{content}}</p><button v-on:click="content='新内容'">按钮</button><!-- 简写⽅式 --><button @click="content='新内容2'">按钮2</button><!-- 事件程序代码较多时，可在methods中设置函数，并设置为事件处理程序 --><button @click="fn">按钮3</button><!-- 在视图中可以通过 $event 访问事件对象，$event是固定写法，不能随便更改 --><button @click="fn2(100, $event)">按钮4</button></div><!-- CDN引⼊最新稳定版 --><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>const vm = new Vue({el: '#app',data: {content: '默认内容',},methods: {fn (event) {// 设置事件处理函数后，还可从参数中获取事件对象console.log(event)this.content = '新内容3'},fn2 (value, event) {this.content = '新内容4'console.log(event)console.log(value)}}})</script>
v-model指令
⽤于给 <input> 、<textarea> 、<select> 元素设置双向数据绑定。
输入框绑定
<div id="app"><p>输⼊内容是：{{content}}</p><!-- 输⼊框绑定 --><input type="text" v-model="content"><textarea v-model="content"></textarea></div>
<!-- 单选按钮绑定 --><p>radio 的内容为：{{ value }}</p><input type="radio" id="one" value="1" v-model="value"><label for="one">选项1</label><input type="radio" id="two" value="2" v-model="value"><label for="two">选项2</label>
<!-- 单个复选框绑定 --><p>单个复选框的值：{{ cbValue }}</p><inputtype="checkbox"value="选项内容"id="cb"v-model="cbValue"><label for="cb">选项内容</label><!-- 多个复选框绑定，cbValues为data选项中数组类型的变量 --><p>多个复选框的值：{{ cbValues }}</p><inputtype="checkbox"id="cb1"value="选项1"v-model="cbValues"><label for="cb1">选项1</label><inputtype="checkbox"id="cb2"value="选项2"v-model="cbValues"><label for="cb2">选项2</label><inputtype="checkbox"id="cb3"value="选项3"v-model="cbValues"><label for="cb3">选项3</label>
<p>单选选择框的内容: {{ sValue }}</p><select v-model="sValue"><option value="">请选择</option><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><!-- 多选选择框，sValues为数组变量，⽤户感受不如复选框 --><p>多选选择框的内容：{{ sValues }}</p><select v-model="sValues" multiple><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>
主要分为以下几类：
事件修饰符
按键修饰符
系统修饰符
⿏标修饰符
v-model修饰符
事件修饰符
事件修饰符：.prevent修饰符、.stop修饰符、.once修饰符。
.prevent修饰符
⽤于阻止默认事件行为，相当于event.preventDefault()。
<!-- fn是methods中的函数，如下设置，点击不再默认跳转，⽽是执⾏fn --><a @click.prevent="fn" href="https://cn.vuejs.org/">Vue官⽹链接</a>
.stop修饰符
⽤于阻止事件传播（冒泡），相当于event.stopPropagation()。
<div @click="fn1"><!-- 阻⽌了点击事件向上传递给div，这样a点击的时候就不会触发fn1了 --><a @click.prevent.stop="fn2" href="https://cn.vuejs.org/">Vue官⽹链接</a></div>
.once修饰符
设置事件只会触发⼀次。
<button @click.once="fn">按钮</button>按键修饰符
将按键码作为修饰符使用起到标识按键的作用。
<!-- 任意键按下弹起执⾏fn函数 --><input type="text" @keyup="fn"><!-- 数字按键码，49代表数字1键，不是数字键4和9 --><input type="text" @keyup.49="fn"><!-- 字⺟按键码，a代表a键 --><input type="text" @keyup.a="fn"><!-- 功能键按键码，为了兼容性，⾸选内置别名，esc代表Esc按键 --><input type="text" @keyup.esc="fn"><!-- 多键触发，代表单独的a,b,c键均可触发 --><input type="text" @keyup.a.b.c="fn">
系统修饰符
系统修饰符指常用的四个系统按键修饰符：.ctrl修饰符、.alt修饰符、.shift修饰符，和.meta修饰符。它们的特点是需要和其他按键组合使用，单独按键不会触发。
<!-- 多键触发，代表单独的ctrl,q键均可触发 --><input type="text" @keyup.17.q="fn"><!-- 组合按键，代表ctrl键和⼩写q键同时按下才会触发 --><input type="text" @keyup.ctrl.q="fn">
.exact 修饰符
允许你控制由精确的系统修饰符组合触发的事件。这是vue2.5.0 新增的修饰符。
<!-- 点击时即使 Alt 或 Shift 被⼀同按下时也会触发点击事件 --><button @click.ctrl="onClick">A</button><!-- 点击时有且只有 Ctrl 被按下的时候才触发点击事件 --><button @click.ctrl.exact="onCtrlClick">A</button><!-- 点击时没有任何系统修饰符被按下的时候才触发点击事件 --><button @click.exact="onClick">A</button>
鼠标按键修饰符
⽤于设置点击事件由哪个鼠标按键来触发。
<!-- ⿏标左键 --><button @click.left="fn">按钮1</button><!-- 简写 --><button @click="fn">按钮1</button><!-- ⿏标右键 --><button @click.right="fn">按钮2</button><!-- ⿏标中键 --><button @click.middle="fn">按钮3</button>
v-model修饰符
主要包含三个修饰符：.trim修饰符、.lazy修饰符、.number修饰符。
<!-- .trim修饰符⽤于⾃动过滤⽤户输⼊内容⾸尾两端的空格 --><input type="text" v-model.trim="inputValue"><p>{{ inputValue }}</p><!-- .lazy修饰符⽤于将v-model的触发⽅式由input触发改为change事件触发 --><input type="text" v-model.lazy="inputValue"><p>{{ inputValue }}</p><!-- .number修饰符⽤于⾃动将⽤户的输⼊值转为数值类型，⽆法转换则保留为字符串 --><input type="text" v-model.number="inputValue"><p>{{ inputValue }}</p>
END
点个在看 你最好看
发表评论