当我们使用Vue进行开发时，我们可以使用$mount方法手动挂载Vue实例，也可以在Vue实例中使用el属性来自动挂载实例。
首先，让我们来看看这两种方式的区别。
Vue $mount
$mount方法可以将Vue实例手动挂载到DOM上。通过调用$mount，Vue实例才能开始渲染。使用$mount方法时需要注意的是，如果在实例化Vue时没有显式地提供el选项，则需要使用$mount方法将Vue实例手动挂载。
例如，我们创建一个Vue实例并将其手动挂载到元素ID为app的DOM节点上：
const app = new Vue({
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello, world!'
};
}
});
app.$mount('#app');
在上面的例子中，我们创建了一个Vue实例，并且模板定义了一个div标签，显示message的值。接下来，我们使用了$mount方法来手动将Vue实例挂载到了DOM节点#app上。
Vue el
如果在实例化Vue时已经提供了el选项，则Vue实例会自动将其挂载到对应的DOM上。例如：
const app = new Vue({
el: '#app',
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello, world!'
};
}
});
在上面的例子中，我们显式地提供了el选项，让Vue实例自动将其挂载到对应的DOM节点#app上。
需要注意的是，如果使用了template选项来定义Vue实例的模板，那么不能同时提供el选项，否则将会抛出错误。
示例1
接下来，我们来看一个使用$mount方法手动挂载Vue实例的示例：
<!DOCTYPE html>
<html>
<head>
<title>Vue $mount Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = new Vue({
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello, world!'
};
}
});
app.$mount('#app');
</script>
</body>
</html>
在这个示例中，我们创建了一个Vue实例，并将其手动挂载到#app元素上。页面将展示一个Hello, world!的消息。
示例2
下面是一个使用el选项自动挂载Vue实例的示例：
<!DOCTYPE html>
<html>
<head>
<title>Vue el Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ message }}</div>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
message: 'Hello, world!'
};
}
})
</script>
</body>
</html>
在这个示例中，我们创建了一个Vue实例，并将其自动挂载到#app元素上。页面将展示一个Hello, world!的消息。
总结一下，Vue的$mount方法和el属性都可以将Vue实例挂载到DOM上，但需要注意的是，如果使用了template选项来定义Vue实例的模板，那么不能同时提供el选项，否则将会抛出错误。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue $mount 和 el的区别说明 - Python技术站
微信扫一扫 
支付宝扫一扫 