VUE2学习（class和style绑定、列表的渲染、表单收集）-day03

本文链接：https://blog.csdn.net/javaxueba/article/details/132871533

1-class的绑定

绑定样式: 字符串，数组，对象的三种绑定方式
1。class样式写法:class="xxx”xxx可以是字符串、对象、数组。

字符串写法适用于:类名不确定，要动态获取。
对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2.style样式
:style="{fontsize: xxx}"其中xxx是动态值

:style="[a,b]"其中a、b是样式对象。

2-2

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title> 初识VUE</title>
    <style>
        .basic {
            width: 300px;
            height: 60px;
            margin: 10px;
            border: 1px solid black;
        }
        .happy {
            background-color: pink;
            border: 1px solid black;
        }
        .sad {
            background-color: rgb(70, 67, 68);
            border: 1px solid black;
        }
        .wu {
            background-color: rgb(236, 3, 42);
            border: 1px solid black;
        }
        .at1 {
            background-color: green;
            border: 4px solid black;
        }
        .at2 {
            background-color: green;
            border: 4px dashed black;
        }
        .at3 {
            background-color: green;
            border: 4px solid blue;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="classStr" @click="changeClass1">{{name}}</div>
        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>

        <!--绑定style样式 内联样式 作为了解-->
        <!-- 内联样式 对象写法-->
        <div class="basic" :style="styleObj">{{name}}</div>
          <!-- 内联样式 对数组写法-->
          <div class="basic" :style="styleArr">{{name}}</div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el: "#root",
            data: {
                name: "test",
                classStr: "happy",
                classArr: ['at1', 'at2', 'at3'],
                classObj: {
                    at1: true,
                    at2: false
                },
                styleObj:{
                    fontSize:'40px',
                    background:'red'
                },
                styleArr: [
                    {fontSize:'40px'},
                    {background:'blue'}
                    ]
            },methods: {
                //改变样式方法
                changeClass1(){
                    //生成[0,3) 的随机数，
                    const num = Math.floor(Math.random()*3);
                    var arr = ['happpy','sad','wu'];
                    this.classStr = arr[num];
                    console.log('当前颜色',this.classStr)
                }
            },
        })

    </script>
</body>

</html>

2- 条件渲染

写法：

1- v-if=“表达式”

v-else-if=“表达式”

v-else 适用于：切换频率较低的场景特点：不展示的DOM元素直接被删除注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

<template v-if="isShow"> 如下：<template> 解析时候会被删除掉，不影响页面结构

2- v-show=“表达式”

适用于：切换频率较高的场景特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉了

总结对比：

v-show=“表达式” 适用于：切换频率较高的场景特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉了

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title> 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- v-show 语法 条件渲染-->
        <H1 v-show="isShow">原神4.1, {{name}}, 来送福利拉</H1>
        
        <button @click="changeShow">点我v-show使用，display =none隐藏节点（适用频繁操作场景）</button>
        </br>
        </br>
        </br>
        <!-- v-if 语法 条件渲染-->
        <H1 v-if="num === 1">v-if 原神4.1, {{name}}, 来送福利拉</H1>
        <H1 v-else-if="num === 2">v-else-if  原神4.1, {{name}}, 来送福利拉</H1>
        <H1 v-else-if="num === 3">v-else-if  原神4.1, {{name}}, 来送福利拉</H1>
        <H1 v-else>v-else  原神4.1, {{name}}, 来送福利拉</H1>

        <button @click="deleteEl">点我v-if使用,添加删除节点</button>

        <!--template 只能配合 v-if 适用 -->
        <template v-if="isShow">
            <H1 >v-template 原神4.1, {{name}}, 来送福利拉</H1>
        </template>

        <button @click="changeShow">点我template 配合 v-if使用,添加删除节点</button>

    </div>
    <script type="text/javascript">

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: '米哈游',
                    isShow: true,
                    num:1
                }
            },
            methods: {
                changeShow() {
                    this.isShow = !this.isShow
                },
                deleteEl() {
                    let newNum = this.num + 1;
                   this.num =  newNum;
                   console.log("打印当前num值",this.num)
                }
            },
        })
    </script>
</body>

</html>

3-列表渲染

3-1 v-for 指令渲染基本列表

语法：

<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识

作用：

可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title> 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!--1- v-for 遍历数组 -->
        <ul>
            <li v-for="(person, index) in personList" :key="person.id">
                索引：{{index}}
            </br>
                数据：{{person.id}}-{{person.name}}-{{person.age}}
            </li>
        </ul>

        <!--2- v-for 遍历对象 -->
        <ul>
            <li v-for="(val, key) in car" :key="key">
                key ：{{key}}
            </br>
                数据：{{val}}
            </li>
        </ul>

        <!--3- v-for 遍历字符串 用的少 -->
        <ul>
            <li v-for="(val, index) in str" :key="index">
                key ：{{index}}
            </br>
                数据：{{val}}
            </li>
        </ul>

        <!--4- v-for 遍历指定的次数 用得少-->
        <ul>
            <li v-for="(val, index) in 3" :key="index">
                key ：{{index}}
            </br>
                数据：{{val}}
            </li>
        </ul>

    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data() {
                return {
                    personList: [
                        { id: '001', name: '怀标', age: 28 },
                        { id: '002', name: '欢子', age: 28 },
                        { id: '003', name: '叶飞', age: 28 }

                    ],
                    car: {
                        brand: '奥迪',
                        price: '40万',
                        color: '黑色'
                    },
                    str: 'java'
                }
            },
        })

    </script>
</body>

</html>

3-2 key的原理

3-2-1 key为index的情况

如图：模拟添加人员，在列表前面追加

添加后input输入框数据出现错位，

情况分析：

vue在生成虚拟DOM时候，用key作为对比，认为现在老刘就是之前张三

解决：
我们将列表遍历的key，从下标index 换为 id唯一标识，就可以解决

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title> 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!--1- v-for 遍历数组 -->
        <button @click.once="add">添加人员</button>
        <ul>
            <li v-for="(person, index) in personList" :key="person.id">
                索引：{{index}} ---- 数据：{{person.id}}-{{person.name}}-{{person.age}}
                <input type="text">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data() {
                return {
                    personList: [
                        { 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.personList.unshift(p);
                }

            },
        })

    </script>
</body>

</html>

key的对比总结

对比规则：

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

        1-若虚拟DOM中内容没变, 直接使用之前的真实DOM

        2-若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM，

二、旧虚拟DOM中未找到与新虚拟DOM相同的key：

1-创建新的真实DOM，随后渲染到到页面

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

        1-若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低

2-若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题

开发中如何选择key?

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

4-列表过滤

下面对上面人员列表实现过滤效果，添加搜索框进行搜索

代码如下：

监视属性实现，利用输入框 keyWord变化过滤数据，赋值给新的数组渲染，

计算属性则更直接，keyWord变化时，直接返回列表过滤数据

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title> 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!--1- 监视属性过滤文档 -->
        <h1>利用监视属性 watch 过滤数据</h1>
        人员姓名(监视属性写法)： <input type="text" placeholder="请输入姓名" v-model="keyWord1"></input>
        <ul>
            <li v-for="(person, index) in personListWatch" :key="person.id">
                索引：{{index}} ---- 数据：{{person.id}}-{{person.name}}-{{person.age}}
            </li>
        </ul>


        <!--2 - 计算属性写法  -->
        <h1>利用计算属性 computed  过滤数据</h1>
        人员姓名(计算属性写法)： <input type="text" placeholder="请输入姓名" v-model="keyWord2"></input>
        <ul>
            <li v-for="(person, index) in personListComputed" :key="person.id">
                索引：{{index}} ---- 数据：{{person.id}}-{{person.name}}-{{person.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord1: '',
                    keyWord2: '',
                    personList: [
                        { id: '001', name: '周杰伦', age: 40 },
                        { id: '002', name: '林俊杰', age: 41 },
                        { id: '003', name: '王力宏', age: 42 },
                        { id: '004', name: '吕建忠', age: 43 }

                    ],
                    personListWatch:[]
                }
            }, methods: {


            },
            watch: {
                keyWord1: {
                    immediate: true,//初始化调用一次handler
                    handler(val) {
                        this.personListWatch = this.personList.filter((p)=>{
                            return p.name.indexOf(this.keyWord1) != -1;
                        })
                    }
                }

            },
            computed: {
                personListComputed() {
                    return this.personList.filter((p) => {
                        return p.name.indexOf(this.keyWord2) !== -1;
                    })
                }
            }
        })

    </script>
</body>

</html>

5-列表排序

计算属性所依赖的属性发生变化真个计算属性都会发生变化

<!DOCTYPE html>
<html>

<head>
    <mate charset="UTF-8"></mate>
    <title> 初识VUE</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <!--2 - 计算属性写法  -->
        <h1>利用计算属性 computed  过滤数据</h1>
        人员姓名(计算属性写法)： <input type="text" placeholder="请输入姓名" v-model="keyWord2"></input>
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(person, index) in personListComputed" :key="person.id">
                索引：{{index}} ---- 数据：{{person.id}}-{{person.name}}-{{person.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord2: '',
                    sortType: 0,
                    personList: [
                        { id: '001', name: '周杰伦', age: 30 },
                        { id: '002', name: '林俊杰', age: 10 },
                        { id: '003', name: '王力宏', age: 20 },
                        { id: '004', name: '吕建忠', age: 50 }
                    ]
                }
            }, 
            computed: {
                //计算属性用到的属性发生变化，整个属性都会重新计算
                personListComputed() {
                    const arr =  this.personList.filter((p) => {
                        return p.name.indexOf(this.keyWord2) !== -1;
                    });
                    //计算属性排序
                    if(this.sortType){
                        console.log("当前排序", this.sortType)
                        arr.sort((a, b)=>{
                            return this.sortType  === 1 ?  b.age - a.age : a.age - b.age
                        })
                    }

                    return arr;

                }
            }
        })

    </script>
</body>

</html>

7- vue 检测数据的原理

2、监测数据的原理
①Vue会监测data中所有层次的数据，就是即使对象中的对象的属性也能递归监测

②如何监测对象中的数据通过setter实现监测，且要在new Vue时就传入要监测的数据

（1）对象中后追加的属性，Vue默认不做响应式处理

（2）如需要给后添加的属性做响应式，请使用如下API：Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)

③如何监测数组中的数据通过包裹数组更新的方法实现，本质就是做了两件事：

（1）调用原生对应的方法对数组进行更新

（2）重写解析模板，进行更新页面

④在Vue修改数组中的某一个元素不能直接赋值，即不能直接带下标赋值，Vue监测不到，就像上面的问题一样，一定要用如下方法：

（1）使用数组的一些API：push()/pop()/shift()/unshift()/splice()/sort()/reverse()

（2）Vue.set()或vm.$set()

当然可以直接改变整个数组。

特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

如下图是vue2官网对数组给出的操作

代码DEMO展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<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">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
 
		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
                    //vue 的set方法绑定数据  不能直接在vm身上（data或者 _data）直接添加
					//Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
                    //在首位添加元素
					this.student.friends.unshift({name:'jack',age:70}) 
				},
				updateFirstFriendName(){
                    //对象 有get set 方法就可以调用
					this.student.friends[0].name = '张三'
				},
				addHobby(){
                    //在尾部追加
					this.student.hobby.push('学习')
				},
				updateHobby(){
                    //更新元素
					this.student.hobby.splice(0,1,'开车')
                    //this.$set(this.student.hobby, 0, '开车')
                    //Vue.set(this.student.hobby, 0, '开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

8-表单收集

总结：

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的内容就是value值

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性

若：<input type="checkbox"/>

没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）

配置了value属性：

v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

v-model的初始值是数组，那么收集的就是value组成的数组

v-model的三个修饰符：

lazy：失去焦点后再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区：
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false
 
		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:0,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>