Vue 学习（二）

Cherry_Zj

已于 2024-01-10 10:50:11 修改

阅读量74

点赞数

分类专栏： Vue 文章标签： vue.js 1024程序员节

于 2021-10-24 20:57:35 首次发布

本文链接：https://blog.csdn.net/Cherry_Zj/article/details/120939562

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

计算属性
监视属性
绑定样式
条件渲染
列表渲染

注意： 只要data中的数据发生变化，Vue一定会重新解析模板的

计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？
①初次读取时会执行一次。
②当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
①计算属性最终会出现在vm上，直接读取使用即可。
②如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

姓名案例 – 插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{firstName}}-{{lastName}}</span>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        }
    })
</script>
</html>

姓名案例 – methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{fullName()}}</span>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        methods:{
            fullName(){
                console.log("@---fullName");
                return this.firstName + "-" + this.lastName;
            }
        }
    })
</script>
</html>

姓名案例 – 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{fullName}}</span>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                /*
                    1. get有什么作用？
                        当有人读取fullName时，get会被调用，且返回值作为fullName的值
                    2. get什么时候调用？
                        ①初次读取fullName时
                        ②所依赖的数据发生那个变化时
                */

                get(){
                    return this.firstName + "-" + this.lastName;
                },
                /*
                    set什么时候调用？
                        当fullName被修改时
                */
                set(value){
                    const arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        }
    })
</script>
</html>

姓名案例 – 计算属性（简写）

确定了只读不改，就可以用简写计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{fullName}}</span>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            //简写
            fullName(){
                return this.firstName + "-" + this.lastName;
            }
        }
    })
</script>
</html>

监视属性

天气案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
		<!-- <button @click="isHot = !isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽';
                }
            }
        })
    </script>
</body>
</html>

天气案例 – 监视属性

监视属性watch：

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法：
①new Vue时传入watch配置
②通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            // watch:{
            //     isHot:{
            //         immediate:true,//初始化时让handler调用一下
            //         /*
            //             handler什么时候调用？
            //                 当isHot发生改变时 
            //         */
            //         handler(newValue,oldValue){
            //             console.log('isHot被修改了',newValue,oldValue);
            //         }
            //     }
            // }
        })
        vm.$watch('isHot',{
            immediate:true,//初始化时让handler调用一下
             /*
                handler什么时候调用？
                    当isHot发生改变时 
             */
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue);
            }
        })
    </script>
</body>
</html>

监视属性（简写）

当配置项中只有handler时，就能使用简写属性

watch:{
                //正常写法
                // isHot:{
                //     handler(newValue,oldValue){
                //         console.log('isHot被修改了',newValue,oldValue);
                //     }
                // }

                //当配置项中只有handler时，就能使用简写属性
                //简写
                /*isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }*/
            }

天气案例 – 深度监视

深度监视：

Vue中的watch默认不监测对象内部值的改变（一层）。
配置deep:true可以监测对象内部值改变（多层）。
注意：
①Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
②使用watch时根据数据的具体结构，决定是否采用深度监视。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr />
        <h3>a的值是{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            watch:{
                isHot:{
                    //immediate:true,//初始化时让handler调用一下
                    /*
                        handler什么时候调用？
                            当isHot发生改变时 
                    */
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue);
                    }
                },
                //监视多级结构中某个属性的变化
                /*'numbers.a':{
                    handler(){
                        console.log('a被修改了');
                    }
                }*/

                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改变了');
                    }
                }
            }
        })
        
    </script>
</body>
</html>

天气案例 – 深度监视（简写）

当配置项中只有handler时，就能使用简写属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>      
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            watch:{
                //正常写法
                // isHot:{
                //     handler(newValue,oldValue){
                //         console.log('isHot被修改了',newValue,oldValue);
                //     }
                // }

                //当配置项中只有handler时，就能使用简写属性
                //简写
                /*isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }*/
            }
        })
        //正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
        vm.$watch('isHot',function(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue);
        })
    </script>
</body>
</html>

姓名案例（computed&watch）

computed和watch之间的区别：

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>    
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{fullName}}</span>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
    })
</script>
</html>

绑定样式

class样式
写法: class="xxx" xxx可以是字符串、对象、数组。

①字符串写法适用于：类名不确定，要动态获取。
②数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
③对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
:style="{fontSize: xxx}" 其中xxx是动态值。
:style="[a,b]" 其中a、b是样式对象。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.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>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 绑定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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			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>
	
</html>

条件渲染

v-if
写法：
①v-if=“表达式”
②v-else-if=“表达式”
③v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。
v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（display:none）
注意：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 
				条件渲染：
							1.v-if
										写法：
												(1).v-if="表达式" 
												(2).v-else-if="表达式"
												(3).v-else="表达式"
										适用于：切换频率较低的场景。
										特点：不展示的DOM元素直接被移除。
										注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

							2.v-show
										写法：v-show="表达式"
										适用于：切换频率较高的场景。
										特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（display:none）
								
							3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
		 -->
        <div id="root">
            <h2>当前的n值是{{n}}</h2>
            <button @click="n++">点我n+1</button>

            <!-- 使用v-show做条件渲染 -->
            <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
            <!-- <h2 v-show="1 == 1">欢迎来到{{name}}</h2> -->

            <!-- 使用v-if做条件渲染 -->
            <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
            <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
        <!--
             v-else和v-else-if
            <div v-if="n === 1">Angular</div>
            <div v-else-if="n === 2">React</div>
            <div v-else-if="n === 3">Vue</div>
            <div v-else>哈哈</div>
         -->

         <!-- v-if与template配合使用 -->
            <template v-if="n === 1">
                <h2>你好</h2>
                <h2>喜羊羊</h2>
                <h2>羊村</h2>
            </template>



        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:'羊村',
                n:0
            }
        })

    </script>
</html>

列表渲染

v-for指令:

用于展示列表数据
语法：v-for=“(item, index) in xxx” :key=“yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 遍历数组 -->
            <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 car" :key="index">
                    {{char}}-{{index}}
                </li>
            </ul>

            <!-- 遍历指定次数 -->
            <h2>测试遍历指定次数</h2>
            <ul>
                <li v-for="(number,index) in 5" :key="index">
                    {{index}}-{{number}}
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false;

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

key 的原理

react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key：
①若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2)旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：
①若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新。界面效果没问题, 但效率低。
②如果结构中还包含输入类的DOM：会产生错误DOM更新，界面有问题。
开发中如何选择key?
①最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
②如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

在这里插入图片描述

列表过滤


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<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">
			Vue.config.productionTip = false;
			//用watch实现
			//#region
			/*new Vue({
				el:'#root',
				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:'男'}
					],
					filPersons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPersons = this.persons.filter((p)=>{
								return p.name.indexOf(val) != -1;
							})
						}
					}
				}
			})*/
			//#endregion


			//用computed实现
			new Vue({
				el:'#root',
				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>
</html>

列表排序


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<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 type="text/javascript">
			Vue.config.productionTip = false;
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
                    sortType:0, //0：原顺序，1：降序，2：升序 @click
					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(){
						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.age1 : p1.age-p2.age;
                            })
                        }
                        return arr;
					}
				}
			})
		</script>
</html>

Vue监视数据的原理

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
①对象中后追加的属性，Vue默认不做响应式处理
②如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
①调用原生对应的方法对数组进行更新。
②重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
①使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
②Vue.set() 或 vm.$set()

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<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="student.sex = '未知' ">修改性别</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(this.student,'sex','男')
                    this.$set(this.student,'sex','男')
                },
                addFriend(){
                    this.student.friends.unshift({name:'jack',age:70})
                },
                updateFirstFriendName(){
                    this.student.friends[0].name = '张三';
                }
            }
		})
	</script>
</html>

Cherry_Zj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习（二）

文章目录计算属性姓名案例 -- 插值语法姓名案例 -- methods姓名案例 -- 计算属性姓名案例 -- 计算属性（简写）监视属性天气案例天气案例 -- 监视属性监视属性（简写）天气案例 -- 深度监视天气案例 -- 深度监视（简写）姓名案例（computed&watch）绑定样式条件渲染列表渲染key 的原理列表过滤列表排序Vue监视数据的原理注意：只要data中的数据发生变化，Vue一定会重新解析模板的计算属性定义：要用的属性不存在，要通过已有属性计算得来。原理：底层借助了Objc
复制链接

扫一扫