vue笔记

2022.5.26

{{message}}

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

message内可以写：

1.表达式

(1).a

(2). a+b

(3). demo(1)

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

  1. js代码(语句)

    (1). if(){}

    (2).for(){}

123


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；有缓存

姓:
名:
全名:{{fullName}}

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 ?'炎热'：'凉爽'

相关

标签