Vue3学习笔记（5.0）

Posted mez_Blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3学习笔记（5.0）相关的知识，希望对你有一定的参考价值。

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 开发实战学习笔记48篇（完结）

说明

【Vue 开发实战】学习笔记。

学习笔记代码仓库：https://github.com/kaimo313/vue-development-practice

目录

  1. 【Vue 开发实战】基础篇 # 1：第一个Vue程序
  2. 【Vue 开发实战】基础篇 # 2：组件基础及组件注册
  3. 【Vue 开发实战】基础篇 # 3：Vue组件的核心概念：事件
  4. 【Vue 开发实战】基础篇 # 4：Vue组件的核心概念：插槽
  5. 【Vue 开发实战】基础篇 # 5：理解单文件组件
  6. 【Vue 开发实战】基础篇 # 6：双向绑定和单向数据流不冲突
  7. 【Vue 开发实战】基础篇 # 7：理解虚拟DOM及key属性的作用
  8. 【Vue 开发实战】基础篇 # 8：如何触发组件的更新
  9. 【Vue 开发实战】基础篇 # 9：合理应用计算属性和侦听器
  10. 【Vue 开发实战】基础篇 # 10：生命周期的应用场景和函数式组件
  11. 【Vue 开发实战】基础篇 # 11：指令的本质是什么
  12. 【Vue 开发实战】基础篇 # 12：常用高级特性provide/inject
  13. 【Vue 开发实战】基础篇 # 13：如何优雅地获取跨层级组件实例（拒绝递归）
  14. 【Vue 开发实战】基础篇 # 14：template和JSX的对比以及它们的本质
  15. 【Vue 开发实战】生态篇 # 15：为什么需要Vuex
  16. 【Vue 开发实战】生态篇 # 16：如何在Vue中使用Vuex
  17. 【Vue 开发实战】生态篇 # 17：Vuex核心概念及底层原理
  18. 【Vue 开发实战】生态篇 # 18：Vuex最佳实践
  19. 【Vue 开发实战】生态篇 # 19：Vue Router的使用场景
  20. 【Vue 开发实战】生态篇 # 20：选择何种模式的路由及底层原理
  21. 【Vue 开发实战】生态篇 # 21：Nuxt解决了哪些问题？
  22. 【Vue 开发实战】生态篇 # 22：Nuxt核心原理是什么？
  23. 【Vue 开发实战】生态篇 # 23：组件库对比：Element UI、Ant Design Vue、iView
  24. 【Vue 开发实战】生态篇 # 24：提升开发效率和体验的常用工具：ESLint、Prettier、vue-devtools
  25. 【Vue 开发实战】生态篇 # 25：单元测试的重要性及其使用
  26. 【Vue 开发实战】实战篇 # 26：Ant Design Pro介绍
  27. 【Vue 开发实战】实战篇 # 27：使用Vue CLI 3快速创建项目
  28. 【Vue 开发实战】实战篇 # 28：如何自定义Webpack和Babel配置
  29. 【Vue 开发实战】实战篇 # 29：如何设计一个高扩展性的路由
  30. 【Vue 开发实战】实战篇 # 30：实现一个可动态改变的页面布局
  31. 【Vue 开发实战】实战篇 # 31：如何将菜单和路由结合
  32. 【Vue 开发实战】实战篇 # 32：如何使用路由管理用户权限
  33. 【Vue 开发实战】实战篇 # 33：更加精细化的权限设计（权限组件、权限指令）
  34. 【Vue 开发实战】实战篇 # 34：如何在组件中使用ECharts、Antv等其他第三方库
  35. 【Vue 开发实战】实战篇 # 35：如何高效地使用Mock数据进行开发
  36. 【Vue 开发实战】实战篇 # 36：如何与服务端进行交互（Axios）
  37. 【Vue 开发实战】实战篇 # 37：创建一个普通表单
  38. 【Vue 开发实战】实战篇 # 38：表单初始数据、自动校验、动态赋值
  39. 【Vue 开发实战】实战篇 # 39：创建一个分步表单
  40. 【Vue 开发实战】实战篇 # 40：自己封装一个支持自动校验的表单项
  41. 【Vue 开发实战】实战篇 # 41：如何管理系统中使用的图标
  42. 【Vue 开发实战】实战篇 # 42：如何定制主题及动态切换主题
  43. 【Vue 开发实战】实战篇 # 43：如何做好国际化
  44. 【Vue 开发实战】实战篇 # 44：如何高效地构建打包发布
  45. 【Vue 开发实战】实战篇 # 45：如何构建可交互的组件文档让代码高亮的显示在页面
  46. 【Vue 开发实战】实战篇 # 46：如何做好组件的单元测试
  47. 【Vue 开发实战】拓展篇 # 47：如何发布组件到npm以及nrm的介绍
  48. 【Vue 开发实战】拓展篇 # 48：结课测试和GitHub相关生态应用持续集成、单测覆盖率、文档发布、issue管理（完结）

以上是关于Vue3学习笔记（5.0）的主要内容，如果未能解决你的问题，请参考以下文章

Vue3 学习总结笔记 (十三)

Vue3 学习总结笔记 (十三)

Vue3学习笔记02：Vue3打包

Vue3 学习总结笔记 (十四)

Vue3 学习总结笔记 (十四)

Vue3 组件通信学习笔记