让vue实例控制网页中某个区域的过程,称之为挂载。
两种方式:
- 通过
el:"css选择器"
进行配置 - 通过
vue实例.$mount("css选择器")
进行配置
方法1: 通过el:"css选择器"
进行配置
在创建vue实例时就进行挂载
<div id="app">
{{title}}
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "g1",
},
});
</script>
方法2: 通过vue实例.$mount("css选择器")
进行配置
在创建好vue实例后再进行挂载
<div id="app">
{{title}}
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
data: {
title: "g1",
},
});
vm.$mount("#app");
</script>
或
<script>
new Vue({
data: {
title: "g1",
},
}).$mount("#app");
</script>
方法1和方法2都能实现vue实例的挂载,除了挂载时机不同,两者没有区别