P9¶
- v-model 只能使用在含有 value 属性的表单值中
-
value v-bind 缩写 v-model:value
const v = new vue{
//方法一:el:"#root"
data:{
name : "Ikun"
}
}
//方法二:
v.$mount("#root")
//root 为被绑定的元素
//data 写法一
data:{
name:"iKun"
}
//data 写法二 !!!推荐
//注意此处this为全局window,故不可写箭头函数
data:function(){
return{
name:"iKun"
}
}
data(){
//function 可以省略
}
箭头函数没有自己的this ,vue管理的函数不可使用箭头函数
P10¶
数据代理
Object.defineProperty(对象名,"属性名"{
配置项:
value: 123,
enumberable:true, 枚举
writerable:true, 修改
configurable:true, 删除
get(){
return number;
}
set:function(value) peiqi{
number = value;
}
})
P11¶
Invoke property getter 调用属性获取器
P13¶
VM中获取的 data值是使用getter方法获取的
vm._data = options.data (传入的值) vue中的数据代理是使用 Object. defineProperty Api
1.vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写) 2.vue中数据代理的好处: 更加便的操作data中的数据 3,基本原理: 通过0bject.defineproperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性,都指定一个getter/setter 在getter/setter内部去操作(读/写)data中对应的属性。
P14¶
事件的基本使用: 1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名; 2.事件的回调需要配置在nethods对象中,最终会在vm上; 3.methods中配置的郴数,不要用箭头函数!否则this就不是vm了; 4.methods中配置的邱数,都是被Vue所管理的函数,this的指向是vm或组件实例对象; 5.@click="demo”和6@click="EERGGSESAER国,效果一致,但后者可以传参:
P15¶
Vue中的事件修饰符: 1.prevent:阻止默认事件〈常用): 2.stop:阻止事件冒泡〈常用): 3.once:事件只触发一次〈常用): 4.capture:使用事件的捕获模式; 5.self:只有event.target是当前操作的元素是才触发事件; 6.passive:事件的默认行为立即执行,无需等竺事件回调执行完毕;
P16¶
键盘事件
@keyup在element-ui组件中失效。这是因为element-ui组件在原生组件的基础上进行了封装。如想使用@keyup则需要加上native关键词。¶
1.Vue中常用的按键别名: 回车=>enter 删除=>delete(捕获“删除”和"“退格”键) 退出=>esc 空格=>space 换行=>tab 上=>up 下=>down 左=>left 右=>right 2.Vue未提供别名的按键,可以使用按键原始的key值去绑定, 但注意要转为kebab-case〔〈短横线命名) 3.系统修饰键〈用法特殊):ctr1、alt、shift、meta (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被甬发。 (2).配合keydown使用:正常侧发事件。 4.也可以使用keycode去指定有具体的按键〈不推荐) 5.Vue.config.keyCcodes.自定义键名=键码,可以去定制按键别名