Day3:Vue——初识vue

原创 已于 2025-03-16 23:09:02 修改
· 466 阅读 · 18 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #前端框架 #css #开发语言

于 2025-03-16 21:55:05 首次发布

绑定样式 事件渲染

一.绑定样式

1.绑定class样式

字符串写法

适用于：样式类名不确定，需要动态指定

<style>
        div {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 2px solid green;
        }
        .sad {
            background-color: #000;
        }
        .happy {
            background-color: red;
        }
        .normal {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <!-- 要求1：先给盒子设置一个normal类名，当点击盒子时，类名变为happpy -->
    <!-- 分析：因为要更改类名，需要动态指定，所以不用修改DOM的方法，用vue的语法 -->
    <div class="basic" :class="mood" @click="changeMood"></div>
    <script>
        // const vm=new Vue({
        //     data:{
        //         mood:"normal"
        //     },
        //     //绑定事件
        //     methods:{
        //         changeMood(){
        //             this.mood="happy"
        //         }
        //     }
        // })
        // vm.$mount(".basic")

        //2.随机匹配颜色
        const vm=new Vue({
            data:{
                mood:"normal"
            },
            //绑定事件
            methods:{
                changeMood(){
                    const arr=["normal","happy","sad"]
                    this.mood=arr[Math.floor(Math.random()*3)]
                }
            }
        })
        vm.$mount(".basic")
    </script>
对象写法

对象写法：适用于要绑定的样式确定，名字也确定，但要动态决定用不用

    <!-- 实现样式sad和happy两个都用或者都不用或者一个用另一个不用 -->
    <!--  在vue开发者工具里面可以进行修改true和false-->
    <div class="basic" :class="classObj"></div>
    <script>
        const vm=new Vue({
            data:{
                classObj:{
                    sad:false,    //不应用类名sad
                    happy:true,  //应用类名happy
                }
            }
        })
        vm.$mount(".basic")
    </script>
数组写法

数组写法：适用于绑定样式不确定，名字也不确定

    <!-- 想要删除哪个在控制台输入vm.classArr.shift()(移除数组第一个元素),要用哪个输入vm.classArr.push() -->
    <div class="basic" :class="classArr" @click="changeMood"></div>
    <script>
        const vm=new Vue({
            data:{
                classArr:["sad","happy","normal"]  
            }
        })
        vm.$mount(".basic")
    </script>

2.绑定style样式（不常用）

<div class="basic" :style=styleObj>{{content}}</div>
    <script>
        const vm=new Vue({
            data:{
                content:"绑定Style样式",
                styleObj:{
                    fontSize:"28px",  //用小驼峰命名，记得属性值加引号
                    color:"red",
                    backgroundColor:"yellow"
                }
            }
        })
        vm.$mount(".basic")
    </script>

二.事件渲染

1.条件渲染

v-show

根据下列代码，当n=2时，“n=2时出现了”会出现在屏幕上，但当n=3时又会消失。
写法：v-show=“表达式”；或后接布尔值的写法：v-show=“false”
特点：不展示的元素未被移除，只是使用样式使其隐藏。
适用于：切换频率较低的场景

<div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <!-- v-show=“表达式”的写法,也可以写成 后接布尔值的写法：v-show="false" -->
        <h2 v-show="n===2">n=2时出现了</h2>
    </div>
    <script>
    const vm=new Vue({
        data:{
            n:1
        }
    })
    vm.$mount("#root")

在这里插入图片描述

v-if

写法：和v-show类似
特点：不展示的元素直接被移除
适用于：切换频率较低的场景
v-if还可以和v-else-if,v-else一起使用，但要求结构不能打断
代码示例：

<h2 v-if="n===1">n=1时出现了</h2>
<h2 v-else-if="n===3">n=3时出现了</h2>
<h2 v-else>以上两种都不满足</h2>

解读：v-if，v-else-if,v-else和if,else if,else语句类似，当if语句满足条件，直接跳过下边的else if,else语句；当if语句不满足条件，则会对else if 语句进行判断，满足则执行，不满足则执行else语句。

当出现下列情况：

h2 v-if="n===1">你好，同学！</h2>
<h2 v-if="n===1">你好，同学!!</h2>
<h2 v-if="n===1">你好，同学!!!</h2>

可以简写（只针对v-if使用）：

<template v-if="n===1">
            <h2>你好，同学！</h2>
            <h2>你好，同学!!</h2>
            <h2>你好，同学!!!</h2>
</template>

在这里插入图片描述

2.列表渲染

（1）基本列表

vue的指令v-for。
v-for能够遍历，加在谁身上就可以遍历谁
v-for不仅能够遍历数组还能够遍历对象，还有不常用的遍历字符串，以及很少用的遍历指定次数。

遍历数组（最常用）
 <div id="root">
        <h2>人员列表</h2>
        <ul>
            <!-- vue指令：v-for -->
            <!-- p就相当于persons这个数据池中的每一组数据 -->
            <!-- 在vue中，只要用了遍历的方式，生成多个同样结构的数据，必须给每一个结构打个标识,:key="p.id"就是这组数据的标识（相当于人的身份证号）-->
            <li v-for="p in persons" :key="p.id">   <!-- 也可以写为 v-for="(p,index) of persons"-->
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>
    <script>
        const vm=new Vue({
            data:{
                persons:[
                {id:"001",name:"张三",age:18},
                {id:"002",name:"李四",age:19},
                {id:"003",name:"王五",age:20}
            ]
        }
    })
        vm.$mount("#root")

当获取多个数据时，可以写成：

			 <!-- 获取多个数据 -->
             <!-- index表示索引值 -->
             <!-- 给数据的标识也可以写为 :key="index" -->
            <li v-for="(p,index) in persons" :key="index">  
                {{p.name}}-{{p.age}}--{{index}}
            </li>

在这里插入图片描述

遍历对象
<ul>
   <li v-for="(value,key) in car" :key="key">
       {{key}}--{{value}}
   </li>
</ul>
<script>
        const vm=new Vue({
            data:{
	            car:{
	            name:"奥迪",
	            price:"70万",
	            color:"黑色"
			        }
			    }  
			})
			vm.$mount("#root")
</script>

在这里插入图片描述

遍历字符串（不常用）
<ul>
   <li v-for="(char,index) in str" :key="index">
        {{char}}--{{index}}
    </li>
</ul>
<script>
     const vm=new Vue({
          data:{
           str:"hello"
	    }  
	})
	vm.$mount("#root")
</script>

在这里插入图片描述

3.key的原理(重要！)

id作为key 图示：
在这里插入图片描述
示例代码：

<button @click="add">点我添加信息</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">  
                {{p.name}}-{{p.age}}--{{index}}
                <input type="text">
            </li>
        </ul>
        <script>
        const vm=new Vue({
            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:"21"}
                    this.persons.unshift(p)   //unshift()在开头添加一个元素
                }
            }
    })
        vm.$mount("#root")
    </script>

运行结果：
点击按钮之前：
在这里插入图片描述
点击按钮之后：
在这里插入图片描述
正常，没有出现错误。

index作为key 图示和代码：
在这里插入图片描述

       <button @click="add">点我添加信息</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">  
                {{p.name}}-{{p.age}}--{{index}}
                <input type="text">
            </li>
        </ul>
        <script>
        const vm=new Vue({
            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:"21"}
                    this.persons.unshift(p)   //unshift()在开头添加一个元素
                }
            }
    })
        vm.$mount("#root")
    </script>

运行结果：
点击按钮之前：
在这里插入图片描述
点击按钮之后：
在这里插入图片描述
出现错误。

问：react,vue中的key有什么作用?（key的内部原理）
  1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】。
    随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
  2. 对比规则:
    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
    1.若虚拟DOM中内容没变，直接使用之 前的真实DOM！
    2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实DOMl，随后渲染到到页面。
  3. 用index作为key可能会引发的问题:
    1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新 => 界面效果没问题，但效率低。
    2.如果结构中还包含输入类的DOM:
    会产生错误DOM更新 => 界面有问题。
  4. 开发中如何选择key？
    1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
    使用index作为key是没有问题的。

4.列表过滤

案列练习：
想要实现在表单中输入一个汉字，筛选出相对应的名字
使用watch来写：

<body>
    <!-- 首先需要获取表单中输入的内容 -->
    <!-- 根据表单中的内容对persons进行筛选 -->
    <!-- 并且判断什么时候进行过滤——在每一次keywords发生改变，即表单内容发生改变时进行一次过滤 -->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keywords">    <!-- 1.获取表单中的内容，先给表单添加一个v-model指令 -->
        <ul>
            <li v-for="(p,index) in filPerson" :key="index">    <!-- 6.这个地方要改为在过滤出来得到的新数组filperson里遍历 -->
                {{p.name}}-{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        const vm=new Vue({
            data:{
                keywords:"",   //2.使keywords为空字符串
                persons:[
                {id:"001",name:"马冬梅",age:19,sex:"女"},
                {id:"002",name:"周冬雨",age:20,sex:"女"},
                {id:"003",name:"周杰伦",age:21,sex:"男"},
                {id:"003",name:"温兆伦",age:22,sex:"男"}
                ],
                filPerson:[]   //2.因为用filter过滤数组之后，会返回过滤之后新的数组，所以要定义一个新的数组，否则就会越过滤数据越少
            },
            // 3.需要对keywords进行监听，判断是否发生改变从而进行过滤
            watch:{
                keywords:{
                    immediate:true,//4.为了使刚打开页面persons中的数据就在页面显示，所以要添加这个语句
                    handler(newvalue){
                        this.filPerson=this.persons.filter((p)=>{  //filter是过滤出想要的内容
                            return p.name.indexOf(newvalue) !== -1  //5.名字里是否包含newvalue，用indexOf查询，不返回-1说明包含
                        }) 
                    }
                }
            }  
        })
        vm.$mount("#root")
    </script>
</body>

在这里插入图片描述
使用computed来写：

 // 2.使用计算属性computed来写
            computed:{
                filPerson() {
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keywords)!=-1
                    })
                }
            }
Nuyoah.
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值