Vue2基础知识自用（二）数据代理与事件处理

0.回顾Object.defineProperty方法

Object.defineProperty(obj, prop, descriptor)

obj：要定义属性的对象。
prop：要定义或修改的属性的名称
descriptor：要定义或修改的属性描述符

对象具有属性标志和属性描述符，属性的getter和setter，具体可参考js关于对象属性配置说明

// 示例1
let person = {
    name:'张三',
    sex:'男'
}
// 加入age数据
Object.defineProperty(person,'age',{
    value:18
    enumerable:true       // 让数据可枚举
    writable:true         // 让数据可修改
    configurable:true	  // 让数据可删除
})
console.log(Object.keys(person))     //用数组输出数据

引入getter和setter

// 示例2
let number = 18
let person = {
    name:'张三',
    sex:'男'
}
Object.defineProperty(person,'age',{
    // 只要读取age，get函数(getter)就会被调用
    get(){
        return number
    },
    // 只要修改age，set函数(setter)就会被调用
    set(value){
        // 把修改的值赋给number
        number = value
    }
})

1.何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

// 示例
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
    // 访问 obj2.x 可以输出 obj.x 的值
    get(){
        return obj.x
    },
     // 修改 obj2.x 可以修改 obj.x 的值
    set(value){
        obj.x = value
    }
})

3.vue中的数据代理

• vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
• 好处：更加方便的操作data中的数据
• 基本原理：
  • 通过Object.defineProperty()把data对象中所有属性添加到vm上。
  • 为每一个添加到vm上的属性，都指定一个getter/setter。
  • 在getter/setter内部去操作（读/写）data中对应的属性。

<!-- 准备好一个容器-->
<div id="root">
	<h2>学校名称：{{name}}</h2>
	<h2>学校地址：{{address}}</h2>
</div>

<script>
	const vm = new Vue({
        el: '#root',
        data: {
            name: '家里蹲大学',
            address: '家'
        }
    })
</script>

浏览器里console打vm看一下，
有人读取name，getter就把data.name给过去
有人通过vm改name，setter执行把data.name改了
（vm._data就是我们定义的data，vm._data.name可以验证到）

数据代理图示：
vm._data.name与vm.name就是数据代理

_data里是数据劫持，为了实现响应式，在_data里面重新监听name和 address 的变化，变化了之后就会执行一个JS代码，JS代码的作用就是实现页面内容的修改

4.事件处理

事件的基本使用：

• 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
• 事件的回调需要配置在methods对象中，最终会在vm上
• methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
• vue所管理的函数最好不用箭头函数，不然this就是Window不是vm了
• @click="demo"和@click="demo($event)"效果一致，但后者可以传参

<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1（不传参）</button>
    <!-- 主动传事件本身 -->
    <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            name:'vue',
        },
        methods:{
            // 如果vue模板没有写event，会自动传 event 给函数
            showInfo1(event){
                // console.log(event.target.innerText) //输出“点我提示信息”
                // console.log(this) //此处的this是vm
                alert('同学你好！')
            },
            showInfo2(event,number){
                console.log(event,number)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！！')
            }
        }
	});
</script>

5.事件修饰符

Vue中的事件修饰符，可以连续写

• prevent：阻止默认事件（常用）
• stop：阻止事件冒泡（常用）
  • 事件冒泡：即多个组件嵌套，触发内层组件时，会一一触发外层事件
• once：事件只触发一次（常用）
• capture：使用事件的捕获模式
  • 让嵌套的div在捕获阶段就开始处理，正常是在冒泡阶段由内到外执行
• self：只有event.target是当前操作的元素时才触发事件
• passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- 阻止默认事件（常用） -->
	<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
    </div>
    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>
</div>

6.键盘事件

@keyup 按键按下去抬起来后执行 @keydown 按键按下去就执行

1.Vue中常用的按键别名：

• 回车 => enter
• 退出 => esc
• 空格 => space
• 换行 => tab (配合@keydown)
• 上下左右 => up、down、left、right
• 删除 => delete (捕获 “删除” 和 “退格” 键)

// 示例1 回车输出
<div id="root">
	<input type="text" placeholder="回车就输出" @keyup.enter="show">
</div>
// js
new Vue({
	el:"#root",
    methods:{
        show(e){
            console.log(e.target.value)
        }
    }
})

2.Vue未提供别名的按键，可以使用键盘原始的key值去绑定，但要注意转为kebab-case(短横线命名)

​ 例如大小写：CapsLock => caps-lock

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）

​ （1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键

​ （2）配合keydown使用：正常触发

3.也可以使用keyCode去指定具体的按键（不推荐）

4.Vue.config.keyCodes.自定义键名 = 键码 定制别名