Vue实例创建位置

最新推荐文章于 2023-08-14 15:00:35 发布

小卷儿Dr

最新推荐文章于 2023-08-14 15:00:35 发布

阅读量299

点赞数

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

本文链接：https://blog.csdn.net/weixin_43647764/article/details/102826820

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题描述：

在Vue的复习和细节学习中发现，在head中引入了vue后，直接在Head中创建Vue实例的话是没有作用的。

<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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script>
    var app7 = new Vue({
        el: '#app7',
        data: {
            foo: 'bar'
        }
    })
</script>
    <title>Document</title>

</head>

<body>
    <div id="app7">
        <p>{{foo}}</p>
        <button v-on:click="foo='baz'">改变它</button>
    </div>
</body>

解决办法：

Vue应该是挂在在已经创建号的Dom元素上面的，所以我们在创建Vue实例的时候，必须在已经创建了相关了Dom元素之后才可以创建成功。正确写法应该写在body的最后。

简单的小问题，但是都是以后要注意的部分。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小卷儿Dr

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实例创建位置

问题描述：在Vue的复习和细节学习中发现，在head中引入了vue后，直接在Head中创建Vue实例的话是没有作用的。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫