这是我参与「第五届青训营」伴学笔记创作活动的的第9天 (❤ ω ❤)
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