【vue】VUE基础语法(二)

已于 2022-11-14 14:04:54 修改
阅读量675 收藏
点赞数
分类专栏： vue学习笔记 笔记 前端 文章标签： vue.js
于 2021-11-30 01:13:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42425551/article/details/121623328
版权
笔记 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
前端
18 篇文章 3 订阅
订阅专栏
vue学习笔记
14 篇文章 1 订阅
订阅专栏
本文详细介绍了Vue中条件渲染的v-if, v-show, template以及v-for指令的用法，包括多条件渲染、数组操作和VNode理解，还涵盖了列表渲染的v-for配合template实例，以及关键概念如v-for中key的作用。
摘要由CSDN通过智能技术生成

目录

一、条件渲染

某些情况下，我们需要根据当前的条件决定某些元素或者组件是否渲染，这个时候我们就需要进行条件判断了
vue提供了下面的指令来进行条件判断：

1.1 条件渲染的基本使用：

<body>
    <div id = "app"></div>
    
    <template id="lyjtemplate">
        <h2 v-if="isShow">哈哈哈</h2>
        <button @click="toggle">切换</button>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    message:"hello world!",
                    isShow:true
                }
            },
            methods: {
                toggle(){
                    this.isShow=!this.isShow;
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

1.2 多个条件的渲染：

<body>
    <div id = "app"></div>
    
    <template id="lyjtemplate">
        <input type="text" v-model="score">
        <!-- v-if是惰性的，如果是false，那么这个标签不会被渲染或者被销毁 -->
        <h2 v-if="score > 90">优秀</h2>
        <h2 v-else-if="score > 60">良好</h2>
        <h2 v-else>不及格</h2>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    score:90
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

1.3 template和v-if的结合使用：

<body>
    <div id = "app"></div>
    
    <template id="lyjtemplate">
        <!-- 注意此时用的是template，而不是div，在种种渲染到浏览器上时，不会新增这个标签 -->
        <template v-if="isShowHa">
            <h2>哈哈哈</h2>
            <h2>哈哈哈</h2>
            <h2>哈哈哈</h2>
            <h2>哈哈哈</h2>
        </template>
        

        <template v-else>
            <h2>呵呵呵</h2>
            <h2>呵呵呵</h2>
            <h2>呵呵呵</h2>
            <h2>呵呵呵</h2>
        </template>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    isShowHa:true,
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

1.4 v-show的条件渲染以及和v-if的区别：

<body>
    <div id = "app"></div>
    
    <!-- v-if和v-show的区别：
        1、当v-show是false时，那么渲染时只是hidden起来了
           当v-if是false时，那么直接不渲染了 
        2、v-show是不支持template，且不能和v-else一起使用
        使用时如何选择呢？
        如果是显示的元素需要在显示和隐藏频繁切换的话，那么选择v-show，否则选择v-if-->
    <template id="lyjtemplate">
        <h2 v-if="isShow">哈哈哈</h2>
        <h2 v-show="isShow">呵呵呵</h2>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    isShow:false,
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

二、列表渲染

2.1 v-for的基本使用

<body>
    <div id = "app"></div>
    
    <template id="lyjtemplate">
        <div>遍历音乐列表：</div>
        <ul>
            <!-- 基本使用： -->
            <li v-for="music in musics">{{music}}</li>
        </ul>

        <div>遍历电影列表：</div>
        <ul>
            <!-- 加上索引index：movie是自己起的名字，对应movies里的一项,括号可以删除(不推荐)，in可以改成of(不推荐) -->
            <li v-for="(movie,index) in movies">{{index+1}}.{{movie.name}}</li>
        </ul>

        <div>遍历个人基本信息：</div>
        <ul>
            <!-- v-for遍历对象信息，如果在in之前只定义一个变量，那么拿到的是值 -->
            <li v-for="value in info">{{value}}</li>
        </ul>

        <div>遍历个人全部信息：</div>
        <ul>
            <!-- 如果在in之前定义两个变量，那么第一个是值，第二个是value -->
            <!-- 如果在in之前定义三个变量，那么第一个是值，第二个是value，第三个是index -->
            <li v-for="(value,key,index) in info">{{index+1}}.{{value}}-{{key}}</li>
        </ul>

        <div>遍历数字：</div>
        <ul>
            <!-- num从1开始 -->
            <li v-for="num in 10">{{num}}</li>
        </ul>

        <div>遍历带索引的数字：</div>
        <ul>
            <li v-for="(num,index) in 10">{{index}}-{{num}}</li>
        </ul>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    musics:[
                        "晴天",
                        "七里香",
                        "印第安老斑鸠"
                    ],
                    movies:[
                        {name:"星际穿越",date:"1997-01-09"},
                        {name:"盗梦空间",date:"1997-01-08"},
                        {name:"大话西游",date:"1997-01-04"},
                        {name:"教父",date:"1997-01-05"},
                    ],
                    info:{
                        name:"lyj",
                        age:18,
                        height:1.88
                    }
                    
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

2.2 v-for和template的结合使用

<body>
    <div id = "app"></div>
    
    <template id="lyjtemplate">
        <!-- 如果想要实现name和lyj分别处于两个li上 -->
        <!-- 原始做法：此方法不推荐，1、ul中不推荐使用div，hr 2、新加了一个div占用内存 -->
        <ul>
            <div v-for="(value,key) in info">
                <li>{{key}}</li>
                <li>{{value}}</li>
                <hr>
            </div>
        </ul>
        <div>-----------华丽分割线-----------------------------</div>
        <ul>
            <template v-for="(value,key) in info">
                <li>{{key}}</li>
                <li>{{value}}</li>
                <li class="divider">这里改改样式，改成一条线</li>
            </template>
        </ul>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    info:{
                        name:"lyj",
                        age:18,
                        height:1.88
                    }
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

2.3 数组的修改方法

<body>
    <div id = "app"></div>
    
    <template id="lyjtemplate">
        <!-- 遍历的数组发生改变时，界面会刷新的
            数组发生改变的方法有：
            push()
            pop()
            shift()
            unshift()
            splice()
            sort()
            reverse()
            上面的方法会直接修改原来的数组，但是某些方法不会修改原来数组，而是生成新的数组，也是可以的
            filter()
            concat()
            slice()
        -->
        <div>遍历音乐列表：</div>
        <ul>
            <!-- 基本使用： -->
            <li v-for="(music,index) in musics">{{index+1}}.{{music}}</li>
        </ul>
        <input type="text" v-model="newMusic" @keyup.enter="addnewMusic">
        <button @click="addnewMusic">添加音乐</button>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    musics:[
                        "晴天",
                        "七里香",
                        "印第安老斑鸠"
                    ],
                    newMusic:""
                }
            },
            methods: {
                addnewMusic(){
                    this.musics.push(this.newMusic);
                    this.newMusic="";

                    //this.movies = this.movies.filter(item=>item.length>2)
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

2.4 认识VNode

<body>
    <div id = "app"></div>
    
    <!-- vnode就是虚拟节点，无论是组件还是元素，在vue中表示出来的都是一个个VNode
        VNode是基于编写vue代码，和渲染后的代码之间的一个javascript对象 -->
    <template id="lyjtemplate">
        <div class="title" style="font-size:30px;color:red;">哈哈哈</div> 
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    message:"hello world!",
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

2.5 key案例-插入f元素

<body>
    <div id = "app"></div>
    
    <template id="lyjtemplate">
        <ul>
            <li v-for="item in letters">{{item}}</li>
        </ul>
        <button @click="insertF">插入F元素</button>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:"#lyjtemplate",
            data:function(){
                return {
                    letters:['a','b','c','d','e'],
                }
            },
            methods: {
                insertF(){
                    this.letters.splice(2,0,'f')
                }
            },
        }
        Vue.createApp(App).mount("#app");
    </script>
</body>

三、Vnode以及相关概念的理解

在这里插入图片描述

四、v-for中key的作用介绍

在这里插入图片描述

刘乙江
关注
专栏目录
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue 基于vite构建vue3项目 以及基础语法演示
07-17
Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础...
Vue基础语法.zip
09-03
以下是关于Vue语言的详细介绍及常用语法 Vue.js是一种流行的前端JavaScript框架，由尤雨溪于2014年发布。它被广泛应用于构建交互式的Web界面。Vue.js的核心库只关注视图层，易于上手，同时与其他库或现有项目整合也...
深入解析Javascript中的this指向
m0_62652709的博客
11-13 815
this是什么？它的值是如何决定的？为什么在 Vue2 开发中会给this单独定义一个变量？this是动态绑定的，指向取决于调用的上下文。在 Vue2 中，常见的this丢失场景包括回调函数和普通函数。解决方案：使用保存引用。使用箭头函数（推荐）。
Vue中的常用指令
m0_62388400的博客
11-12 1184
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 1085
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
使用 Vue 和 ECharts 创建交互式图表
最新发布
qq_45831414的博客
11-15 322
在现代 Web 应用中，数据可视化是一个重要的组成部分。它不仅能够帮助用户更好地理解复杂的数据，还能提升用户体验。
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
MZH
11-12 720
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
新手 Vue 项目运行
有你真好的博客
11-11 586
2.1 回到Idea后端的springboot项目，找到src--> rescources --> front.front --> index.html文件，打开之后找到 adminurl : 'adminurl'2.6 至此，前端Vue程序已经运行起来，结合前面的spingboot项目，我们已经将整个springboot + Vue项目运行起来。打开cmd命令行，按住win+R，出来命令行窗口，输入cmd，出来终端窗口。在运行项目之前，确保运行vue项目的环境已经安装成功，并可以找到；
Vue实际应用之无限滚动、css之&、混合宏和~
swj的博客
11-12 786
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
Vue常用加密方式
m0_51431448的博客
11-13 144
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
在vue3中生命周期有哪些，与在vue2中有什么区别，如何使用才合理高效
Sherry Tian的博客
11-15 1299
在vue3中生命周期有哪些，与在vue2中有什么区别，如何使用才合理高效
vue+svg圆形进度条组件
MoYu的博客
11-15 197
vue+svg圆形进度条组件
20241111继续学习vue
xiezhuangshunv的博客
11-11 291
在 Vue 中，默认情况下，状态是深度响应的。和组件实例上的其他属性一样，方法也可以在模板上被访问。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的。上定义，直接向组件实例添加新属性，但这个属性将无法触发响应式更新。Vue 在组件实例上暴露的内置 API 使用。有状态方法, 这个公司项目好像没用到.它同时也为内部属性保留。上使用任何以这些字符作前缀的属性。此选项的值应为返回一个对象的函数.选项来声明组件的响应式状态.因此，你应该避免在顶层。要为组件添加方法，我们需要用到。
【Java开发】Vue的那些小事(一)
m0_64280569的博客
11-11 352
它将一个元素的属性与Vue实例中的数据属性绑定起来。的属性时，你是在创建一个属性绑定，这意味着你传递的是一个JavaScript表达式，它会在Vue实例的数据上下文中被解析。这意味着它会根据输入元素的类型自动选取正确的方法来更新元素。的属性时，你实际上是在传递一个字符串字面量。属性需要绑定到Vue实例的数据属性，那么你需要使用。在Vue.js中，当你在组件的属性上使用不带。属性是一个字符串，并且你直接传递了字符串值。数据属性，并且每当输入框的值发生变化时，在这种情况下，这是有效的，因为。
渐进式JavaScript框架Vue 3 入门
cooldream2009的博客
11-13 732
随着前端开发技术的不断发展，JavaScript 框架成为构建动态和交互性强的用户界面不可或缺的工具。Vue.js 作为一个渐进式框架，以其灵活性、易用性和强大的数据绑定功能，广泛应用于前端开发中。Vue.js 3 引入了更加现代化的特性，性能提升显著，同时仍然保持了简单易学的特质。本文将从 Vue 3 的基础使用入手，详细讲解如何创建 Vue 应用、实现数据绑定、使用常用指令，帮助读者快速上手 Vue 3 并高效构建用户界面。
Vue slot 插槽 v-slot属性具名插槽
racerun的专栏
11-13 253
1.slot 插槽ComponentB slot 2.v-slot属性具名插槽 简写 v-slot # 2.1具名插槽 2.2 v-slot 简写 插槽数据 ​
Vue.js基础语法与组件实例详解及示例代码
资源摘要信息:"Vue.js 基础语法与实例演示" 在现代前端开发中，Vue.js已经成为了一个非常流行的JavaScript框架，它以轻量级、响应式和组件化的特点受到开发者的广泛青睐。本资源旨在通过实例演示的形式，深入浅出地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

刘乙江

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

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

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

打赏作者

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

抵扣说明：

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

余额充值