Vue的学习笔记(下篇)

Python进阶者
• 阅读 1503

一、什么是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指令渲染;

<p v-for="(item, i) in list">索引值是:{{i}} --- 每一项的值是:{{item}}</p>

3.效果图如下图:

Vue的学习笔记(下篇)

(二)v-for循环对象数组

1.在data 中定义对象数组;

data(){
return{
        list: [
  { id: 1, name: 'zhan1' },
  { id: 2, name: 'zhan2' },
  { id: 3, name: 'zhan3' },
  { id: 4, name: 'zhan4' }
]
}
}

2.在html中使用v-for指令渲染:

<p v-for="(user, i) in list">Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引值是:{{i}}</p>

3.效果图如下图:

Vue的学习笔记(下篇)

(三)v-for循环对象,在遍历对象的身上的键值对时候,除了有val、key,在第三个位置还有一个索引值。

1.在data定义一个对象;

data(){
return{
user: {
        id: 1,
        name: 'zhan',
        gender: '男'
   }
}
}

2.在html中使用v-for指令渲染:

<p v-for="(val, key, i) in user">值是:{{ val }} --- 键是:{{key}} -- 索引值是:{{i}}</p>

3.效果图如下图:

Vue的学习笔记(下篇)

(四)v-for迭代数字 ###在in后面我们放过普通数组、对象数组、对象,还可以放数字,如果使用v-for迭代数字的时候,前面的count值的从1开始。

1.在html中使用v-for指令渲染:

<p v-for="count in 5">这是第 {{ count }} 次循环</p>

2.效果图如下图:

Vue的学习笔记(下篇)

(五)v-for循环中key属性的使用

v-for 循环的时候,key 属性只能使用number获取string,在key使用的时候,必须使用v-bind属性绑定的形式,指定key的值,在组件中,使用v-for循环的时候,如果有v-for的同时,指定唯一的字符串/数字类型:key的值。

1.在data 中定义对象数组;

data(){
return{
        list: [
  { id: 1, name: 'zhan1' },
  { id: 2, name: 'zhan2' },
  { id: 3, name: 'zhan3' },
  { id: 4, name: 'zhan4' }
]
}
}

2.在html中使用v-for指令渲染代码如下图:

Vue的学习笔记(下篇)

3.效果图如下图:

Vue的学习笔记(下篇)

三、Vue过滤器的基本使用

1.首先定义一个 Vue 全局的过滤器,名字叫做msgFormat,字符串的replace方法的第一个参数,除了可以写一个字符串之外,还可以定义一个正则。

2.在js的代码中,如以下代码:

Vue.filter('msgFormat', function (msg, arg, arg2) {
  return msg.replace(/day/g, arg + arg2)
})

Vue.filter('test', function (msg) {
  return msg + '========'
})

3.在html代码中,如以下代码:

<p>{{ msg | msgFormat('我', '123') | test }}</p>

4.在data中,定义一个msg:

data(){
return{
msg:'the day is cloudless'
}
}

5.效果图如下图:

Vue的学习笔记(下篇)

四、总结

1.vue中的v-for循环有普通数组、对象数组、对象、迭代数字、key属性的使用,这些用法的详解,希望对大家有所帮助。

2.vue过滤器的基本使用局部过滤器优先于全局过滤器被调用,一个表达式可以使用多个过滤器,过滤器之间需要用管道符“|”隔开,其执行顺序从左往右。

3.这些代码比较简单,希望对你有帮助! 想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

点赞
收藏
评论区
推荐文章
Alex799 Alex799
2年前
5款vue前端UI框架
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。实用的Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue前端ui框架。TOP5——VueBluVueBlu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵
Alex799 Alex799
2年前
Vue.js——60分钟快速入门
是当下很火的一个JavaScriptMVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
Easter79 Easter79
2年前
Vue 全家桶
vue全家桶。使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js是一个JavaScriptMVVM(ModelViewViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计思想。相比Angular.js,Vue.jsAPI更加简洁;
Alex799 Alex799
2年前
Angular和Vue.js 深度对比
Vue.js是开源的JavaScript框架,能够帮助开发者构建出美观的Web界面。当和其它网络工具配合使用时,Vue.js的优秀功能会得到大大加强。如今,已有许多开发人员开始使用Vue.js来取代 Angular和React.j
她左右 她左右
2年前
介绍 | Vue3中文文档
已经了解Vue2,只想了解Vue3的新功能可以参阅Vue.js是什么Vue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种结合使用时
Easter79 Easter79
2年前
Vue Hello World
1Vue介绍伟大的项目是从HelloWorld而来的,HelloWorld尽管没有什么实际性的作用,但是在于意义重大。(哈哈哈哈)好了不废话了入正题。Vue是一套用于构建用户界面的渐进式JS框架,与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
Python进阶者 Python进阶者
2年前
Vue的学习笔记(上篇)
一、什么是Vue.js?Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。二、什么是vmodel指令?vmode
Python进阶者 Python进阶者
2年前
Vue的学习笔记(中篇)
一、什么是Vue.js?Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:。这篇文章我
Easter79 Easter79
2年前
Vue 全家桶、原理及优化简议
不少互联网公司都在使用vue技术栈,或称为vue全家桶。使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js是一个JavaScriptMVVM(ModelViewViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计
helloworld_40038029 helloworld_40038029
5个月前
黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023
Vue3和ElementPlus是一对强大的前端技术组合,帮助开发者构建现代化的用户界面。Vue3作为一种流行的JavaScript框架,提供了响应式数据绑定、组件化开发和虚拟DOM等特性。而ElementPlus是基于Vue3的UI库,提供了丰富的组件和样式,使得开发人员可以轻松地构建漂亮且高效的Web应用。本文将介绍Vue3和ElementPlus的特点、使用方法和核心功能。