Vue中毒第二天

目录

一、赋值小demo

1.插值语法实现

2.使用method方法实现

3、计算属性实现

4、计算属性的简写

二、监视属性(侦听属性)

深度监视

简写形式

定时器(一段时间后触发)

三、样式绑定

 四、条件渲染

五、列表渲染

Key的原理(重点***)

列表过滤(最好使用计算属性来做)

列表排序

六、set()方法的使用(重头戏*******)

slice()函数 

重重重点 !!!!


 

一、赋值小demo

1.插值语法实现

<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			全名:<span>{{firstName}}-{{lastName}}</span>
		</div>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

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

2.使用method方法实现

全名:<span>{{fullName()}}</span>

new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
					console.log('@---fullName')
					return this.firstName + '-' + this.lastName
				}	
			},
		})

3、计算属性实现

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

全名:<span>{{fullName}}</span> <br/><br/>
computed:{
				fullName:{
					//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
					//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}

4、计算属性的简写

当计算属性只考虑读取,不考虑修改时,我们可以简写,即不需要写set方法

computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}

二、监视属性(侦听属性)

监视属性watch:
                    1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
                    2.监视的属性必须存在,才能进行监视!!
                    3.监视的两种写法:
                            (1).new Vue时传入watch配置
                            (2).通过vm.$watch监视

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !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>

深度监视

深度监视:
                        (1).Vue中的watch默认不监测对象内部值的改变(一层)。
                        (2).配置deep:true可以监测对象内部值改变(多层)。
                备注:
                        (1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
                        (2).使用watch时根据数据的具体结构,决定是否采用深度监视。

例如

data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
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改变了')
					}
				}
			}

简写形式

如果不需要配置immediate和deep时,可以使用简写的形式

//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

定时器(一段时间后触发)

setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);

三、样式绑定

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

<!-- 准备好一个容器-->
		<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>
                mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>

methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},

可使用arr.shift去除数组中的某个样式,或者添加等操作。

 四、条件渲染

条件渲染:
                            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元素未被移除,仅仅是使用样式隐藏掉
                                
                            3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。

v-if做的判断如果符合条件了,v-else就不再去检查

如果v-if后面的else语句被干扰项打断,比如多出个<div>啥的,else将作废 

<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>


<template>的使用可以在页面解析时,将这层template去掉,如果用div,会多出div这个无用的标签结构

五、列表渲染

v-for指令:
                        1.用于展示列表数据
                        2.语法:v-for="(item, index) in xxx" :key="yyy"
                        3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

<h2>人员列表(遍历数组)</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息(遍历对象)</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>
persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},

Key的原理(重点***)

面试题:react、vue中的key有什么作用?(key的内部原理)
                        
                        1. 虚拟DOM中key的作用:
                                        key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 
                                        随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
                                        
                        2.对比规则:
                                    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
                                                ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
                                                ②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

                                    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
                                                创建新的真实DOM,随后渲染到到页面。
                                                
                        3. 用index作为key可能会引发的问题:
                                            1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
                                                            会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

                                            2. 如果结构中还包含输入类的DOM:
                                                            会产生错误DOM更新 ==> 界面有问题。

                        4. 开发中如何选择key?:
                                            1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
                                            2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,
                                                使用index作为key是没有问题的。
        -->

列表过滤(最好使用计算属性来做)

<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>

使用计算属性,因为计算属性开始时默认会自动调用一次,因此建议使用 

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:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 

如果使用监听属性去写,一定要设置属性immediate:true,保证页面初始化,输入框为“ ”时页面渲染正确

watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}

同时注意本片中过滤器的使用

列表排序

排序函数的使用 

arr.sort((p1,p2)=>{
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})

六、set()方法的使用(重头戏*******)

这种对数组元素赋值的方法可以 

                        // this.persons[0].name = '马老师' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效

但这种却不奏效!!!!!!!!!!! 

为什么???

this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效

先看奏效的方法

this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})

slice()函数 

 为什么奏效????

重重重点 !!!!

Vue监视数据的原理:
                1. vue会监视data中所有层次的数据。

                2. 如何监测对象中的数据?
                                通过setter实现监视,且要在new Vue时就传入要监测的数据。
                                    (1).对象中后追加的属性,Vue默认不做响应式处理
                                    (2).如需给后添加的属性做响应式,请使用如下API:
                                                    Vue.set(target,propertyName/index,value) 或 
                                                    vm.$set(target,propertyName/index,value)

                3. 如何监测数组中的数据?
                                    通过包裹数组更新元素的方法实现,本质就是做了两件事:
                                        (1).调用原生对应的方法对数组进行更新。
                                        (2).重新解析模板,进而更新页面。

                4.在Vue修改数组中的某个元素一定要用如下方法:
                            1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                            2.Vue.set() 或 vm.$set()
                
                特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值