Vue筆記整理,讓你快速入門Vue.js:02_2.Vue基礎:el 掛載點

目錄

一、el掛載點

二、Vue實例的作用範圍是什麼呢?

1、實例代碼測試

2、效果展示

3、結論

三、是否支持其他的選擇器?

1、實例代碼測試

2、效果展示

3、結論

四、是否可以設置其他的dom元素呢?

1、實例代碼測試

2、效果展示

3、結論

五、內容-總結


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

五、內容-總結

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章