vue笔记

2022.5.26

{{message}}

{{}}内可以读到所有data属性

message内可以写：

1.表达式

(1).a

(2). a+b

(3). demo(1)

(4).x === y ? 'a' : 'b'

2. js代码(语句)

   (1). if(){}

   (2).for(){}

<div class='a'><a v-bind:href="url">123</a></div>

new vue({
el:'.a',
data:{
	url:'http://www.???.com'
}
})

v-bind： 可以动态绑定一个值;单向绑定

v-model：双向绑定，只应用于表单类元素（输入类元素：input，select）

两者的简写方式：v-bind： 可简写为：

​ v-model：value因为默认指向value 可简写为v-model

三.el与data 的写法

1.data写法，对象式：(未绑定id的情况下，用计时器延时绑定并触发)

mount:挂载

const v = new Vue({
	data:{
	name:'213'
}
})
//el的第二种写法；第一种：el：'#root'
setTimeout(()=>{
	v.$mount('#root')
},1000);

函数：(Vue所管理的函数，一定不要写箭头函数，否则this不再是Vue实例了)

data：function(){ //data(){}
	return{
		name:'123'
	}
}

2022.5.27
MVVM模型：M：model模型：data种的数据

​ V：view 模板代码

​ VM：viewmodel：Vue实例

数据代理Object.defineProperty:

通过vm对象来代理data对象种属性的操作

通过Object.defineProperty()内getter/setter 读/写data数据

let number = 18;
let person = {
	name:'张三',
	sex:'男',
}
Object.defineProperty(person,'age',{
	//enumerable:true 可被枚举
	//writable:true 可修改
	//configurable:true 可被删除
	get(){
		console.log('有人读取了age属性')
		return number
	},
	set(){
		console.log('有人修改了age属性，且值为'，value)
		number = value
	}
})

事件处理：

vue实例中，箭头函数捕获event

滚动条：scoll滚动条触发/wheel滚轮触发

事件修饰符:1.prevent:阻止默认事件

​ 2.stop:阻止事件冒泡

​ 3.once:仅触发一次

​ 4.capture：使用事件的捕获模式

​ 5.self：只有event.target时当前操作的元素才触发

​ 6.passive：事件默认立即执行，无需等待回调

5.28

键盘事件：

​ @keyup：弹起触发(系统修饰键shift，alt，ctrl，meta用法：按下后按其他键，谈弹起其他键后触发)

​ @keydown：按下触发

计算属性：

​ 原理：使用getter，setter；有缓存

姓:<input type='text' v-model='firstName'>
名:<input type='text' v-model='lastName'>
全名:<span>{{fullName}}</span>

computed:{
	fullName:{
		get(){
			return this.firstName+'-'+this.lastName
		},
		set(value){
			const arr = value.split('-')
			this.firstName = arr[0]
			this.lastName = arr[1]
		}
	}
}

监视属性：

//切换属性
	isHot =! isHot;
//三元运算
	isHot ?'炎热'：'凉爽'

5.29

methods:{
	watch:{
		isHot:{
			immediate:true,//立即执行
			handler(newValue，oldValue){
				console.log('isHot被修改了'，newValue，oldValue)
			}
		}
	}
}
//第二种写法
vm.$watch('isHot',{
	immediate:true,
	handler(newValue,oldValue){
		console.log('isHot被修改了'，newValue，oldValue)
	}
})

深度监视：

​ (1)Vue中watch默认不检测对象内部值的改变

​ (2)配置deep：true可检测

​ (3)检测内部值时：应写完整(带引号)'number.a'，不检测内部值时，可简写为number

watch与computed的区别：

​ watch：可以异步；computed可以完成的watch都可以完成；反之不可。

原则：Vue所管理的函数最好写成普通函数形式。(使得this指向vm或组件实例对象)

​ 不被Vue所管理的函数(定时器回调函数，ajax回调函数，promise函数)，最好写成箭头函数，this才可以指向vm或组件实例对象

绑定class样式：

<div class='a b c'>
或<div class='a' :class='b c'>
未绑定的不可单独写
或者：
    <div class='a' :class='total'>
    methods:{
    	total:['b','c']
    }

产生随机数：
	Math.random()//随机生成0-1，不包括1
	Math.random()*3//随机生成0-3
	Math.floor()//取整

条件渲染：

​ v-if：不展示时DOM直接被移除

​ v-show：适用于高频率切换，不会被移除

列表渲染：

​ v-for：1.用于列表数据

​ 2.语法：v-for='(item,index) in xxx' :key='yyy'

​ 3.可以遍历：数组，对象，字符串，指定次数

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没问题

列表过滤：

//判断顺序
computed:{
	//原0，升1，降2
	filPersons(){
		const arr = this.persons.filter((p)=>{
			return p.name.indexOf(this.keyWord) !== -1
		})
		if(this.sortType){
			arr.sort((p1,p2)=>{
			//p1-p2升序，p2-p1降序
				return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
			})
		}
	}
}