vue 踩坑 01 ->两种创建vue实例的区别

第一个例子

    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        })
        app.msg=123;
        console.log(app) ;
    </script>

第二个例子

    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        })
        app.msg=123;
        console.log(app) ;
    </script>
这两个例子在页面渲染上是没有差别的,但是在控制台输出的console.log(app)是有差别的

第一个是一个vue实例

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}

第二个仅仅是一个DOM对象

<div id="app'>Hello Vue</div>

如果dom元素的id没有和js内置对象重名,或者没有被重写,那么这个id的“变量”是指向这个dom元素的。即:不对app进行重新赋值,则app指向dom元素。由于第一种方法对app重新赋值,所以app指向了Vue对象。

另外,<img name="app">这样的也会有类似的效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,664评论 8 265
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,150评论 1 32
  • 又到下午茶的时间了(这么说是不是感觉生活又上了一层楼哇哈哈~),其实是在等女儿放学,站在街上站的腿酸胀,坐在地下冰...
    iYufei阅读 319评论 0 1
  • 以往的一些经历上看,爱自己已有一定认识 但这只是认识 没有引起足够重视,没有真正做到爱自己,通过昨晚的学习,深...
    惠通姐姐阅读 239评论 0 1