目錄
上一節咱們學習瞭如何跑起來第一個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標籤等它們都有獨有的樣式,所以不建議使用
五、內容-總結