事件处理
事件的基本使用
- 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
- 事件的回调需要配置在methods对象中，最终会在vm上；
- method中配置的函数，不要用箭头函数!否则this就不是vm了;
- @click="demo"和@click="demo($event)"效果一致，但后者可以传参; 5.methods中的方法尽量不要使用箭头函数，因为this指向window
<div id="root">
<button @click="handles">提交</button>
<button @click="handles1(123,$event)">提交</button>
</div>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: '#root',
data: {
msg: '好啊!'
},
methods: {
handles(event) {
console.log(event)
console.log(event.target)
console.log(this)
},
handles1(a, event) {
console.log(a)
console.log(event);
}
}
})
事件属性
click 鼠标单击触发 dblclick 鼠标双击触发 wheel 鼠标滚轮滚动触发(触发了滚轮处理了回调函数滚动条才动) mouseenter 鼠标进入触发(不会冒泡) mouseleave 鼠标离开触发(不会冒泡) mouseout 鼠标移出触发(会冒泡) mouseover 鼠标经过触发(会冒泡) input 表单输入触发 change 表单改变失焦触发 scroll 滚动条滚动触发
事件修饰符
- prevent 事件修饰符
- stop 阻止事件冒泡
- once 事件只触发一次
- capture 使用事件的捕获模式
- self 只有event.target是当前操作的元素是才触发的事件
- passive 事件的默认行为立即执行，无续等待事件回调执行完毕
键盘事件
keyup 键盘弹起触发 keydown 键盘按下触发 keypress
常用的键盘别名
- enter 回车
- delete 删除
- esc 退出
- space 空格
- tab 特殊，必须配合keydown去使用
- up 上
- down 下
- left 左
- right 右
Vue未提供别名的按键,可以使用键盘原始的key值去绑定,但注意要转为kebab-case(短横线命名)
系统修饰键(用法特殊):ctrl、alt、shift、meta
- 配合keyup使用:按下修饰的同时，再按下其他按键,随后释放其他键,事件才被触发.
- 配合keydown使用:注册触发事件
使用KeyCode去指定具体的按键(不推荐)
因为web标准准备遗弃，因为有些键盘的按键编码不一样有些浏览器不支持,现在一般使用which或key。
- which和keyCode差不多
- key为按键别名
指定义按键
Vue.config.keyCodes.指定义健名 = 键码
<div id="root">
<button @click="handles">提交</button>
<button @click="handles1(123,$event)">提交</button>
<input type="text" @keyup="handles">
<input type="text" @keyup.aa="handles">
</div>
<script src="../vue.js"></script>
<script>
Vue.config.keyCodes.aa = 13
let vm = new Vue({
el: '#root',
data: {
msg: '好啊!'
},
methods: {
handles(event) {
console.log(event)
console.log(event.target)
console.log(this)
},
handles1(a, event) {
console.log(a)
console.log(event);
}
}
})
计算属性
计算属性:
- 定义:要用的属性不存在.要通过以有的属性计算得来.
- 原理:底层借助了Objcet.defineproperty方法提供的getter和setter.
- get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。
- 优势:与methods实现相比,内部有缓存机制(复用),效率更高.调试方便。
- 备注:
-
计算属性最终会出现在vm上，直接读取使用即可。
-
如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
</script>
<script>
let vm = new Vue({
el: '#root',
data: {
xing: "小",
name: "明",
},
computed: {
fullName: {
// get有什么作用?当有人读取fullName时,get就会被调用,且返回值作为fullName的值
// get有什么时候被调用?
// 1.初次读取fullName时
// 2.所依赖的数据发生变化时
get() {
console.log("get被调用了");
return this.xing.slice(0, 3) + '-' + this.name
},
// set什么时候被调用?当fullName被修改时.
set(value) {
console.log('set被调用了');
const arr = value.split('-')
this.fullName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
计算属性的简写
当我们确定这个值只是调用而不是去修改时我们可以用简写
<div id="root">
姓<input v-model="xing"><br>
名<input v-model="name"><br>
全名:<span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span>
</div>
<script src="../vue.js">
</script>
<script>
let vm = new Vue({
el: '#root',
data: {
xing: "小",
name: "明",
},
computed: {
fullName() {
console.log("get被调用了");
return this.xing.slice(0, 3) + '-' + this.name
}
}
})
</script>
监视属性
当被监视的属性变化时,回调函数自动调用,进行相关操作
监视的属性必须存在,才能进行监视！！
监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<div id="root">
<div>{{isred}}</div>
</div>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: '#root',
data: {
isred: true,
haha: 123
},
computed: {
handles() {
return this.isred ? "红色" : "不是红色"
}
},
watch: {
/* isred: {
immediate: true,
handler(newvalue, oldvalue) {
console.log(`监测到的新值${newvalue},检测到的旧值${oldvalue}`);
}
}, */
handles: {
immediate: true,
handler(newvalue, oldvalue) {
console.log(`监测到的新值${newvalue},检测到的旧值${oldvalue}`);
}
}
}
})
vm.$watch('isred', {
immediate: true, //初始化时让handler调用一下
// handle什么时候被调用?当isred发生改变时。
handler(newvalue, oldvalue) {
console.log(`监测到的新值${newvalue},检测到的旧值${oldvalue}`);
}
})
</script>
深度监视
深度监视:
- Vue中的watch默认不监测对象内部的改变(一层)。
- 配置deep:true可以监测对象内部改变(多层)。 备注:
- Vue自身可以监测对象内部的改变,但Vue提供的watch默认不可以!
- 使用watch时根据数据的具体结构,决定是否采用深度监视
<!--
深度监视:
Vue中的watch默认不监测对象内部的改变(一层)。
配置deep:true可以监测对象内部改变(多层)。
备注:
Vue自身可以监测对象内部的改变,但Vue提供的watch默认不可以!
使用watch时根据数据的具体结构,决定是否采用深度监视
-->
<div id="root">
<div>{{number.a}}</div>
<button @click="number.a++">a++</button>
</div>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: '#root',
data: {
isred: true,
haha: 123,
number: {
a: 1,
b: 1
}
},
computed: {
handles() {
return this.isred ? "红色" : "不是红色"
}
},
watch: {
// 可以这样精确监视a的变化
/* 'number.a': {
immediate: true,
handler(newvalue, oldvalue) {
console.log(`监测到的新值${newvalue},检测到的旧值${oldvalue}`);
}
} */
number: {
deep: true,
immediate: true,
handler(newvalue, oldvalue) {
console.log(`监测到number内的值变化`);
}
}
}
})
</script>
watch简写
<div id="root">
<div>{{isred}}</div>
<button @click="isred = !isred">toggle</button>
</div>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el: '#root',
data: {
isred: true,
haha: 123,
number: {
a: 1,
b: 1
}
},
computed: {
handles: function () {
return console.log(isred);
}
}/* ,
watch: {
isred: function (newvalue, oldvalue) {
console.log(`监测到的新值${newvalue},检测到的旧值${oldvalue}`);
}
} */
})
vm.$watch('isred', function (newvalue, oldvalue) {
console.log(`监测到的新值${newvalue},检测到的旧值${oldvalue}`);
})
</script>
computed和watch之间的区别:
- computed能完成的功能,watch都能可以完成。
- watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
两个重要的小原则:
所被vue管理的函数,最好写成普通函数，这样this的指向才是vm或组件实例对象。 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象。
