【Vue】一
Vue简介
el和data的两种写法
const v = new Vue({
el: '#root',
data: {
name: '123'
}
})
动态指定el容器
console.log(v)
setTimeout(()=>{
v.$mount('#root')
},1000)
函数式返回data
data: function() {
return {
name: '123'
}
}
而不能写成箭头函数，因为箭头函数没有this，下面输出为window而不是vue
data:()=> {
console.log(this)
return {
name: '123'
}
}
在对象中写明方法也可以简写为
data() {
console.log(this)
return {
name: '123'
}
}
MVVM模型
M：模型(Model)：Data中的数据
V：视图(View)：模板代码
VM：视图模型(ViewModel)：Vue实例
数据代理
Object.defineProperty方法（对象，新增属性，value）
let number = 18
let person = {
name: 'hikaru',
sex: 'w',
// age: 30
}
Object.defineProperty(person, "age", {
value: number,
enumerable: true, //设置新增属性可以枚举，默认为false
writable: true, //设置新增属性可以被修改，默认为false
configurable: true //设置新增属性可以被删除，默认为false
})
// 两种遍历方法
for (let key in person) {
console.log(person[key])
}
console.log(Object.keys(person))
console.log(person)
get和set方法
Object.defineProperty(person, "age", {
// value: number,
enumerable: true, //设置新增属性可以枚举，默认为false
// writable: true, //设置新增属性可以被修改，默认为false
// configurable: true, //设置新增属性可以被删除，默认为false
get() {
return number
},
set(value) {
console.log(value)
}
})
get在当age被读取时，get函数(getter)就会被调用，且返回值就是age的值
set在当age被修改时，set函数(setter)就会被调用，且参数就是被修改的age值
get set方法与writable、configurable属性重复不能一起写
数据代理实现
通过一个对象实现对另一个对象的读写操作
Vue.config.productionTip = false
let obj1 = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x
},
set(value) {
obj1.x = value
}
})
Vue中的数据代理：通过vm对象来代理data中的数据
vm(vue实体)将model中的data赋值给vm中的_data
数据代理： 将_data中所有的属性通过Object.defineProperty添加到vm中。
vm的data调用getter、setter方法时就会获取修改model中的data。
事件处理 v-on:xxx / @xxx
只有data中的数据会被数据劫持代理，如果把method加入data也会被数据代理
Vue常用事件修饰符
1 prevent 阻止默认事件
js写法
new Vue({
el: "#root",
methods: {
getInfo1() {
alert('info1')
},
getInfo2(event, number) {
console.log(number)
},
changeTarget(e) {
alert(e.target.href)
e.preventDefault();
}
},
})
Vue写法：@click.prevent
baidu
2 stop 阻止事件向上级冒泡
3 once 事件只触发一次
4 capture 使用事件的捕获模式
5 self 只有event.target是当前操作的元素时才触发事件
冒泡到root的div时target仍是按钮
6 passive 事件的默认行为立即执行，无需等待事件回调执行完毕
键盘事件
@keyup 在按键抬起的时候触发事件
@keydown 在按键按下的时候触发事件
常用按键别名
回车 Enter
删除 Delete
退出 Esc
空格 Spacce
换行 tab 需要配合keydown使用
上 up
下 down
左 left
右 right
e.key + ', ' + e.keyCode 获取键盘输入字符和字符编码
如回车 Enter 13
计算属性
1 使用插值语法实现
姓：
名：
姓名：{{firstName + lastName}}