WEB前端：vuejs全家桶（17）：方法（1）： vm.$mount() vm.$destroy() vm.$nextTick(callback)

最新推荐文章于 2022-06-29 16:38:23 发布

原创最新推荐文章于 2022-06-29 16:38:23 发布 · 702 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vuejs

vuejs 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了Vue.js中实例的手动挂载方法及其在DOM更新中的应用，通过具体示例展示了如何使用$mount方法手动挂载Vue实例到指定元素，并解释了$nextTick方法在确保DOM更新完成后的回调调用。

方法


    vm.$mount()
    vm.$destroy()
    vm.$nextTick(callback)

vm.$mount()

方法1

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        {{msg}}

    </div>

</body>
<script>
    var vm = new Vue({
        // el: '.itany',
        data: {
            msg: 'welcome to itany'
        },


    });
    // 方法
    //vm.$mount()  手动挂载vue实例
    vm.$mount('.itany');
</script>

</html>

方法2

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        {{msg}}

    </div>

</body>
<script>
    var vm = new Vue({
        data: {
            msg: '欢迎你！',
            name: 'car',
        }
    }).$mount('.itany')
</script>

</html>

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        {{msg}}
        <hr>
        <h1 ref="title">标题：{{name}}</h1>
    </div>

</body>
<script>
    var vm = new Vue({
            data: {
                msg: '欢迎你！',
                name: 'car',
            }
        }).$mount('.itany')
        //vm.$destroy() 销毁实例
        // vm.$destroy();

    // vm.$nextTick(callback) 在DOM更新完成后再执行回调函数， 一般在修改数据之后使用该方法，以便获取更新后的DOM
    vm.name = '面条';
    //DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
    // console.log(vm.$refs.title.textContent);
    vm.$nextTick(function() {
        //DOM更新完成，更新完成后再执行此代码
        console.log(vm.$refs.title.textContent);
    })
</script>

</html>