VUE基础知识四

最新推荐文章于 2024-05-15 00:18:17 发布
最新推荐文章于 2024-05-15 00:18:17 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongIT/article/details/123933508
版权

目录

​

1、绑定样式

2、条件渲染

3、 列表渲染

3、1 基本列表

 3.2 key的作用与原理

3、3列表过滤 

3、4列表排序 

3、5Vue数据监视 

1、绑定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <style type="text/css">
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            border: 4px solid red;;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }
        .normal{
            background-color: skyblue;
        }
    
        .atguigu1{
            background-color: yellowgreen;
        }
        .atguigu2{
            font-size: 30px;
            text-shadow:2px 2px 10px red;
        }
        .atguigu3{
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
    
        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div> <br/><br/>
    
        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div> <br/><br/>
    
        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
    
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
            
        const vm = new Vue({
            el:'#app',
            data:{
                name:'小花',
                mood:'normal',
                classArr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false,
                },
                styleObj:{
                    fontSize: '40px',
                    color:'red',
                },
                styleObj2:{
                    backgroundColor:'orange'
                },
                styleArr:[
                    {
                        fontSize: '40px',
                        color:'blue',
                    },
                    {
                        backgroundColor:'gray'
                    }
                ]
            },
            methods: {
                changeMood(){
                    const arr = ['happy','sad','normal']
                    const index = Math.floor(Math.random()*3)
                    this.mood = arr[index]
                }
            },
        })
    </script>
</body>
</html>

效果：

 

总结： 

1.class样式：

  • 写法：class="xxx"，xxx可以是字符串、对象、数组
  • 字符串写法适用于：类名不确定，要动态获取
  • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
  • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

2.style样式：

  • :style="{fontSize: xxx}"其中xxx是动态值
  • :style="[a,b]"其中a、b是样式对象

2、条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>

        <h2 v-show="true">Hello,{{name}}!</h2>

        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else>Vue</div>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#app',
        data:{
            name:'小花',
            n:0
        }
    })
</script>
</html>

效果图：

 

总结：

1.v-if：

1.1写法：

  • v-if="表达式"
  • v-else-if="表达式"
  • v-else

1.2适用于：切换频率较低的场景

1.3特点：不展示的DOM元素直接被移除

1.4注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

2.v-show：

  • 写法：v-show="表达式"
  • 适用于：切换频率较高的场景
  • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
  • 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

3、 列表渲染

3、1 基本列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>人员列表（遍历数组）</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <h2>汽车信息（遍历对象）</h2>
        <ul>
            <li v-for="(value,k) in car" :key="k">
                {{k}}-{{value}}
            </li>
        </ul>

        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
        
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) in 5" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
                ],
                car:{
                    name:'奥迪A8',
                    price:'70万',
                    color:'黑色'
                },
                str:'hello'
            }
        })
    </script>
</body>
</html>

效果图：

 

总结：

v-for指令：

  1. 用于展示列表数据
  2. 语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识
  3. 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

 3.2 key的作用与原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>人员列表</h2>
        <button @click.once="add">添加小花</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}} - {{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
                ]
            },
            methods: {
                add(){
                    const p = {id:'004',name:'小花',age:16}
                    this.persons.unshift(p)
                }
            },
        })
    </script>
</html

 效果图：

 

 

面试题： 

rvue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：

key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。

对比规则：

旧虚拟DOM中找到了与新虚拟DOM相同的key：

  • 若虚拟DOM中内容没变, 直接使用之前的真实DOM
  • 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
  • 旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面

用index作为key可能会引发的问题：

  • 若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
  • 若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题

开发中如何选择key?

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表，使用index作为key是没有问题的

3、3列表过滤 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'马冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:22,sex:'男'}
                ]
            },
            computed:{
                filPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })
    </script>
</body>
</html>

效果图： 

3、4列表排序 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
		<button @click="sortType = 1">年龄降序</button>
		<button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {id:'001',name:'马冬梅',age:30,sex:'女'},
				    {id:'002',name:'周冬雨',age:45,sex:'女'},
				    {id:'003',name:'周杰伦',age:21,sex:'男'},
				    {id:'004',name:'温兆伦',age:22,sex:'男'}
                ],
                keyWord:'',
                //0代表原顺序，1代表升序，3代表降序
                sortType:0,
            },
            computed:{
                filPersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                    if(this.sortType){
                        arr.sort((p1, p2)=>{
                            return this.sortType ===1 ? p2.age-p1.age : p1.age-p2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
</body>

效果图： 

3、5Vue数据监视 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button><br/>
        <button @click="addSex">添加性别属性，默认值：男</button> <br/>
        <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：小花</button><br/>
        <button @click="addHobby">添加一个爱好</button> <br/>
        <button @click="updateHobby">修改第一个爱好为：旅游</button><br/>
        <button @click="removeSmoke">过滤掉爱好中的跑步</button> <br/>
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#app',
        data:{
            student:{
                name:'小军',
                age:18,
                hobby:['跑步','唱歌','打球'],
                friends:[
                    {name:'小李',age:15},
                    {name:'小张',age:16}
                ]
            }
        },
        methods: {
            addSex(){
                //Vue.set(this.student,'sex','男')
                this.$set(this.student,'sex','男')
            },
            addFriend(){
                this.student.friends.unshift({name:'小明',age:18})
            },
            updateFirstFriendName(){
                this.student.friends[0].name = '小花'
            },
            addHobby(){
                this.student.hobby.push('学习')
            },
            updateHobby(){
                this.student.hobby.splice(0,1,'旅游')
            },
            removeSmoke(){
                this.student.hobby = this.student.hobby.filter((h)=>{
                    return h !== '跑步'
                })
            }
        }
    })
</script>
</html>

效果图： 

总结： 

1.Vue监视数据的原理：

vue会监视data中所有层次的数据

2.如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API：

  • Vue.set(target,propertyName/index,value)
  • vm.$set(target,propertyName/index,value)

3.如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

  • 调用原生对应的方法对数组进行更新
  • 重新解析模板，进而更新页面

4.在Vue修改数组中的某个元素一定要用如下方法：

使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data等） 添加属性
 

 

 

 

 

 

 

 

 

 

 

 

杨乙燃5132
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue自定义组件】渐变色进度条组件
发果叁
09-21 2884
佛祖保佑， 永无bug。Hello 大家好！我是海的对岸！当时UI给的原型图说要弄这个，看了一下，不难，那就弄下，现在把这个记录下来。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
css基础属性介绍：linear-gradient
Wod_7的博客
08-15 1337
当谈到CSS的背景样式时，`linear-gradient`属性是一个非常有用和强大的工具。它允许我们创建出漂亮的线性渐变背景，给网页添加一些色彩和深度。让我们一起深入了解一下吧！
vue动画渐变色
qq_46344419的博客
03-02 617
动画渐变文字渐变
vue页面如何单独给背景色全方案
最新发布
2401_84097393的博客
05-15 332
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue 渐变色 内联写法 动态赋值
weixin_62452941的博客
10-13 706
vue 渐变色 内联写法 动态赋值vue 渐变色 内联写法 动态赋值
vue项目中 echarts的渐变色的设置
卜卦的博客
07-05 1万+
实现效果 2 设置渐变色 areaStyle: { normal: { color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(63,...
vue中echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。
qq_44535402的博客
09-02 3297
echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。
Vue基础知识.pptx
03-24
总的来说，Vue.js 的基础知识和进阶特性对于前端开发者来说至关重要，熟练掌握这些知识点不仅能帮助面试者成功通过Vue相关的职位面试，而且在实际项目中也能发挥出强大的能力。通过不断学习和实践，开发者可以充分...
Vue基础知识分享
08-07
在"Vue基础知识分享"这个压缩包中，我们有三个关键的学习资源：一个关于Vue基本知识的PPT，一份基于Vue官网实现的简单代码示例，以及一个详细讲述Vue基本操作的Word文档。这些资料将帮助我们深入理解Vue的核心概念和...
vue基础知识学习文档
03-28
Vue基础知识学习文档 本文档旨在详细介绍 Vue 框架的基础知识点，涵盖了 Vue 模板语法、指令语法、数据绑定、计算属性、监视属性、事件、组件、插槽、Vuex、路由、响应式数据等多个方面。 一、模板语法 Vue 模板...
Vue基础知识点附带实例
01-30
vue
在vue中引入echart的折线图时，echarts.graphic.LinearGradient，不能正常显示的解决方法。
m0_55728090的博客
04-01 5975
在vue中需要达到折线图，且有区域渐变色的效果，那么像下面那样子直接复制过来，在vue中不能渲染出来。需要将原来的 newecharts.graphic.LinearGradient 改成这样，new this.$echarts.graphic.LinearGradient 前提先是npm安装echart 1、使用npm安装 npm install echarts --save 2、main.js中引入挂载原型 import echarts from 'echarts' //需要挂载到..
vue 动态设置背景图片，并设置背景图片的渐变色
askuld的博客
07-20 7587
父div使用position:relative解决，子div使用position:absolute属性；四、如何将背景图片设置在右下角。采用绝对定位和相对定位解决问题。一、VUE动态设置背景图片。二、静态图片引入方式。三、设置背景图片渐变。
css笔记
qq_50887722的博客
09-06 213
图片垂直居中 vertical-align: middle;
vue2+element项目，通过伪类实现el-slider组件Tooltip永久显示，以及滑块滑动区分色块效果
qq_58441775的博客
04-19 2718
伪类，el-slider组件，Tooltip永久显示，Tooltip，el-slider，滑块滑动效果，vue2,elementui
css linear-gradient 设置背景颜色渐变
热门推荐
且听风吟的博客
08-12 2万+
CSS3 渐变能够让背景颜色在两个或多个颜色之间平滑过渡。
基于 vue.js 封装高 复用的业务组件
weixin_45400833的博客
04-22 344
意义：增强开发效率，增加代码的可维护性和可拓展性。 主要考虑传入的数据 和 事件 * 封装一个组件，会对props做一个约束 props ： * dom元素样式的传递： 动态 class style 类名 :class="[`button--${type}`,{ is-plain:plain}]" （type在css中 重写每一项类型的样式） * 字体icon 图标 也可以传 子组件： [class*=icon] v-if="icon" ：class="icon" icon :{ type...
vue 动态样式绑定 class/style
weixin_57742734的博客
08-31 7851
vue 动态样式绑定
vue css基础知识
09-22
Vue中的CSS基础知识包括以下几点： 1. 类绑定：使用v-bind:class指令，可以根据条件动态地绑定CSS类名。 2. 样式绑定：使用v-bind:style指令，可以绑定一个样式对象，动态地设置元素的样式。 3. 条件渲染：使用v-if、v-else-if、v-else等指令可以根据条件来决定是否渲染某个元素。 4. 列表渲染：使用v-for指令可以循环渲染数组或对象，并可以通过索引来动态设置每个元素的CSS类名。 5. 动态过渡效果：使用transition组件可以给元素添加过渡效果，如淡入淡出、滑动等。 6. CSS预处理器支持：Vue支持使用CSS预处理器如Sass、Less等进行样式的编写。 7. CSS作用域：在Vue组件中，默认情况下，样式只作用于当前组件，在样式中使用scoped属性可以限定样式的作用范围。 8. CSS模块化：通过使用CSS模块化，可以将CSS样式和组件分离，提高样式的可维护性。 9. CSS动画：Vue提供了transition和animation属性，用于在元素渲染和移除时添加动画效果。 10. CSS预加载：Vue CLI可以自动对CSS进行预加载优化，提高页面加载速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值