[Vue3]Vue3从CDN编程模式-进阶指令->条件渲染,列表渲染,计算属性,监听器

今天,我们来带大家学习一些Vue3的进阶指令,我们仍然是从CDN导入Vue3编程模式! 如果感兴趣的并且前两章没有学习的掘友,也可以学习一下:

[小白学Vue3]vue3初体验--vue基本结构CDN导入Vue3编程模式 - 掘金 (juejin.cn)

[Vue3]vue3从CDN导入编程模式--基础指令 - 掘金 (juejin.cn)

目录

  1. 条件渲染
  2. 列表渲染
  3. 计算属性
  4. 监听器

一、Vue3条件渲染

1、v-if

条件判断使用 v-if 指令,指令的表达式返回 true 时才会显示内容。

我们来看看一个案例:

html 复制代码
<template id="my-app">
    <!-- v-if直接让它消失,或者出现,标签都消失 直接把它的Dom结构剔除掉了-->
    <!-- v-if成立了 ,v-else一定不成立,反之 -->
    <!-- v-if和v-else一定要放在兄弟标签上,同级标签 -->
    <h2 v-if="count == 0">hello,world</h2>
    <h2 v-else-if="count == 2">これは自由ですね</h2>
    <h2 v-else>你好,世界</h2>
    <button @click="change">切换</button>
</template>

v-if和我们熟知的if判断很类似,可以有v-if,v-else-if,v-else这种多重判断的形式,而在后面只需要接一个"判断的条件"即可。

在这一段代码当中,我们通过点击这个切换按钮,控制count在0,1,2 这三个数中切换,我们来看看实际的效果:

在案例当中,我们有介绍到:v-if直接让Dom结构消失,或者出现,标签都消失 直接把它的Dom结构剔除掉了。

我们看看我们的效果图中的Dom结构:

切换为hello,world

切换为你好,世界

切换为これは自由ですね

我们可以看到,v-if直接让不满足条件的Dom结构给剔除掉了,只显示满足条件的Dom结构。

注意!:v-if和v-else一定要放在同级标签之上。(也可以称为兄弟标签)否则,整个逻辑是不连贯的。

在同级的v-if当中,v-if成立,则v-else不成立,反之亦然。

2、v-show

除了v-if我们还有一个v-show也可以用于条件渲染,v-show同样可以操作Dom结构的展示与消失。

同样是条件渲染,v-showv-if到底有什么区别呢?

  • v-show是通过判断,看是否在样式层面添加display:none
  • v-if是通过判断,直接不加载Dom结构,将这个样式剔除掉!

如果,我们在生活工作当中,需要频繁加载页面的话,**推荐使用v-show,**用v-if如果频繁加载的话,要重复加载,性能开销更大!

同时,无关重要的样式可以用v-show,通过权限来控制的内容,不能用v-show,因为这样我们网页容易被爬取 ,所以比较重要的内容,需要权限才能开启的内容,还是使用v-if

说了这么多了,我们具体来看看v-show的具体效果吧!

html 复制代码
<template id="tel">
    <div v-show="true">我出来了!</div>
    <div v-show="false">我消失了!</div>
</template>

我们可以看到,当v-show的条件为真时,Dom结构正常显示,而当v-show的条件为假时,页面上没有显示,但是DOM结构仍然存在,而是在行内样式中加入了displaynone这样一条样式,让其不显示在页面上!

所以对于v-showv-if的使用,我们在使用的时候要小心斟酌,权限较重的使用v-if,而不那么重要的内容可以使用v-show

二、Vue3列表渲染

在这一个点中,我们要讲的就是v-for这一条指令了,也就是我们大家熟知的for循环。

通常v-for会出现在li标签当中,基本用法:

html 复制代码
<li v-for:"(item,index) in 数组":key="index">
	{{item}}
</li>

其中,item为数组中的每一项,而index是下标,数组通常是数据源中返回对象中的一个数组。

每次都加上:key="唯一值" 这是打上一个唯一标识,能够大大增加性能。

我们来看一个案例:

html 复制代码
<template id="my-app">
    <h2>歌曲列表</h2>
    <ul>
        <li v-for="(item, index) in songs":key="index" > {{index+1}} -- {{item}}--
            <a href="#" @click="del(index)">x</a>
        </li>
    </ul>
</template>
songs:[
	'只因你太美',
	'等你下课',
	'说话不哭',
	'晴天',
	'告白气球'
]
del(index){
	删除数组中的数据
	this.songs.splice(index,1)
},

在这个案例当中,我们在数据源中声明了一个数组songs,里面声明了一些歌曲名。

然后,我们在template中通过v-for获取了这个数组中的数据,用item存储数组中的每一项,用index存储下标。

在我们的methods中,通过将index传入方法del当中,在del方法中,通过this.songs.splice(index,1)调用数据源中songs数组调用splice方法删除对应下标的数据。我们来看看效果图:

三、Vue3计算属性

1、computed

computed也是和methods一样,用于存储方法,不过在computed中的方法,存在一个依赖缓存,一旦方法依赖的数据源发送改变,里面这个方法就会自动执行一遍,这个方法比我们的methods在某种场景下要方便的多!

也就是说,假如:我们页面上的内容要根据一个变量的值改变而改变,假如我们要用methods,则每次修改值都要运行一个方法判断一下,这种情况下,我们不如使用computed,利用依赖关系,就方便很多。

现在天气确实很冷(不知道大家有没有穿上属于自己军大衣),那我们来想象这样一个场景,我们需要一个温度参数,页面上根据我们的温度的大小,来给出穿衣建议,假如给你你会怎么做?让我们用computed来实现这样一个效果!

html 复制代码
<div id="app"></div>
<template id="my-app">
    <h2>
        今天温度:{{temp}}℃
    </h2>
    <h3>建议穿:{{suggestion}}</h3>
    <button @click="add">+</button>
    <button @click="lower">-</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = {  
        template:'#my-app',
        data(){
            return{
                temp:10,
            }
        },
        computed:{
            // 这个叫计算属性,计算属性里面的函数,和数据源一样,函数名直接充当了数据源的使用,
            // 挡temp发生变化时,这个suggestion会自动调用一遍
            suggestion(){
                //  响应式执行,当它依赖的数据源发生变更时,它就会执行
                let res = '夹克'
                if(this.temp>50)
                {res = '裤衩'
                }else if(this.temp>=20&&this.temp<=50)
                {
                    res = '短袖'
                }else if(this.temp<=0)
                {
                    res = '军大衣'
                }else{
                    res='夹克'
                }
                return res
            }
        },
        methods:{
            add(){
                this.temp+=5
            },
            lower(){
                this.temp-=5
            },
        }
    }
    Vue.createApp(App).mount('#app')
</script>
  1. 在我们这个代码当中,我们在数据源中定义了一个温度temp,在methods定义了两个方法add控制温度增加,lower控制温度降低。
  2. 然后,我们定义一个计算属性computed,在计算数学我们定义了一个函数suggestion,在这个函数当中,我们定了一个res为穿衣建议,res会根据数据源中的this.temp的值变化而变化,最后返回了res
  3. 在页面上,我们首先,显示了当前温度{{temp}},然后给出了建议穿衣{{suggestion}}这里的建议是调用计算属性中的函数suggestion,根据它的返回值来显示。
  4. 最后,我们定义两个按钮,+负责调用add方法使温度上升,-负责调用lower使温度降低。(这里我们通过@也就是v-on绑定了点击事件,这个指令我们在前文中有学习到:[Vue3]vue3从CDN导入编程模式--基础指令 - 掘金 (juejin.cn))

我们来看看实际效果:

非常好用!!!

接下来,我们就介绍一下computed vs methods

我们来看看它们之间的方法调用,来看看computed的缓存和普通的methods有什么区别。

html 复制代码
<template id="my-app">
    <button @click="change">修改firstname</button>

    <h2>computed:{{fullName}}</h2>
    <h2>computed:{{fullName}}</h2>
    <h2>computed:{{fullName}}</h2>
    <h2>computed:{{fullName}}</h2>

    <hr>

    <h2>methods:{{getFullName()}}</h2>
    <h2>methods:{{getFullName()}}</h2>
    <h2>methods:{{getFullName()}}</h2>
    <h2>methods:{{getFullName()}}</h2>


</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = {  

        template:'#my-app',
        data(){
            return{
                firstName:'三',
                lastName:'张'
            }
        },
        computed:{
            fullName(){
                // 计算属性是有缓存的,当我们多次使用计算属性时,计算属性中的逻辑只会执行一次!
                console.log('computed.getFullName执行了');
                return this.lastName+this.firstName
            }

        },
        methods:{
            getFullName(){
                console.log('methods.getFullName执行了');
                return this.lastName+this.firstName
            },
            change(){
                this.firstName = '三三'
            }
        }

    }
    Vue.createApp(App).mount('#app')
</script>

在这个案例当中,我定义了methodscomputed,其中分别是两个函数fullNamegetFullName都是用于将数据源中的firstNamelastName进行拼接,这里我们主要看console.log打印的内容来判断区别!

可以看到computed的缓存嫩南瓜只需要执行一遍函数就能同步所有相关内容,而methods就需要调用四遍。

所以当我们的代码量大起来的时候,computed可以提高很大的效率!

四、Vue3监听器

watch

我们可以通过watch来监听响应数据的改变

使用watch选项,可以观察一个响应式数据属性的变化,并在其值改变时执行一些操作,它是 Vue 中的一种响应式机制,允许你在数据发生变化时做出相应的响应,执行自定义的逻辑。

watch 使得在响应式属性变化时能够有更多的控制权和灵活性,让你的组件能够更好地响应数据的变化并执行相应的逻辑。

我再拿到之前建议穿衣的案例,不过我这次使用watch

html 复制代码
<div id="app">

</div>

<template id="my-app">
    <h2>
        今天温度:{{temp}}℃
    </h2>
    <h3>建议穿:{{suggestion}}</h3>
    <button @click="add">+</button>
    <button @click="lower">-</button>

</template>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = {  

        template:'#my-app',
        data(){
            return{
                temp:50,
                suggestion:'夹克'
            }
        },
        // 区别就一点,computed计算属性有缓存,优化更好
        watch:{
            temp:{
                // 让temp立即执行
                // handler不能乱写,处理函数
                handler:function(newVal,oldVal){
                    if(newVal>=30)
                    {
                        this.suggestion='短袖'
                    }else if(newVal<=0)
                    {
                        this.suggestion='羽绒服'
                    }else
                    {
                        this.suggestion='夹克'
                    }
                }
                // immediate为true就是让它temp立即执行
                ,immediate:true
            }
        },
        methods:{
            add(){
                this.temp+=5
            },
            lower(){
                this.temp-=5
            },
        }

    }
    Vue.createApp(App).mount('#app')
</script>

同样的add方法控制温度增加,lower控制温度降低,不过这次我们用的不是computed,但是其实原理是大差不差,不过computed有缓存,性能更加优秀!

在Vue里面能用computed实现的都能用watch实现,反之也一样。

  1. 我们在对象中定义了watch
  2. 然后我们在对象体内又定义了一个temp注意 !要侦听谁,就把谁拿下来当key值,例如我们这里监听的是数据源中的temp,所以我们把这个变量名拿下来当key值!
  3. 最后,我们又定义了一个handler存储一个函数!(注意 !!handler是官方写死的方法,不能随意更改),这个函数会给我们拿到两个参数!function(newVal,oldVal)newVal代表新的值,而oldVal代表过去值!
  4. temp这个对象后面加了一个,immediate:true为true时是为了让temp立即执行!
  5. 这里操作,是通过修改数据源中的suggestion的值,所以在页面上我们使用的是{{suggestion}}

最后结束啦!

今天,条件渲染,列表渲染,计算属性,监听器,我们就先学到这里啦!

后续,有关vue3的路由,脚手架安装,以及如何开启一个vue3项目,我都会在后续的文章中的持续输出!

大家感兴趣的可以关注我!我还会为大家输出更多有意思的内容!

点个小小的赞鼓励支持一下吧!🌹🌹🌹

个人github:一个修远君的库 (github.com)

相关推荐
前端拾光者20 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_1817901448038 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome