一、初始Vue
1.第一步：準備一個容器

<div id="app">
        <h2>姓名：{{name}}</h2>
        <h2>年齡：{{age}}</h2>

v-on:指令用于綁定事件

<button v-on:click="updateName">修改姓名</button>
        <button v-on:click="updateAge">修改年齡</button>
    </div>

引入vue.js文件

<!-- 開發(fā)版本 -->
    <script src="../js/vue.js"></script>
    <!-- 生產(chǎn)版本 -->
    <!-- <script src="../js/vue.min.js"></script> -->

關閉生產(chǎn)提示

Vue.config.productionTip = false

2.第二步：創(chuàng)建一個Vue對象

let vm = new Vue({
            //指定當前Vue對象操作的DOM容器
            el:'#app',
            //定義當前Vue對象管理的數(shù)據(jù)
            data:{
                name:'張三',
                age:20
            },
            //定義當前Vue對象管理的方法
            methods: {
                //修改姓名的方法
                updateName(){
                    this.name = '李四'
                },
                //修改年齡的方法
                updateAge(){
                    this.age = 30
                }
            },
        })

二、Vue的響應式原理

1.理解什么是代理對象

01.定義源對象

let obj1 = {
            name:'張三',
            age:20
        }

02.定義代理對象

let obj2 = obj1
        console.log('obj2:',obj2);
        //代理對象修改了源對象的數(shù)據(jù)
        obj2.name = '李四'
        obj2.age = 30
        console.log('obj1:',obj1);
        console.log('----------------------------------------');

2.看一下Vue是如何使用代理對象

01.定義源對象
let myData = {
name:'張三',
age:20
}
02.將源對象傳遞給Vue的Data選項，背后做了兩件事情

 // 一.設置Vue實例的_data屬性，作為當前源對象的代理對象。（響應式的核心）
            // 二.將_data里面代理的所有數(shù)據(jù)，再添加到當前Vue實例身上。（為了Vue實例方便調(diào)用數(shù)據(jù)）
let vm = new Vue({
data:myData
        })
        vm._data.name = '李四'
        vm._data.age = 30
        console.log(myData);
        console.log('----------------------------------------');

3.給對添加屬性的幾種方式

let obj3 = {}
        //方式一:
        obj3.name = '張三'
        //方式二：
        obj3['age'] = 20
        //方式三：通過Object對象的defineProperty方法，給指定的對象添加指定的屬性
        // 使用這種方式，給對象添加的屬性，默認不可被枚舉，不能被刪除
        // 使用這種方式，給對象添加的屬性，對屬性的保護措施更加嚴格
        Object.defineProperty(obj3,'sex',{
            //屬性值
            value:'男',
            //允許被枚舉（默認不允許）
            enumerable:true,
            //允許被刪除（默認不允許）
            configurable:true
        })
        console.log(obj3);
        //枚舉出對象的所有屬性（其實就遍歷出對象的所有屬性名）
        for(let key in obj3){
            console.log(key);
        }
        //通過delete關鍵，可以刪除對象身上的指定屬性
        delete obj3.name
        delete obj3.sex
        console.log(obj3);
        console.log('----------------------------------------');

4.Vue響應式的原理

01定義一個源對象

let data = {
            name:'張三',
            age:20
        }

        //在頁面中，顯示姓名和年齡
        document.querySelector('#name').innerHTML = data.name
        document.querySelector('#age').innerHTML = data.age

02.定義一個代理對象（使用_data 去代理 data）

 let _data = {}

03.使用Object.defineProperty給代理對象添加屬性

Object.defineProperty(_data,'name',{
            //get方法，用于返回屬性的值（當我們調(diào)用name屬性獲取值時，會調(diào)用get方法）
            get(){
                // console.log('get方法執(zhí)行了');
                return data.name
            },
            //set方法，用于設置屬性的值（當我們調(diào)用name屬性設置值時，會調(diào)用set方法）
            set(val){
                // console.log('set方法執(zhí)行了');
                data.name = val
                //當代理對象，監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會重新渲染頁面
                document.querySelector('#name').innerHTML = data.name
            }
        })
        Object.defineProperty(_data,'age',{
            get(){
                return data.age
            },
            set(val){
                data.age = val
                //當代理對象，監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會重新渲染頁面
                document.querySelector('#age').innerHTML = data.age
            }
        })

三、Vue的常用指令

<div>
            <span>姓名：</span>
            <!-- v-bind:用于綁定屬性，通過v-bind:綁定過的屬性，可以在屬性值可以寫表達式 -->
            <!-- v-on:用于綁定事件，通過v-on:綁定過的事件，可以指定Vue實例定義的方法 -->
            <input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
        </div>

<div>
            <span>年齡：</span>
            <!-- v-bind:可以用:簡寫。 -->
            <!-- v-on:可以用@簡寫。 -->
            <!-- 如果事件方法的代碼不是很多，可以寫在行內(nèi)，注意：這里不能寫this，$event是事件對象 -->
            <input type="text" :value="age" @input="age = $event.target.value">{{age}}
        </div>

<div>
            <span>工作：</span>
            <!-- 通過v-model指令，可以實現(xiàn)對數(shù)據(jù)的雙向綁定，
            v-model指令是 v-bind:value 和 v-on:input 的簡寫。-->
            <input type="text" v-model="job">{{job}}
        </div>

四、條件渲染何列表渲染
1.v-if 和 v-show 如何選擇

如果頁面需要反復切換顯示和隱藏，用v-show。
如果頁面中有很多模塊需要隱藏，用戶可能只對其中的某個模塊感興趣，用v-if，
所有的模塊首屏加載時，全部都不渲染，當用戶選擇指定的模塊后，再渲染指定的模塊。

2. v-for指令，用于列表渲染；類型渲染時，通常都要綁定key，key的作用是提高渲染性能。
   注意：key必須是唯一，暫時可以將列表的索引作為key值去使用。