(vue el) Vue实例中el和data的两种写法小结 Vue 实例核心选项 el 和 data 全网首发(图文详解1)

Vue实例是Vue框架的核心，它是Vue构造函数创建的实例，由它引领所有的操作和运行。在Vue实例中，常常会用到两个非常重要的选项：“el”和“data”。“el”常用于指定挂载点，即Vue实例要控制的HTML代码范围。“data”则用于定义数据，供Vue控制的HTML代码使用。

一、el的使用

Vue实例创建时，可以在参数对象中，使用 el 属性来指定一个页面中已存在的 DOM 元素来挂载Vue实例。

new Vue({ el: '#app' })

上述代码即为通过id为”app”的DOM元素，用于挂载生成的Vue实例。

二、data的使用

“data”选项用于存储Vue实例的数据，供模板使用。

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

上面的代码就是“data”存放数据的例子，”message”为”Hello Vue!”，在对应的HTML代码中可以通过 {{ message }} 来显示。

三、对于Vue实例中el和data的两种写法

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

var app = new Vue({
    data: {
        message: 'Hello Vue!'
    }
});
app.$mount('#app')

两种写法结果相同，都是创建一个Vue实例，然后挂载到id为”app”的元素上。