目录
一、事件修饰符
二、表单双向数据绑定
模拟双向数据绑定（双向数据绑定底层原理）
三、计算属性
计算属性和methods方法区别？
计算属性和watch区别？
一、事件修饰符
stop 阻止事件冒泡
prevent 阻止事件默认行为
capture 事件捕获阶段执行
self 仅当当前元素是event.target触发
once 执行一次事件
passive 与scroll滚动事件连用
<div id="app">
<!-- capture 事件捕获阶段执行 -->
<div class="outer" @click.capture="outer">
<!-- stop事件修饰符阻止事件冒泡 -->
<div class="inner" @click.stop="inner"></div>
</div>
<!-- self 事件修饰符 仅当前元素是event.target(当前事件触发元素)时才触发 事件修饰符可以连用 -->
<div class="outer" @click.capture.self="outer">
<div class="inner" @click.capture="inner"></div>
</div>
<!-- once 事件修饰符 事件只绑定(生效)一次 -->
<div class="outer" @click.capture="outer">
<div class="inner" @click.capture.once="inner"></div>
</div>
<!-- prevent事件修饰符 阻止元素默认行为 -->
<a href="https://wwww.baidu.com" @click.prevent="toJump">百度一下</a>
<!-- passive 事件修饰符 提升移动端滚动性能 -->
<div class="scroll" @scroll.passive="scroll">
我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
</div>
<!-- 按键修饰符 按下按键之后才会触发 -->
<input type="text" @keyup.13="keyup">
<input type="text" @keyup.enter="keyup">
</div>
<script>
let vm = new Vue({
// 与模板绑定
el: "#app",
// 数据模型 存放vue变量
data: {
},
// 存放方法和事件处理程序
methods: {
keyup(){
console.log(event.keyCode);
},
scroll(){
console.log('正在滚动');
},
toJump() {
// 阻止a标签默认行为
// event.preventDefault();
},
outer() {
console.log('outer');
},
inner() {
console.log('inner');
// 阻止事件冒泡
// event.stopPropagation();
}
},
});
</script>二、表单双向数据绑定
v-model 监听用户输入事件以更新数据 创建双向数据绑定
v-model修饰符：
lazy 输入事件input事件 change事件 失焦或者按下回车
number 将输入框双向绑定得数据设置为number类型
trim 过滤绑定数据前后空格
<div id="app">
<!-- v-model语法糖 可以根据表单控件类型正确更新元素 监听用户输入事件更新数据 -->
{{form}}
用户名:<input type="text" v-model="form.username">
<br>
密码:<input type="password" v-model="form.password">
<br>
<label>男:<input type="radio" v-model="form.gender" value="male"></label>
<label>女:<input type="radio" v-model="form.gender" value="famale"></label>
<br>
爱好:
游泳:<input type="checkbox" v-model="form.hobbies" value="swimming">
篮球:<input type="checkbox" v-model="form.hobbies" value="basketball">
足球:<input type="checkbox" v-model="form.hobbies" value="football">
<br>
描述:<textarea v-model="form.desc" cols="30" rows="10"></textarea>
<br>
城市:
<select v-model="form.city">
<optgroup label="一线城市">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</optgroup>
</select>
</div>
<script>
let vm = new Vue({
// 与模板绑定
el:"#app",
// 数据模型 存放vue变量
data:{
form:{
hobbies:[]
},
},
// 存放方法和事件处理程序
methods: {
},
});
</script>模拟双向数据绑定（双向数据绑定底层原理）
利用Object.defineProperty()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 实现v-model -->
<p>极简版双向数据绑定</p>
<input type="text">
<script>
var p = document.querySelector('p');
var input = document.querySelector('input');
let obj = {
name:""
}
Object.defineProperty(obj,'name',{
get(){
return obj.name
},
set(newValue){
p.innerHTML = newValue
}
})
// 监听用户输入框输入的事件
input.oninput = function(){
obj.name = event.target.value;
}
</script>
</body>
</html>浏览器运行结果如下：
三、计算属性
对data中数据进行逻辑处理返回一个响应式数据,基于响应式依赖(data),只要响应式依赖不发生改变，计算属性就不会重新计算，多次调用计算属性会返回之前计算得结果。有缓存性，计算属性默认只提供getter，只允许读取，不允许修改，想要修改计算属性，需要提供setter函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg.split('').reverse().join('')}}
{{reverseMsg}}
{{reverseMsg}}
{{reverseMsg}}
{{reverseMsg}}
{{reverse()}}
{{reverse()}}
{{reverse()}}
{{reverse()}}
</div>
<script>
let vm = new Vue({
// 与模板绑定
el:"#app",
// 数据模型 存放vue变量
data:{
msg:'hello'
},
// 存放方法和事件处理程序
methods: {
reverse(){
console.log('methods方法');
return this.msg.split('').reverse().join('')
}
},
// 计算属性--一般对data中数据处理后再返回一个数据 基于响应式依赖缓存 返回一个响应式依赖
computed:{
reverseMsg(){
console.log('计算属性');
return this.msg.split('').reverse().join('')
}
}
});
setTimeout(()=>{
vm.msg = 'world'
},2000)
</script>
</body>
</html>浏览器运行结果如下：
2s后：
计算属性和methods方法区别？
1.计算属性有缓存性，响应式依赖不发生改变，多次调用计算属性会返回之前得计算结果。
2.methods多次调用会多次执行函数，没有缓存性。
3.计算属性一般不用于异步操作，methods可以处理异步操作。
4.可以定于计算属性被修改，不仅可读。
计算属性和watch区别？
1.计算属性具有缓存性，响应式依赖不发生改变计算属性不会重新计算，会返回之前得计算结果
2.watch不具有缓存性，只要数据发生改变watch就会立即执行
3.watch一般用于异步操作(监听分页)或者开销较大操作
4.计算属性一般不用于异步操作，只提供getter需要修改需要设置setter函数
