一、数据代理
1. 回顾 Object.defineProperty 方法
value: ‘18’,
enumerable: true, //控制属性是否可以被枚举，默认值是false
writable: true, //控制属性是否可以被修改，默认值是false
configurable: true, //控制属性是否可以被删除，默认是false
let number = 18 let person = { name: '张三', sex: '男', } Object.defineProperty(person,'age',{ // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log("有人读取了age属性") return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value) { console.log("有人修改了age属性，且值是",value) number = value } }) console.log(person)
2. 数据代理
通过一个对象代理对另一个对象中属性的操作(读/写)。
let obj = {x: 100} let obj2 = {y: 200} // obj2也可以操作obj的x Object.defineProperty(obj2, 'x', { get(){ return obj.x }, set(value){ obj.x = value } }) console.log(obj2.x) // 100
3. vue 中的数据代理
通过 vm 对象来代理 data 对象中属性的操作(读/写)。
好处：更加方便的操作data中的数据
基本原理：通过 Object.defineProperty() 把 data 对象中所有属性添加到 vm 上。 为每一个添加到 vm 上的属性，都指定一个 getter/setter。在 getter/setter 内部去操作(读/写)data中对应的属性。
<div id="root"> <h1>学校名称：{{name}}</h1> <h1>学校地址：{{address}}</h1> </div> <script> const vm = new Vue({ el: '#root', data: { name: '青岛理工大学', address: '青岛市黄岛区' } }) </script>
二、事件处理
1. 事件的基本使用
使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名；
事件的回调需要配置在 methods 对象中，最终会在 vm 上；
methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了；
methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或 组件实例对象；
@click=“demo” 和 @click=“demo($event)” 效果一样，但后者可以传参；
<div id="root"> <h1>欢迎来到{{name}}</h1> <button @click="showInfo1">点击查看信息(不传参)</button> <button @click="showInfo2">点击查看信息(传参)</button> </div> <script> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ name: '哔哩哔哩', }, methods:{ showInfo1(event){ console.log(this) // 此处 this 是 vm console.log('同学你好!(不传参)') }, showInfo2(event,number){ console.log('同学你好!!(传参)') console.log(event,821) } } }) </script>
2. 事件修饰符
prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）；
once：事件只触发一次(从内到外)（常用）；
capture：使用事件的捕获模式(从外到内)；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
3. prevent: 阻止默认事件（常用）
有弹出框，但页面不会跳转
<div id='root'> <a href="http://www.baidu.com" @click.prevent="showInfo">click me</a> </div> <script> Vue.config.productionTip = false; new Vue({ el: '#root', methods:{ showInfo(){ alert('同学你好！') } } }) </script>
4. stop：阻止事件冒泡（常用）
点击按钮不会连续弹出两次弹出框
// css .demo1{ background-color: lightblue; height: 50px; } //html <div id='root'> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">click me</button> </div> </div> //vue <script> Vue.config.productionTip = false; new Vue({ el: '#root', methods:{ showInfo(){ alert('同学你好！') } } }) </script>
5. once：事件只触发一次(从内到外)（常用）
仅点击的第一次弹出对话框
<div id='root'> <button @click.once='showInfo'>click me</button> </div> <script> Vue.config.productionTip = false; new Vue({ el: '#root', methods:{ showInfo(){ alert('同学你好！') } } }) </script>
6. capture：使用事件的捕获模式（从外到内）
点击 div2，输出1,2。点击div1，输出1
注：事件捕获先发生于事件冒泡
//css .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } //html <div id='root'> <div class='box1' @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> </div> //vue <script> Vue.config.productionTip = false; new Vue({ el: '#root', methods:{ showMsg(msg){ console.log(msg) } } }) </script>
7. self：只有 event.target 是当前操作的元素时才触发事件
点击按钮，不会发生冒泡
//css .demo1{ background-color: lightblue; height: 50px; } //html <div id='root'> <div class='demo1' @click.self='showInfo'> <button @click="showInfo">click me</button> </div> </div> //vue <script> Vue.config.productionTip = false; new Vue({ el: '#root', methods:{ showInfo(){ alert('Hello') } } }) </script>
8. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
不加passsive会出现卡顿，wheel可以换成scroll
scroll是页面滚动条滚动会触发的事件，而wheel是鼠标滚轮滚动会触发的事件。一旦滚动条到底部后，滑动鼠标滚轮继续滚动，wheel就会一直触发，而scroll不会触发。
//css .list{ width: 200px; height: 200px; background-color: bisque; overflow: auto; } .li{ height: 100px; } //html <div id='root'> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> //vue <script> Vue.config.productionTip = false; new Vue({ el: '#root', methods:{ demo(){ for(let i = 0;i < 10000; i++){ console.log("#") } console.log("完毕") } } }) </script>
三、键盘事件
1. 常见键盘事件
Vue中常用的按键别名：
回车 => enter
删除 => delete(捕获 删除 或 退格 键)
退出 => esc
空格 => space
换行 => tab
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键，可以使用按键原始的 key 值去绑定，但注意要转为 kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
（1）配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
（2）配合 keydown 使用：正常触发事件。
- 也可以使用 keyCode 去指定具体的按键（即 @keyup.13 等同于 @keyup.enter）(不推荐)
- Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
2 .键盘事件实例
在文本框输入内容，点击回车，在控制台输出相应内容
<div id='root'> <h2>欢迎学习Vue!</h2> <input type="text" placeholder="按下回车提示输入" @keyup.enter='showInfo'> </div> <script> Vue.config.productionTip = false; new Vue({ el: '#root', methods:{ showInfo(e){ console.log(e.target.value) } } }) </script>
不积跬步无以至千里 不积小流无以成江海
