Vue的学习笔记（下篇）

冷不防 2023-01-14 01:57 111阅读 0赞

## 一、什么是Vue.js? ##

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前面几天我们已经分享了[Vue的学习笔记（中篇）][Vue]和[Vue的学习笔记（上篇）][Vue 1]，今天我们一起来看看下篇。

## 二、Vue的v-for循环 ##

**（一）v-for循环普通数组**

**1.在data中定义普通数组；**

data(){
    return{
    list: [1, 2, 3, 4, 5]
    }
    }

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

索引值是：{
 {i}} --- 每一项的值是：{
 {item}}

**3.效果图如下图：**

![20210419224629653.png][]

**（二）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指令渲染：**

Id：{
 { user.id }} --- 名字：{
 { user.name }} --- 索引值是：{
 {i}}

**3.效果图如下图：**

![20210419224629755.png][]

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

**1.在data定义一个对象；**

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

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

值是：{
 { val }} --- 键是：{
 {key}} -- 索引值是：{
 {i}}

**3.效果图如下图：**

![20210419224629931.png][]

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

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

这是第 {
 { count }} 次循环

**2.效果图如下图：**

![2021041922463028.png][]

**（五）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指令渲染代码如下图：**

![20210419224630238.png][]

**3.效果图如下图：**

![20210419224630365.png][]

## 三、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代码中，如以下代码：**

{
 { msg | msgFormat('我', '123') | test }}

**4.在data中，定义一个msg:**

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

**5.效果图如下图：**

![20210419224630468.png][]

## 四、总结 ##

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

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

3.这些代码比较简单，希望对你有帮助

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：[http://pdcfighting.com/][http_pdcfighting.com] 想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：[http://pdcfighting.com/][http_pdcfighting.com]

[Vue]: http://mp.weixin.qq.com/s?__biz=MzU5MjY2ODEwMQ==&mid=2247487156&idx=1&sn=a18ea1aff7c446e5bcf103a18f38c0aa&chksm=fe1d7a1ec96af3086243f0ca1bc492985929d12fdbe741d33873d8441ea6522048b2b69a2dce&scene=21#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU5MjY2ODEwMQ==&mid=2247487125&idx=1&sn=97347efed43e4bd3ddb4d80b3ec8786e&chksm=fe1d7a3fc96af329219408bdb8c6b9402a996bb24acbe18313c454212f11e5b634f342bb4fc4&scene=21#wechat_redirect
[20210419224629653.png]: /images/20221022/b11685d064644a579938ee554bb21ea2.png
[20210419224629755.png]: /images/20221022/3374572eff49425ca4cb1e5edbb00d78.png
[20210419224629931.png]: /images/20221022/7de4d13a36b84054843e5b5c714e6dc1.png
[2021041922463028.png]: /images/20221022/d025c5371a244a7393bd23dd87bbbfc1.png
[20210419224630238.png]: /images/20221022/9e023811369d477b99c2d76e1a7a1f14.png
[20210419224630365.png]: /images/20221022/b7a2e220df674bcd8bfa70ac2df1a04d.png
[20210419224630468.png]: /images/20221022/4637c3c9401e47269b2371ff83a019a9.png
[http_pdcfighting.com]: http://pdcfighting.com/