Vue学习笔记(2)|青训营笔记

55 阅读1分钟

这是我参与「第五届青训营」伴学笔记创作活动的的第9天 (❤ ω ❤)

image.png 24、事件处理,和javascript一致

想获取到原始DOM事件event,需要把$event以实参传入,或者不用括号传参,直接在形参接入;如需绑定多个函数则用逗号隔开,并且每个函数都要加上括号

25、事件修饰符

.stop: 阻止事件冒泡(常用)

.prevent:阻止默认事件(常用)

.self:只有event.target是当前操作的元素时才出发的事件

.capture:使用事件的捕获模式

.once: 事件只触发一次(常用)

.passive:事件的默认行为立即执行,无需等待事件回调执行完毕

26、键盘事件才会用到(KeyboardEvent.key)

按键修饰符:直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符

按键别名

.enter

.tab

.delete (捕获“Delete”和“Backspace”两个按键)

.esc

.space

.up

.down

.left

.right

系统按键修饰符 (按键修饰符需要在别名的前面)(也称功能键)

.ctrl

.alt

.shift

.meta

27、v-model原理

28、v-model在复选框的时候为布尔值,有多个复选框的话要绑定数组的形式,要加上value,否则进入数组的内容只有布尔类型

29、单选框也要加value值,

30、下拉菜单同理,选中的内容会把value放到放到v-model的变量中,因为双向绑定,所有会和v-model变量比较,如果值和value相同则勾选变量有的值

31、v-model修饰符

.lazy 懒惰模式,他会在失去焦点的时候更新内容,不会实时更新

.number 转换为数字类型

.trim 去除两端空格

32、父组件传数据给子组件===子组件使用父组件的数据,则需要在父组件以属性方式传入v-bind不用v-bind则是静态,在子组件里用props:[]接收,属性的名字和props数组里的名字需要相同

33、props也可以是对象,对象可以有类型限制;例如

{message:String} message变量中必须要为字符串类型,

变量里用对象,甚至可以设置默认值,或是否必须传入

{

message: {

type : String,

default:'我是默认值',

require:false

}

}

如果类型是数组或者对象,必须要以函数形式返回 

{

message: {

type : Object,

default:function() { return {} },

require:false

}

}

props是单向数据流,只能通过父组件更新数据,不能再子组件更新,如果在子组件更新数据vue会在控制台抛出错误

34、父组件使用子组件;子函数需要使用$emit,实例:在想发送数据的标签加上触发事件,触发sendParent函数后,vue会创建一个自定义事件,在父组件的标签里使用该自定义事件,当子组件的事件触发后会连锁自定义事件触发,随后可以在父组件里调用函数,使用形参接收传过来的值,需要在子组件通过emits : []声明自定义函数,否则控制台警告

自定义事件只有在父组件使用子组件,标签中才能使用

35、组件相互访问proxy (这里的inject是自定义事件,与相互访问无关)

父组件访问子组件 ref属性定义名字,使用函数通过$refs获取到子组件的proxy,也用在当前组件上;

子组件访问父组件 使用$parent可以访问父组件,一般不建议使用该方法,组件一般复用性高,这样可能导致代码混乱,建议使用props方式传递;

组件访问根组件 使用$root可以直接访问到跟组件的proxy