目录
上一节咱们学习了如何跑起来第一个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标签等它们都有独有的样式,所以不建议使用
五、内容-总结