Vue3学习笔记（5.0）

最新推荐文章于 2025-03-26 10:50:47 发布
最新推荐文章于 2025-03-26 10:50:47 发布
阅读量597 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 HTML5 Vue3 文章标签： 学习 开发语言 vue.js html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mez_Blog/article/details/129795700

Vue.js循环语句

v-for指令需要以site in sites形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名。

v-for可以绑定数据到数组来渲染一个列表：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-26 16:32:27
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="test in sites">
                {{test.city}}
            </li>

        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    sites:[
                    {city:'sanghai'},
                    {city:"beijing"},
                    {city:"henan"}
                    ]
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for还支持一个可选的第二个参数，参数值为当前项的索引：
 

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:33:47
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="(test,index) in sites">
                {{index}}-{{test.city}}
            </li>

        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    sites:[
                    {city:'sanghai'},
                    {city:"beijing"},
                    {city:"henan"}
                    ]
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 模板<template>中使用v-for：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:40:01
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,index) in sites">
                <li >
                    {{index}}-{{test.city}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    sites:[
                    {city:'sanghai'},
                    {city:"beijing"},
                    {city:"henan"}
                    ]
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for迭代对象

v-for可以通过一个对象的属性来迭代数据：
 

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:49:21
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="test in objects">
                <li >
                    {{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

当然了，也可以以键值对的形式进行展示

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:54:04
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,key) in objects">
                <li >
                    {{key}}:{{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 这里的命名并不是固定的，但是比较规范的写法是左边为键key,右边为值value。

我们再混合运用以下，再加上索引

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:57:37
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,key,index) in objects">
                <li >
                    {{index}}-{{key}}:{{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for也可以迭代整数

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 09:59:41
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <template v-for="(test,index) in 10">
                <li >
                    {{index}}-{{test}}
                </li>
                <li>+++++++++++++++</li>
            </template>
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    objects:{
                    city1:'sanghai',
                    city2:"beijing",
                    city3:"henan"
                    }
                }
            }
        }
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

下面的script里面的内容相当于声明，在上面的HTML中可以不用，并不影响代码执行。

 显示过滤/排序后的结果

我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。

下面将筛选出一堆数字中的偶数

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 10:13:06
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <!-- <template v-for="(test,index) in 10"> -->
                <li v-for="a in oushu">
                    {{a}}
                </li>
                <!-- <li>+++++++++++++++</li> -->
            <!-- </template> -->
        </ol>
    </div>

    <script>
        const name={
            data(){
                return {
                    // objects:{
                    // city1:'sanghai',
                    // city2:"beijing",
                    // city3:"henan"
                    numbers:[1,2,3,4,5,6,7,8,9,10]
                    }
                },
                computed:{
                    oushu(){
                        return this.numbers.filter(num=>num%2===0)
                    }
                }
            }
        
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 v-for/v-if联合使用

以上实例联合使用v-for/v-if给select设置默认值：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-26 16:26:51
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 10:38:24
 * @FilePath: \vscode\v-for.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="app">
        <!-- <ol>
             <template v-for="(test,index) in 10"> 
                <li v-for="a in oushu">
                    {{a}}
                </li>
                 <li>+++++++++++++++</li> 
            </template> 
        </ol> -->
        <select  @change="changeopt($event)" v-model="opt">
            <template v-for="(item,index) in city" :city="item" :index="index" :key="item.id">
                <option v-if="index==1" :value="item.name"  selected>{{item.name}}</option>
                <option v-else :value="item.name">{{item.name}}</option>

            </template>
        </select>
        <div>您选中了:{{opt}}</div>
    </div>

    <script>
        const name={
            data(){
                return {
                    // objects:{
                    // city1:'sanghai',
                    // city2:"beijing",
                    // city3:"henan"
                    // numbers:[1,2,3,4,5,6,7,8,9,10]
                    opt:"Mez",
                    city:[
                        {id:1,name:"shanghai"},
                        {id:2,name:"Mez"},
                        {id:3,name:"beijing"}
                    ]
                    }
                },
                methods:{
                    changeopt:function(event){
                        // return this.numbers.filter(num=>num%2===0)
                        this.opt=event.target.value;
                        alert("这个值被选中："+this.opt);
                    }
                }
            }
        
        Vue.createApp(name).mount('#app')
    </script>
</body>
</html>

 在组件上使用v-for

在自定义组件上，我们可以像在任何普通元素上使用v-for：

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传到组件里，我们要使用props:

<my-component
 v-for="(item,index) in items"
 :item="item"
 :index="index"
 :key="item.id"
></my-component>

不自动将item注入到组件里的原因是，这会使得组件与v-for的运作紧密结合。明确组件数据的来源能够使组件在其他场合重复使用。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-29 10:49:17
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-29 14:27:35
 * @FilePath: \vscode\todo.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="todo-list">
        <form action="" v-on:submit.prevent="addlist">
            <label for="new-todo">添加列表项</label>
            <input  v-model="newtext" id="new-todo" placeholder="填写示例：唱跳rap篮球" />
            <button>添加</button>
        </form>
        <ul>
            <todo-item v-for="(todo,index) in lists" :key="todo.id" :title="todo.title" @remove="lists.splice(index,1)"></todo-item>
        </ul>
    </div>

    <script>
        const mez=Vue.createApp({
            data(){
                return{
                    newtext:'',
                    lists:[
                        {id:1,title:'唱'
                    },
                    {id:2,title:'跳'
                    },
                    {id:3,title:'rap'
                    },
                    ],
                    nextTodoId:4
                }
            },
            methods:{
                addlist(){
                    this.lists.push({
                        id:this.nextTodoId++,
                        title:this.newtext
                    })
                    this.newtext=''
                }
            }
        })
        mez.component('todo-item',{
            template:`
            <li>
                {{title}}
                <button @click="$emit('remove')">删除</button>
            </li>`,
            props:['title'],
            emits:['remove']
            
        })
        mez.mount('#todo-list')
    </script>
</body>
</html>

 

Vue 学习笔记 5.0 --- json-server和axios
khalil
03-24 406
一 : json-server 提供假数据接口 json-server 作用 : 根据指定的 JSON 文件, 提供假数据接口 地址 : json-server 使用步骤 1. 全局安装 json-server : `npm i -g json-server` 2. 准备一个json数据 3. 执行 : `json-server 文件路径` > json数据参考 json数据...
vue3.0与echarts5.0
m0_73265535的博客
05-17 684
数据可视化这一概念自1987年正式提出，经过30余年的发展，逐渐形成3个分支：科学计算可视化(scientific visualization)、信息可视化(information visualization)和可视分析(visual analytics)。近些年来，这3个子领域出现了逐渐融合的趋势。我们统称为“数据可视化”。什么是数据可视化？顾名思义，数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。
Vue框架(五)
Li5306的博客
08-16 249
一、虚拟节点 <body> <!-- 真实的节点 --> <div id='app'> <h3>Vue你好</h3> </div> </body> 虚拟节点=>对于理解视图框架(Vue,React,小程序) 目前流行的视图框架都是基于虚拟节点技术开发的. 为什么jq落伍了=>jq的DOM操作性能不好. 视图框架=>更新视图的最后异步是D...
使用vue cli 5.0 在vscode中运行vue命令报错
最新发布
CloasGao的博客
03-26 415
8、然后设置 LocalMachine ，执行命令 Set-ExecutionPolicy -Scope LocalMachine。6、首先设置 CurrentUser ，执行命令 Set-ExecutionPolicy -Scope CurrentUser。5、使用管理员打开power shell 执行 Get-ExecutionPolicy -List。7、 接着 执行 Get-ExecutionPolicy -List 查看设置是否成功。输入进去，然后按照提示输入： y。
Vue学习基础版汇总V5.0.0
Douglas的博客
06-04 594
1.Vue之动态组件 2.keep-alive保持状态 3.keep-alive的生命周期 4.keep-alive的include属性 5.Vue之插槽 6.具名插槽 7.作用域插槽 8.Vue之自定义指令 9.Vue之eslintrc.js使用 10.Vue之axios的全局基本用法
vue-cli5.0脚手架的安装搭建和运行
qq_60334912的博客
08-19 2010
vue脚手架安装
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 1117
Vue3 +Ts + Pinia + uni-app 学习笔记
vue学习笔记 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
qq_46416934的博客
03-09 2028
版本：vue3 vue/cli 5.0.0 做写store时报错 import Vue from "vue"; import Vuex from "vuex"; import getters from "./getters"; import user from "./modules/user"; Vue.use(Vuex); const store = new Vuex.Store({ modules: { user, }, getters, }); export default
threeJs学习笔记01：基于Vue导入fbx兔子示例
weixin_44996006的博客
10-13 974
threeJs学习笔记：基于Vue导入fbx兔子示例
最新【vue】使用vue-cli5.0快速搭建一个项目
热门推荐
少年你真的要止步于此嘛。
02-24 1万+
快速搭建vue/cli脚手架教程
Vue-Cli 5.0.0搭建Cesium环境
地理信息的专栏
01-05 752
在vue-cli升级到5.0后，剔除了对应的node包，当使用cesium时会报错，所以编写了该文章
vue-cli@2.9.6 与@vue/cli@5.0.8的区别
m0_69573649的博客
06-02 3153
CLI 版本：vue-cli@2.9.6 是一个旧版本的 CLI 工具，而 @vue/cli@5.0.8 则是目前最新的 CLI 工具，它提供了更多功能和优化，并且可以更好地与其他 Vue 生态系统工具进行交互。构建工具：vue-cli@2.9.6 使用的是 Webpack 1.x 作为项目构建工具，而 @vue/cli@5.0.8 使用的是 Webpack 5.x。Vue 版本：vue-cli@2.9.6 默认集成的是 Vue 2.x 版本，而 @vue/cli@5.0.8 默认集成的是 Vue。
Vue3核心基础，使用方法，如何创建实例，常用命令，v-text、v-html、v-pre，v-bind,操作样式键值对，数组样式，事件绑定@，v-model，v-for,v-if等综合实例
qq_63322025的博客
10-10 968
Vue3核心基础，使用方法，如何创建实例，常用命令，v-text、v-html、v-pre，v-bind,操作样式键值对，数组样式，事件绑定@，v-model，v-for,v-if等综合实例
Vue搭建项目
weixin_47906106的博客
07-10 2174
一路下一步 安装NodeJS之后使用npm来安装包使用的是国外的地址，经常会出现超时错误，可以通过修改为国内的淘宝源来加速安装。 如果想取消这一配置可执行 安装vue-cli脚手架 创建项目 全局引入elementui 引入 Element 你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。¶完整引入 在 main.js 中写入以下内容： 安装vue-router 在当前文件夹下新建router文件夹，在该文件中新建index.js 设置管理路由 在s
【5.0】vue请求函数和路由
2401_83569627的博客
08-19 699
两者搭配，定义了一个携程函数，如果函数中有io操作，就写await，之前then中的值，可以直接复制给一个变量其实就是并发的操作，先去发送请求，这边也在等着接收数据，如果成功了就把数据拿过来，不成功就提示错误，而不是一步等一步执行# 前端中的异步编程技术，多线程+线程结果回调！# Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
vue-cli5.0 兼容低版本谷歌浏览器
Y丶小琪
04-21 1488
网上搜索了很多方法，下载了babel-polyfill，@babel下的polyfill，再main.js引入再配置等等都不生效，原来是webpack配置的browerslist的原因，>.<修改package.json文件的browserslist配置，修改为你想要兼容的浏览器列表。用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。直接使用默认配置打包部署出来的项目再60、70版本的谷歌浏览器跑不起来，蓝屏。修改红框的条件可以看到支持的浏览器版本。
vue.js v-model的运算
qq_37805832的博客
02-15 1487
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javasc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mez_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值