1 基本結構

2 插值語法與指令語法

3. 資料系結

4. vue 實體的 el 和 data 的幾種寫法

5 MVVM模型

6 資料代理

6.1 Object.defineProperty

6.2 最簡單的資料代理案例

6.3 資料代理原理分析

6.3.1 驗證 data.name --》 getter --》 vm.name

6.3.2 驗證 vm.name --》 setter --》 data.name

6.3.3 如果沒有資料代理的話

6.3.4 資料劫持

1 基本結構

在 head 標簽中，添加vue.js檔案
準備一個容器：在容器中使用插值語法或者指令語法，獲取vue實體中的資料
準備 vue 實體：鍵 el 的值為通過CSS選擇器得到的容器；data 的值為 vue實體要與容器互動的資料內容

注意：一個 vue 實體只能掛載一個容器物件，vue 物件可以利用組件來分擔其功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 引入開發版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>初識Vue</title>
</head>

<body>
    <!-- 準備好一個容器 -->
    <div id='Demo'>
        <h1> hello {{name.toLowerCase()}}</h1> 
        <h1> age: {{age}}</h1>
        <h1> date: {{Date.now()}}</h1>
        <p>總結語法：<br>
            1. 想讓VUE正常作業，必須創造一個VUE實體，且傳入一個配置物件<br>
            2. root容器中依然是正常的html語法， 只不過混入了VUE的特殊語法<br>
            3. root容器中的代碼稱為【VUE模板】<br>
            4. 容器 和 實體 必須是一一對應的，但是vue會有組件配合使用 <br>
            5. 一旦data中的資料發生變化，頁面中用到該資料的地方會自動更新
            注意區分運算式和js代碼：<br>
            1. 運算式會生成一個值，可以放在任何一個需要值的地方<br>
                (1). a; (2): a+b; (3):demo(1); (4): x === y ? 'a' : 'b'<br>
            2. js代碼，只控制代碼執行，不會產生一個值<br>
                (1). if(){}; (2). for(){}<br>
            
        </p>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止彈出生產者提示

        // 創建vue實體 -- 配置物件：鍵的值不可更改，對應的值型別不能隨便改
        // 建立起容器 Demo 與 當前vue實體 的聯系，值通常為 CSS選擇器字串
        new Vue({
            el:'#Demo',
            // el:document.getElementById('Demo') 這種寫法通常不用
            // data 中用于存盤資料，資料提供 el 所指定的容器去使用
            // 值暫時先寫成一個物件，后期會寫成一個函式；使用插值語法，將值寫進容器中
            data:{
                name:"SY",
                age:18
            }
        })

    </script>
    
</body>

</html>

2 插值語法與指令語法

插值語法主要用在標簽體中
指令語法通常用來管理標簽(標簽屬性,標簽體內容,系結事件)，以v-開頭

注意：無論是插值語法還是指令語法，其填充的都是 js運算式

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 準備好一個容器 -->
    <div id='Demo'>
        <h1> 插值語法：用于標簽體的內容,雙花括號內填js運算式 </h1> 
        <h3> age: {{age}}</h3>
        <hr>
        <h1> 指令語法：管理標簽(標簽屬性,標簽體內容,系結事件)；通常以 v- 開頭 </h1>
        <h2> v-bind: 用來管理標簽屬性， 可以縮寫為 :；例如：v-bind:href="xxx"，xxx表示的是js運算式</h2>
        <a v-bind:href='school.url.toUpperCase()' > 跳轉到官網 </h3>
        <a :href='school.url' > 跳轉到{{school.name.toUpperCase()}}官網2 </h3>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止彈出生產者提示

        new Vue({
            el:'#Demo',
            data:{
                name:"SY",
                age:18,
                school:{
                    name:'SanYuan',
                    url:'http://www.gcdxed.com/'
                }
            }
        })

    </script>
    
</body>

</html>

3. 資料系結

資料系結分單向系結和雙向系結：

單向系結使用 v-bind: 指令語法，可以縮寫為 : ，
雙向系結使用 v-model: 指令語法，主要用在表單類element上，這類element的特點是都有 value 屬性，因此，可以省略 value，

注意：單向系結時，修改頁面的資料，不會更新到 vue 物件，修改 vue 實體，保存后會體現在頁面上，雙向系結，兩者會聯動更新；修改頁面element對應的vue實體會隨之更新；修改vue實體對應的element也會隨之更新，

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 準備好一個容器 -->
    <div id='Demo'>
        單項資料系結(v-bind)：<input type="text" v-bind:value='name'> <br/>
        雙向資料系結(v-model)：<input type="text" v-model:value='name'>
        <p> 雙向系結只能作用于表單類(輸入類)元素上，如input，單選框，復選框，select, 多行輸入，他們都有 value 屬性 </p>
        <p> v-model:value 可以簡寫為 v-model</p>
        單項資料系結(v-bind簡寫)：<input type="text" :value='name'> <br/>
        雙向資料系結(v-model簡寫)：<input type="text" v-model='name'>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止彈出生產者提示

        new Vue({
            el:'#Demo',
            data:{
                name:'SY_GIS'
            }
           
        })

    </script>
    
</body>

</html>

4. vue 實體的 el 和 data 的幾種寫法

el 的兩種寫法：
- 寫法一：創建 vue 物件時，直接給出 el 和 data
- 寫法二：創建 vue 實體時，不定義el, 在后期使用 mount 方法掛載
data的兩種寫法：
- 寫法一：直接給出字典定義
- 寫法二：以普通函式形式定義，繁瑣但是強推這種方式，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 引入開發版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title> el 和 data 的幾種寫法 </title>
</head>

<body>
    <!-- 準備好一個容器 -->
    <div id='Demo'>
        <p> data: {{name}}</p>
        <p> 寫法1： 在定義Vue物件時，直接指定 el </p>
        <p> 寫法2： 在定義Vue物件時，先不指定 el, 后期在掛載上 </p>
    </div>

    <div id='Demo1'>
        <p> data: {{name}}</p>
        <p> 寫法1： 在定義Vue物件時，直接指定 data 物件 </p>
        <p> 寫法2： 在定義Vue物件時，采用函式式，回傳資料；學到組件時，必須使用函式式 </p>
        <p> 建議使用函式式，而且必須是普通函式，不能寫成箭頭函式 ()=>{}， 否則其 this 將表示的是 Windows 實體物件，而非 vue 實體物件 </p>
        <p> 由 vue 所管理的函式，絕對不能寫成箭頭函式 </p>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止彈出生產者提示

        const v =  new Vue({        
            data:{
                name:'SY_GIS'
            }         
        })
        // // 延遲 1 秒以后，再掛載
        // setTimeout(
        //     () => {v.$mount('#Demo'), 1000}
        // )
        v.$mount('#Demo')

        const v1 =  new Vue({    
            el:'#Demo1',    
            // data:function(){
            //     console.log("@@@@",this) // 這里的 this 指的是 vue 實體物件
            //     return {
            //         name:'SY_GIS1'
            //     }                
            // }

            // 一般在物件中寫方法，會刪掉 :function， 寫成如下形式：
            data(){
                console.log("@@@@",this) // 這里的 this 指的是 vue 實體物件
                return {
                    name:'SY_GIS1'
                }                
            }          
        })
    </script>
    
</body>

</html>

這里要注意，data不能使用 ()=>{} 型別的箭頭函式，否則其 this 會指向 windows，而不是我們的 vue 實體，由于是普通函式，實際操作中，可以省去 :function 直接寫 data() {}，

5 MVVM模型

所謂MVVM模型包含如下幾個部分：Model、View、ViewModel 分別對應模型 - 視圖 - 視圖模型，

所以，通常在定義 vue 物件時，我們將變數名設定為 vm

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 引入開發版本的vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>MVVM模型</title>
</head>

<body>
    <!-- 準備好一個容器 -->
    <div id='Demo'>
        <p> 單位名稱：{{name}}</p> 
        <p> 單位地址：{{address}}</p>
        <p> 凡是vue物件的屬性，都可以呼叫 {{$options}}</p>
        <p> MVVM 模型： Model / View / ViewModel </p>
        <p> Model: data 中的資料 </p>
        <p> View: 模板代碼 </p>
        <p> ViewModel: Vue實體 </p>
        <p> data 中的所有屬性，最終都會體現在 Vue 實體中， vm 身上的所有屬性 以及 VUE 原型上的所有屬性，在VUE模板中都可以直接使用</p>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止彈出生產者提示

        new Vue({
            el:'#Demo',
            data(){
                console.log('@@@', this)
                return{
                    name: 'SY_GIS',
                    address: 'Xian'
                }
            }
        })

    </script>
    
</body>

</html>

通過MVVM，我們可以在容器中獲取vue物件以及vue原型上的所有屬性

6 資料代理

6.1 Object.defineProperty

對屬性進行高級設定和操作

    <script>
        let number = 10
        let person = {
            name:'張三',
            sex:'男',
        }
        // 不可列舉，也就是說不能遍歷
        // Object.defineProperty(person, 'age', {value:18})

        
        Object.defineProperty(person, 'age', {
            // value:18,
            // enumerable:true, // 控制屬性書否可以被列舉，默認 fasle
            // writable:true, // 控制屬性書否可以被修改，默認 fasle
            // configurable:true, //控制屬性書否可以被洗掉，默認 fasle

            // 當有人讀取person的age屬性時，get方法(getter)就會誒呼叫，且回傳值就是get的值
            get:function(){
                console.log('有人讀取age屬性了')
                return number;
            },
            // 當有人修改person的age屬性時，set方法(setter)就會誒呼叫，且受到的值是set的值
            set(value){
                console.log('有人修改age屬性了')
                number = value
            }
        })
        console.log(person)
    </script>

除錯結果：

6.2 最簡單的資料代理案例

通過一個物件代理對另一個物件的屬性進行操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let obj1 = {x:100}
        let obj2 = {y:100}
        Object.defineProperty(obj2, 'x', {
            get(){
                return obj1.x
            },
            set(value){
                obj1.x = value
            }
        })
    </script>
</body>
</html>

6.3 資料代理原理分析

Vue中的資料代理：通過vm物件來代理data物件中屬性的操作（讀/寫)
Vue中資料代理的好處：更加方便的操作data中的資料
基本原理：
1. 通過object.defineProperty()把data物件中所有屬性添加到vm上，
2. 為每一個添加到vm上的屬性，都指定一個getter/setter，
3. 在getter/setter內部去操作(讀/寫)data中對應的屬性，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='Demo'>
        <p> {{name}} </p>
        <p> {{address}} </p>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止彈出生產者提示
        
        data = {name:'SY',address:'Xian'}

        const vm = new Vue({
            el:'#Demo',
            data
        });
    </script>
</body>
</html>

思路分析：

6.3.1 驗證 data.name --》 getter --》 vm.name

6.3.2 驗證 vm.name --》 setter --》 data.name

vm._data === data
vm._data === options.data 因為 new Vue 的引數是一個配置物件options，它里邊有data
options.data === data

所以，論證了 vm._data 與 vue 實體傳入的data 是一回事，

接著，修改 vm._data.name 相當于修改了 data，順帶著 vm.name 也會發生變化，

一旦 data 發生了修改，則對應的頁面元素也會立即隨之更新，

6.3.3 如果沒有資料代理的話

代碼應該寫成如下形式：

<p> 沒有資料代理的話：{{_data.name}},  {{_data.address}} </p>

6.3.4 資料劫持

vm._data 對 data 進行了修改，實際上是一個回應式；目的是檢測 data 的資料發生了改編，同時將其更新到頁面上，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293627.html

標籤：其他

上一篇：web前端框架之Vue 3.0 的七大優勢

下一篇：【面試】前端面試常考手寫題 - JavaScript - CSS

Vue前端框架筆記01：初識vue

1 基本結構

2 插值語法與指令語法

3. 資料系結

4. vue 實體的 el 和 data 的幾種寫法

5 MVVM模型

6 資料代理

6.1 Object.defineProperty

6.2 最簡單的資料代理案例

6.3 資料代理原理分析

6.3.1 驗證 data.name --》 getter --》 vm.name

6.3.2 驗證 vm.name --》 setter --》 data.name

6.3.3 如果沒有資料代理的話

6.3.4 資料劫持