Vue el 挂载点

Vue 实例中 el 属性，提供一个页面上已经存在的 DOM 元素，作为 Vue 实例的挂载目标。

 

1. el 取值

el 取值类型为 string | Element。它既可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

1）使用 CSS id 选择器

以下范例中，DOM 树中有一个 id 为 app 元素，我们可以使用 # 选择器挂载。 

<html>
<body>
    <div id="app"> 
    <p>{{ message }}</p> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    var app = new Vue({
        el:'#app',	
        data:{
          message:'Hello,World!'
        }
    })
    </script>
</body>
</html>

我要试一试

2）使用 CSS class 选择器

以下范例中，DOM 树中有一个 class 为 app 元素，我们可以使用 . 选择器挂载。 

<html>
<body>
    <div class="app">
    <p>{{ message }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    var app = new Vue({
        el:'.app',	
        data:{
            message:'Hello,World!'
        }
    })
    </script>
</body>
</html>

我要试一试

3）使用 CSS 标签选择器

以下范例中，DOM 树中有一个 div 为 app 元素，我们可以使用 div 标签选择器挂载。 

<html>
<body>
    <div> 
    <p>{{ message }}</p> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    var app = new Vue({
        el:'div',	
        data:{
          message:'Hello,World!'
        }
    })
    </script>
</body>
</html>

我要试一试

以上三种选择器的运行的结果是相同。

el 提供的元素只能作为挂载点，不推荐挂载 root 实例到 <html> 或者 <body> 上。

 

2. el 生效

设置 el 值，只在用 new 创建实例时生效。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。在实例挂载之后，元素可以用 vm.$el 访问。

以下使用了两种设置方式，运行的效果是一致的。

1）创建实例时设置 el 值

<script>
var app = new Vue({
    el:'#app',	
    data:{
      message:'Hello,World!'
    }
})
</script>

我要试一试

2）使用 $mount() 函数

<script>
var app = new Vue({
    data:{
      message:'Hello,World!'
    }
});
app.$mount("#app")
</script>

我要试一试

 

3. Vue 视频教程

视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=4&share_source=copy_web

我们在创建 Vue 实例的时候，除了指定挂载点 el 外，还指定了一个属性 data，用来存储 Vue 实例中使用的数据。1. data 属性的语法：data 属性两种写法：data作为对象 和 data作为函数。1) data 作为对象的语法：data: { message: '通过data对象获取 message 值'}