Vue学习笔记2：Vue实例

提辖鲁

已于 2022-06-08 20:16:56 修改

阅读量102

点赞数

分类专栏： Web # Vue.js 文章标签： vue.js javascript 前端

于 2022-02-08 19:56:22 首次发布

本文链接：https://blog.csdn.net/lj402159806/article/details/122830231

版权

Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

Vue.js

10 篇文章 0 订阅

订阅专栏

Vue实例

数据与方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据与方法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ a }}
</div>
<script>
    var data = {
        a: 1,
        // b: 0
    };

    // 当Vue实例创建时，会将data对象中所有property加入Vue的响应式系统中
    var vm = new Vue({
        el: "#app",
        data: data
    });

    // $watch 是一个实例方法
    vm.$watch('a', function (newVal, oldVal) {
        // 这个回调将在 `vm.a` 改变后调用
        console.log("property a, newVal: " + newVal, ", oldVal: " + oldVal);
    });

    vm.$watch('b', function (newVal, oldVal) {
        console.log("property b, newVal: " + newVal, ", oldVal: " + oldVal);
    });

    // 当property发生改变时，视图会重渲染，更新为新的值
    setTimeout(function () {
        vm.$data.a = "change";
    }, 1500);
    // 改变原始数据也会重渲染
    setTimeout(function () {
        data.a = 3;
    }, 3000);

    // 实例被创建时data中的property才是响应式的
    // 实例创建完后，新添加的property改动不会触发更新
    setTimeout(function () {
        vm.b = 'hi';
    }, 4500);


    console.log("vm.$data === data", vm.$data === data);
    console.log("vm.a === data.a", vm.a === data.a);

</script>
</body>
</html>

在这里插入图片描述

冻结对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冻结对象</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ foo }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
    <button v-on:click="foo = 'baz'">Change it</button>
</div>
<script>
    var obj = {
        foo: 'bar'
    }

    // Object.freeze()会阻止修改property
    Object.freeze(obj);

    var vm = new Vue({
        el: '#app',
        data: obj
    })
</script>
</body>
</html>

在这里插入图片描述

生命周期钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ msg }}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hi vue'
        },
        //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        /* 在实例创建完成后被立即调用。
	       在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	       然而，挂载阶段还没开始，$el 属性目前不可见。 */
        created: function () {
            // 生命周期钩子的 this 上下文指向调用它的 Vue 实例
            console.log('created: msg is: ' + this.msg);
        },
        //在挂载开始之前被调用：相关的渲染函数首次被调用
        beforeMount: function () {
            console.log('beforeMount');
        },
        //el 被新创建的 vm.$el 替换, 挂载成功
        mounted: function () {
            console.log('mounted');
        },
        //数据更新时调用
        beforeUpdate: function () {
            console.log('beforeUpdate');
        },
        //组件 DOM 已经更新, 组件更新完毕
        updated: function () {
            console.log('updated');
        }
    });

    setTimeout(function () {
        vm.msg = "change";
    }, 3000);
</script>
</body>
</html>

提辖鲁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记2：Vue实例

Vue实例数据与方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数据与方法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body>&l
复制链接

扫一扫