Vue笔记【四】【持续更新】-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56612338/article/details/133132630

文章目录

5.3手写Vue实现数据代理(简易代码)

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写Vue框架数据代理的实现</title>
    <!-- 安装我们自己的Vue -->
    <script src="../js/myvue.js"></script>
</head>
<body>
    <script>
        const vm = new Vue({
            data : {
                msg : 'Hello Vue!',
                _name : 'jackson',
                $age : 30
            }
        })

    </script>

</body>
</html>

myvue.js文件代码：

// 定义一个Vue类
class Vue {
    // 定义构造函数
    // options是一个简单的纯粹的JS对象：{}
    // options对象中有一个data配置项
    constructor(options){
        // 获取所有的属性名
        Object.keys(options.data).forEach((propertyName, index) => {
            //console.log(typeof propertyName, propertyName, index)
            let firstChar = propertyName.charAt(0)//获取属性名的开头的第一个字符
            if(firstChar != '_' && firstChar != '$'){
                //如果不是以_或者$开头，就进行数据代理
                Object.defineProperty(this, propertyName, {
                    get(){
                        return options.data[propertyName]
                    },
                    set(val){
                        options.data[propertyName] = val
                    }
                })
            }
        })
    }
}

说明：

js中定义类是ES6的新特性，在类中定义一个构造函数用于获取Vue实例中data属性中的配置项，然后利用foreach对data中的配置项的key进行遍历,然后再利用Object.defineProperty进行数据代理。

运行结果展示：
在这里插入图片描述

从运行结果可以看出以_和$开头的属性并没有进行数据代理，通过vm可以修改属性和查看属性的值。

6.事件绑定

6.1原生实现数据绑定

<button onclick="alert('hello')">原生JS单击事件</button>

6.2Vue实现数据绑定

6.2.1语法格式：

<标签 v-指令名:参数名="表达式">{{插值语法}}</标签>
这里的表达式可以是常量，JS表达式，Vue所管理的对象

在Vue中，所有的事件所关联的回调函数，都要配置在Vue的methods中，否则不起作用

在这里插入图片描述

6.2.2事件绑定的2种写法

//注:sayHello是配置在methods里面的回调函数,msg是配置在data中的数据
<!--完整形式-->
<button v-on:click="sayHello()">{{msg}}</button>
<button v-on:keydown"sayHello()">{{msg}}</button>
...
<!--简写形式-->
<button @click="sayHello()">{{msg}}</button>
<button @keydown="sayHello()">{{msg}}</button>
...
<!-- 如果回调函数不需要传参这里的()也可省略 -->
<button @click="sayHello">{{msg}}</button>

6.2.3不传递参数

<button @click="sayHello()">{{msg}}</button>

Vue在调用回调函数的时候，会默认传递一个当前发生的事件对象

   methods: {
         	  sayWhat(event) {
                console.log(event)
              }
            }
<!-- 
如:click传入的是PointerEvent
   keydown传入的是KeyboardEvent
   ...
-->

6.2.4传递参数

<button @click="sayHi($event,'zs')">{{msg2}}</button>

传递参数时，会把Vue中当前的事件对象覆盖掉，类似java中的方法重载，这个当前的事件对象就没了，
解决方法就是，传递参数时，加一个 $e v e n t 的参数， vu e 框架看到$ event占位符后，会自动将当前事件传过去

methods: {
            sayHi(event, name) {
                console.log(event, name);
            }
        },

运行结果

在这里插入图片描述

从运行结果可以看出，当前的事件对象和参数都传过去了

7.回调函数中的this

我们通过实现一个点击按钮加一的小功能来研究回调函数中的this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关于回调函数中的this</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>{{msg}}</h1>
        <h1>计数器:{{counter}}</h1>
        <button @click="add">点我＋1(普通函数)</button>
        <button @click="add2">点我＋1(箭头函数)</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            msg: 'hello Vue',
            counter: 0
        },
        methods: {
            add() {
                //this就是vue实例
                //console.log(this === vm);
                //console.log(this);
                this.counter++;
            },
            add2: () => {
                //this 是 Window
                //console.log(this === vm); false
                //console.log(this); window
                this.counter++;//无效
            }

        },
    });
</script>

</html>

演示结果：
在这里插入图片描述

从演示结果中，我们可以看到普通函数是可以加一，但是箭头函数为什么就不行呢？下面我们来解释

我们分别在普通函数和箭头函数中都加入以下代码

console.log(this === vm);
console.log(this);

结果展示：
在这里插入图片描述
从结果中我们可以看出，普通函数输出结果为true，this就是vue实例，但是箭头函数中实际是没有this的，箭头函数中的this是从父级作用域当中继承过来的，对于当前程序来说，父级作用域是全局作用域:window