vue中的事件修饰符、表单双向数据绑定和计算属性

一、事件修饰符

二、表单双向数据绑定

模拟双向数据绑定（双向数据绑定底层原理）

三、计算属性

计算属性和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>

浏览器运行结果如下：