目录
上一节咱们学习了如何跑起来第一个Vue程序，在创建Vue实例的时候有两个属性分别是：el 和 data，接下来我们来学习下这两个属性
一、el挂载点
el属性的意思是设置挂载点，通过css选择器，设置vue实例管理的元素。
设置完毕之后，el命中的元素内部，使用两个大括号修饰的部分，就会被data中同名属性的数据所替换，
如下图：左边的message 被替换为 黑马程序员
不知道大家是否一样，在这里我有几个疑问：
Vue实例的作用范围是什么呢？
Vue是否支持其他的选择器？
Vue是否可以设置其他的dom元素呢？
二、Vue实例的作用范围是什么呢？
1、实例代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02_Vue实例的作用范围</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 外部元素，不起作用 -->
{{ message }}
<div id="app">
{{ message }}
<!-- 内部多层嵌套元素，起作用 -->
<span>{{ message }}</span>
<span><h2>{{ message }}</h2></span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好程序员！'
}
})
</script>
</body>
</html>
2、效果展示
3、结论
外部元素，不起作用；内部多层嵌套元素，都起作用
三、是否支持其他的选择器？
1、实例代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>03_是否支持其他的选择器</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 1、id选择器 -->
<!-- <div id="app"> -->
<!-- 2、类(class)选择器 -->
<!-- <div class="app"> -->
<!-- 3、标签选择器 -->
<div>
{{ message }}
</div>
<script>
var app = new Vue({
//el: '#app',//id选择器
//el:'.app',//类(class)选择器
el:"div",//标签选择器
data: {
message: '你好程序员'
}
})
</script>
</body>
</html>
2、效果展示
3、结论
支持其他选择器。
这里就演示三个选择器，还有其他的选择器就不一一演示了，因为实际开发中一般我们建议使用id选择器。那么为什么呢？
因为id选择器在开发的时候，一般我们会约定它是唯一的，而类选择器和标签选择器，都可以命中多个元素，会造成语义上的不清晰，所以我们建议使用的是id选择器。
四、是否可以设置其他的dom元素呢？
1、实例代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>04_是否可以设置其他的dom元素</title>
</head>
<body>
<!-- 4、不能挂载到body标签上面 -->
<!-- <body id="body"> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 1、div标签 -->
<!-- <div id="app">
{{ message }}
</div> -->
<!-- 2、p标签 -->
<!-- <p id="app">
{{ message }}
</p> -->
<!-- 3、h2标签 -->
<h2 id="app">
{{ message }}
</h2>
<script>
var app = new Vue({
el: '#app',
// el: "#body",//不行，会报错
data: {
message: '你好程序员'
}
})
</script>
</body>
</html>
2、效果展示
当挂载 body标签 上面报如下警告：
Do not mount Vue to <html> or <body> - mount to normal elements instead.
意思就是：不要把Vue挂载到html标签或body标签上，挂载到其他的普通元素上
3、结论
不要把Vue挂载到html标签或body标签上，挂载到其他的普通元素上
支持大部分标签，只支持双标签不支持单标签，如单标签没办法在内部写{{ message }}。
这里我们建议使用div作为挂载的元素，为什么呢？
因为div它没有什么额外的样式，但像p标签、h2标签等它们都有独有的样式，所以不建议使用
五、内容-总结
