1。什么是Vue.js？Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层，不仅易于使用，而且易于与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持库相结合时，Vue也完全有能力为复杂的单页应用程序提供支持。这几天分享了Vue学习笔记（下）和Vue学习笔记（上），今天我们就来看看下篇。二、Vue的v-for循环（一）v-for循环普通数组1.在data中定义普通数组；data(){return{list:[1,2,3,4,5]}}2.在html中使用v-for命令渲染；索引值为：{{i}}---每一项的值为：{{item}}
3。效果图如下：（二）v-for循环对象数组1.在data中定义对象数组；data(){return{list:[{id:1,name:'zhan1'},{id:2,name:'zhan2'},{id:3,name:'zhan3'},{id:4,name:'zhan4'}]}}2.使用v-for指令在html中渲染：
Id:{{user.id}}---name:{{user.name}}---索引值：{{i}}3。效果图如下：(3)v-for循环对象，遍历对象上的键值对时，除了val和key外，第三个位置还有一个索引值。1.在data中定义一个对象；data(){return{user:{id:1,name:'zhan',gender:'male'}}}2.在html中使用v-for指令渲染：Thevalueis:{{val}}---keyis:{{key}}--Theindexvalueis:{{i}}3.效果图如下如下：(4)v-for迭代数###in之后，我们放开普通数组，对象数组，对象，数字。如果用v-for来迭代数字，之前的计数值是从1开始的。1.在html中使用v-for命令渲染：Thisisthe{{count}}cycle2.效果图如下：(5)在v-for循环在v-for循环中使用key属性时，key属性只能使用数字获取字符串。使用key时，必须使用v-bind属性绑定的形式来指定key的值。在组件中，使用v-for循环时，如果有v-for，指定一个唯一的字符串/数字类型：key的值。1.在data中定义object数组；data(){return{list:[{id:1,name:'zhan1'},{id:2,name:'zhan2'},{id:3,name:'zhan3'},{id:4,name:'zhan4'}]}}2.在html中使用v-for命令渲染代码如下图：3.效果图如下图：3.Vue过滤器的基本使用1.首先定义一个vue全局过滤器，名字为msgFormat，string的replace方法的第一个参数，除了写字符串，还可以定义一个正则。2.在js代码中，比如下面的代码：Vue.filter('msgFormat',function(msg,arg,arg2){returnmsg.replace(/day/g,arg+arg2)})Vue.filter('test',function(msg){returnmsg+'========='})3.在html代码中，比如下面的代码：{{msg|msgFormat('I','123')|test}}
4.在data中定义一个msg:data(){return{msg:'thedayiscloudless'}}5.效果图如下：4.总结1.v-forvue中的loop有普通数组、对象数组、对象、迭代数、key属性的使用，以及这些用法的详细解释，希望对大家有所帮助。2.vue过滤器的基本使用。本地过滤器在全局过滤器之前被调用。一个表达式可以使用多个过滤器。过滤器需要用管道符“|”分隔，执行顺序是从左到右。.本文转载自微信公众号“IT分享之家”，可通过以下二维码关注。转载本文请联系IT分享之家公众号。
