vue基础P7-17

1、模板语法

插值语法

{{xxxx}}用在标签体中，也就是<>{{xxx}}</>

xxx是js表达式，有返回值，如num+1、Date.now()。不是js代码

指令语法

以v开头，用于解析标签，包括标签属性、标签体内容、绑定事件

v-on 当…发生时，省略为@

v-bind 单向绑定，data流向页面

2、数据绑定

v-model 双向绑定，但不是所有数据都可用，只能用在表单类元素上（输入类元素）input、select

v-model:value 可以简写为 v-model 因为它默认收集的就是value值

3、el和data的两种用法

el挂载

1、new vue时配置el属性

root里的代码是vue模板

new vue({
	el:"#root", data:......
})

log(vue) 带$的是给程序员用的，其余不是

2、先创建实例，随后指定挂载。vue里面的数据挂载到页面上

v.$mount("#root")
或 
setTimeout(()=>{
	v.$mount("#root")
},1000)

data用法

1、对象式

data:{
	name:
}

2、函数式。到组件时，必用函数式。

data:function(){   既是 data(){
	return{
		name:
	}
}

这里面的this是vue实例对象。若改为箭头函数，则是全局window。

箭头函数没有自己的this，找不到往外找。所以，由vue管理的函数不用箭头。

data:()=>{

}

10、MVVM

M：model data中的数据

V：view 视图页面

VM：viewmodel vue实例对象

View(DOM)----->Dom listeners(Vue)----->Model(原生js对象)

View(DOM)<-----Data bindings(Vue)<-----Model(原生js对象)

11、数据代理

给对象添加属性

Object.defineProperty(person, 'age', {
(value, '18')
enumberable:true,  可枚举/遍历   object.keys()
wirterable:true,  可修改
configurable:true  可删除
})

例如：外部用number=18，定义对象的age属性

不用数据代理的话，number改变，age值不变；

用数据代理可以实现age值随之改变的功能。

Object.defineProperty(person, 'age', {
	get:function(){  当有人读取该属性时，get函数就会被调用，返回值是age的值
		return number;
	}
	set(vale{
		需要 number=value
	})
})

通过一个对象代理对另一个对象属性的操作（读/写） getter setter

vm.name-----setter---->data.name------->页面刷新

但是怎么打印验证data.name已修改呢？vm._data.name 或者

let data = 
new Vue(){
	data
}

vm._data ====data 发现是true

通过vm对象来代理data(即_data)中的属性，vm.name代理 vm.__data.name （页面呈现）

通过Object.defineProperty把data中的对象属性添加到vm上，便于书写。

只有data里才做事件代理，vm有相关的getter、setter，method没有

14、事件处理

可传参

showInfo(66, $event)  
showInfo() 默认有 $event
$event.target.innerText

15、事件修饰符

1、prevent 阻止默认事件，比如跳转链接

2、stop 阻止事件冒泡

3、once 事件只触发一次

也可以 @click.stop.prevent 修饰符连续写

4、capture 使用事件的捕获机制

由外向内，，冒泡是由内向外

5、self 只有event.target是当前操作的元素时才触发事件

6、passive 事件的默认行为立即执行，无需等待事件回调执行完毕。

滚动条 scroll ，鼠标滚动轮+键盘， 本身就有passive功能

但是 @wheel，只鼠标滚动轮，先执行滚动条，再事件回调

16、键盘事件

keyup 键盘松开才执行

keydown 只按下键盘，就开始执行

9个常用的

@keyup.enter 回车

tab 换行。特别需要keydown，不能keyup。tab本身有切换焦点的功能

delete 删除，包括退格键，一样效果

esc 退出

up 上

down 下

left 左

right 右

space 空格

4个修饰符： shift、ctrl、alt、meta(win)

1、配合keydown使用，功能正常

2、配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被解决

@keyup.ctrl.y 只有ctrl+y才触发事件

其他的，如键盘上的 Caps Lock 写成 @keyup.caps-lock

也可以具体的keycode，不推荐

vue.config.keycodes.键名=键码 定制