VUE:vue源码--data劫持(*****五颗星)

注意:

Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

1.vue源码--data劫持

index.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>
</head>

<body>
    <div id="app">
        <h1>{{ str }} <span>啦啦啦</span></h1>
        {{str}}
        <p>{{a}}</p>
        <button @click="btn">按钮</button>
    </div>
    <script type="text/javascript" src="newvue.js"></script>
    <!-- <script type="text/javascript" src="vue.js"></script> -->
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                str: '小明',
                a: "louie"
            },
            beforeCreate() {
                console.log('beforeCreate', this.$el, this.$data)
            },
            created() {
                console.log('created', this.$el, this.$data)
            },
            beforeMount() {
                console.log('beforeMount', this.$el, this.$data)
            },
            mounted() {
                console.log('mounted', this.$el, this.$data)
            },
            methods: {
                btn(e){
                    console.log(this)
                    console.log(this.str)
                }
            }
        }) 
    </script>
</body>

</html>

newvue.js:

// newvu

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论

相关推荐

MingoTree:看不出你你的技术栈,想找什么工作,然后课设项目别写上去了,自我评价删了,前后端你想好你要干啥,这种简历投上去秒挂的
点赞 评论 收藏
分享
02-10 21:39
Java
点赞 评论 收藏
分享
评论
1
1
分享

创作者周榜

更多
牛客网
牛客企业服务