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

最新推荐文章于 2024-07-09 08:45:50 发布

hahahafree

最新推荐文章于 2024-07-09 08:45:50 发布

阅读量627

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102964616

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

方法


    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>