AtguiguVue【P1-P10】初識vue、模板語法、資料繫結、el和data的兩種寫法、vue中的MVVM模型

阿新 • • 發佈：2021-11-10

尚矽谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通_嗶哩嗶哩_bilibili

1、初識vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初識Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="./js/vue.js"></script>
    </head 
>
    <body>
        <!-- 
            初識Vue：
                1.想讓Vue工作，就必須建立一個Vue例項，且要傳入一個配置物件；
                2.root容器裡的程式碼依然符合html規範，只不過混入了一些特殊的Vue語法；
                3.root容器裡的程式碼被稱為【Vue模板】；
                4.Vue例項和容器是一一對應的；
                5.真實開發中只有一個Vue例項，並且會配合著元件一起使用；
                6.{{xxx}}中的xxx要寫js表示式，且xxx可以自動讀取到data中的所有屬性；
                7.一旦data中的資料發生改變，那麼頁面中用到該資料的地方也會自動更新；

            注意區分：js表示式 和 js程式碼(語句)
                1.表示式：一個表示式會產生一個值，可以放在任何一個需要值的地方：
                            (1). a
                            (2). a+b
                            (3). demo(1)
                            (4). x === y ? 'a' : 'b'
                2.js程式碼(語句)
                            (1). if(){}
                            (2). for(){}
         
-->


        <!-- 準備好一個容器 -->
        <!-- <div class="root"> -->
        <div id="root">
            <h1>hello {{name.toUpperCase()}},{{name}},{{address}},{{1+1}},{{Date.now()}}</h1>  <!--插值語法-->
        </div>

        <script type="text/javascript" 
>
            Vue.config.productionTip = false; //阻止vue在啟動時生成生產提示

            //建立vue例項
            new Vue({
                // el:'.root'
                // el:document.getElementById('id')
                el:'#root', //el用於指定當前vue例項為哪個容器服務，值通常為css選擇器字串
                data:{ //data中用於儲存資料，資料供el所指定的容器去使用，值暫時先寫成一個物件
                    name:'vue',
                    address:'青島'
                }
            });
        </script>
    </body>
</html>

2、模板語法

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8" />
        <title>模板語法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
        <!-- 
            Vue模板語法有2大類：
                1.插值語法：
                        功能：用於解析標籤體內容。
                        寫法：{{xxx}}，xxx是js表示式，且可以直接讀取到data中的所有屬性。
                2.指令語法：
                        功能：用於解析標籤（包括：標籤屬性、標籤體內容、繫結事件.....）。
                        舉例：v-bind:href="xxx" 或  簡寫為 :href="xxx"，xxx同樣要寫js表示式，
                                    且可以直接讀取到data中的所有屬性。
                        備註：Vue中有很多的指令，且形式都是：v-????，此處我們只是拿v-bind舉個例子。
         -->

        <div id="root">
                <h1>插值語法</h1>
                <h3>hello, {{name}}</h3>
                <hr />
                <h1>指令語法</h1>
                <a v-bind:href="url.toUpperCase()">點我去尚矽谷學習1</a>
                <a :href="url">點我去尚矽谷學習2</a>
                <a href="http://yppah.cnblogs.com">點我去blog學習</a>
        </div>

        <script type="text/javascript">
                new Vue({
                        el: '#root',
                        data: {
                                name: 'tom',
                                url: 'http://www.atguigu.com'
                        }
                });
        </script>

</body>

</html>

3、資料繫結

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>資料繫結</title>
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>

        <!-- 
            Vue中有2種資料繫結的方式：
                    1.單向繫結(v-bind)：資料只能從data流向頁面。
                    2.雙向繫結(v-model)：資料不僅能從data流向頁面，還可以從頁面流向data。
                        備註：
                                1.雙向繫結一般都應用在表單類元素上（如：input、select等）
                                2.v-model:value 可以簡寫為 v-model，因為v-model預設收集的就是value值。
         -->

        <div id="root">
            <!-- 普通寫法 -->
            單向繫結資料：<input type="text" v-bind:value="name"><br/>
            雙向繫結資料：<input type="text" v-model:value="name"><br/>

            <!-- 簡寫 -->
            單向資料繫結：<input type="text" :value="name"><br/>
            雙向資料繫結：<input type="text" v-model="name"><br/>

            <!-- 如下程式碼是錯誤的，因為v-model只能應用在表單類元素（輸入類元素）上 -->
            <!-- <h2 v-model:x="name">你好啊</h2> -->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false; 
            new Vue({
                el: '#root',
                data: {
                    name: 'tom'
                }
            });
        </script>

    </body>
</html>

4、el和data的兩種寫法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el和data的兩種寫法</title>
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>

        <!-- 
            data與el的2種寫法
                    1.el有2種寫法
                                    (1).new Vue時候配置el屬性。
                                    (2).先建立Vue例項，隨後再通過vm.$mount('#root')指定el的值。
                    2.data有2種寫法
                                    (1).物件式
                                    (2).函式式
                                    如何選擇：目前哪種寫法都可以，以後學習到元件時，data必須使用函式式，否則會報錯。
                    3.一個重要的原則：
                                    由Vue管理的函式(如data方法)，一定不要寫箭頭函式，一旦寫了箭頭函式，this就不再是Vue例項了,二是window。
        -->

        <div id="root">
           <h1>hello,{{name}}</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false; 

            //el的兩種寫法
            /*
            const v = new Vue({
                // el: '#root', //方式1
                data: {
                    name: 'tom'
                }
            });
            console.log(v);
            v.$mount('#root'); //方式2
            */

            // data的兩種寫法
            const v = new Vue({
                el: '#root', 

                //方式1(物件式)
                /*
                data: {
                    name: 'tom'
                }
                */

                //方式2(函式式)
                data: function(){
                    console.log('@@@', this); //此處的this是Vue例項物件
                    return{
                        name: 'sam'
                    }
                }//不可以寫成箭頭函式data:()=>{}，但可以簡寫為data(){}

            });
        </script>

    </body>
</html>

5、vue中的MVVM模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>vue中的MVVM模型</title>
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>
        
        <!-- 
            MVVM模型
                        1. M：模型(Model) ：data中的資料
                        2. V：檢視(View) ：模板程式碼
                        3. VM：檢視模型(ViewModel)：Vue例項
            觀察發現：
                        1.data中所有的屬性，最後都出現在了vm身上。
                        2.vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板中都可以直接使用。
        -->

        <div id="root">
            <h1>學校名稱: {{name}}</h1>
            <h1>學校地址: {{address}}</h1>
            <!-- <h1>測試一下1: {{1+1}}</h1>
            <h1>測試一下2: {{$options}}</h1>
            <h1>測試一下3: {{$emit}}</h1>
            <h1>測試一下4: {{_c}}</h1> -->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false; 
            const vm = new Vue({
                el: '#root',
                data: {
                    name: 'QDU',
                    address: '青島'
                }
            });
        </script>

    </body>
</html>