一仙蚜、初始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>

2翔悠、引入vue.js文件

方式（1）引入本地vue.js文件

vue.js文件官網(wǎng)下載

    <!-- 開發(fā)版本 -->
    <script src="../js/vue.js"></script>
    <!-- 生產(chǎn)版本（打包上線時使用） -->
    <!-- <script src="../js/vue.min.js"></script> -->

方式（2）通過CDN引入

   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

3业崖、創(chuàng)建一個Vue對象

注意：初次使用vue，控制臺會有兩條提示蓄愁。

如果想去掉這兩條信息双炕，可以選擇安裝vue-devtools，引入生產(chǎn)版本的vue.js撮抓。
也可以使用以下代碼消除：

  // 不允許 vue-devtools 檢查代碼
  Vue.config.devtools = false
  // vue 在啟動時不顯示生產(chǎn)提示
  Vue.config.productionTip = false

創(chuàng)建一個Vue對象

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

4妇斤、效果

點擊修改按鈕

二、Vue的響應(yīng)式原理

1丹拯、代理對象的基本理解

        // （1）定義源對象obj1
        let obj1 = {
            name:'張三',
            age:20
        }
        // （2）定義代理對象obj2站超，代理源對象obj1
        let obj2 = obj1
        console.log('obj2:',obj2);
        // 代理對象修改了源對象的數(shù)據(jù)
        obj2.name = '李四'
        obj2.age = 30
        console.log(obj1);  // {name: "李四", age: 30}

2、vue的data和_data

        // （1）定義源對象
        let myData = {
            name: '張三',
            age: 20
        }
        let vm = new Vue({
            // （2）將源對象傳遞給Vue的data乖酬，背后做了兩件事
             // ① 設(shè)置Vue實例的_data屬性顷编，作為當(dāng)前源對象的代理對象。（響應(yīng)式的核心）
             // ② 將_data里面代理的所有數(shù)據(jù)剑刑，再添加到當(dāng)前Vue實例身上媳纬，也就是vm身上。（方便直接調(diào)用數(shù)據(jù)）
             data:myData
        })
        // 通過改變vue實例的屬性可以改變源對象的屬性值
        vm.name = '王五'
        vm.age = 40
        console.log(myData);  // {name: "王五", age: 40}

3施掏、給對象添加屬性的幾種方式

方式（1）使用點 .

        let obj3 = {}
        obj3.name = '張三'

方式（2）使用中括號 [ ]

        obj3['age'] = 20

方式（3）defineProperty方法

通過Object對象的defineProperty方法钮惠，給指定的對象添加指定的屬性。
使用這種方式七芭，給對象添加的屬性素挽，默認不可被枚舉，不能被刪除狸驳；對屬性的保護措施更加嚴謹预明。

   Object.defineProperty(obj3,'sex',{
       // 屬性值
       value:'男',
       // 允許被枚舉（默認不允許）
       enumerable:true,
       // 允許被刪除（默認不允許）
       configurable:true
   })
   // 枚舉出對象的所有屬性（其實就遍歷出對象的所有屬性名）
   // 如果sex屬性沒有設(shè)置允許被枚舉，就不能被枚舉
   for(let key in obj3){
       console.log(key);
   }
   // 通過delete關(guān)鍵耙箍，可以刪除對象身上的指定屬性
   delete obj3.name
   delete obj3.sex   // 如果sex屬性沒有設(shè)置允許被刪除撰糠，就不能被刪除

4、Vue響應(yīng)式的原理

    <div>
        <h2>姓名：<span id="name"></span></h2>
        <h2>年齡：<span id="age"></span></h2>
    </div>

        // （1）定義一個源對象
        let data = {
            name:'張三',
            age:20
        }
        //在頁面中辩昆，顯示姓名和年齡
        document.querySelector('#name').innerHTML = data.name
        document.querySelector('#age').innerHTML = data.age

        // （2）定義一個代理對象（使用_data 去代理 data）
        let _data = {}
        // （3）使用Object.defineProperty給代理對象添加屬性
        Object.defineProperty(_data,'name',{
            // get方法阅酪，用于返回屬性的值（當(dāng)我們調(diào)用name屬性獲取值時，會調(diào)用get方法）
            get(){
                // console.log('get方法執(zhí)行了');
                return data.name
            },
            // set方法汁针，用于設(shè)置屬性的值（當(dāng)我們調(diào)用name屬性設(shè)置值時术辐，會調(diào)用set方法）
            set(val){
                // console.log('set方法執(zhí)行了');
                data.name = val
                // 當(dāng)代理對象，監(jiān)聽到數(shù)據(jù)發(fā)生變化了施无，就會重新渲染頁面
                document.querySelector('#name').innerHTML = data.name
            }
        })
        Object.defineProperty(_data,'age',{
            get(){
                return data.age
            },
            set(val){
                data.age = val
                // 當(dāng)代理對象辉词，監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會重新渲染頁面
                document.querySelector('#age').innerHTML = data.age
            }
        })
       // 改變代理對象_data的數(shù)據(jù)猾骡，頁面會重新渲染
        _data.name = '李四'
        _data.age = 40

三瑞躺、Vue的常用指令

v-bind:用于綁定屬性敷搪，通過v-bind:綁定過的屬性，可以在屬性值可以寫表達式隘蝎。v-bind:可以用 : 簡寫购啄。
v-on:用于綁定事件，通過v-on:綁定過的事件嘱么，可以指定Vue實例定義的方法狮含。v-on:可以用 @ 簡寫。
v-model指令可以實現(xiàn)對數(shù)據(jù)的雙向綁定曼振。所謂雙向綁定指的是：數(shù)據(jù)發(fā)生變化重新渲染頁面几迄，頁面數(shù)據(jù)發(fā)生變化更新回數(shù)據(jù)。v-model指令是 v-bind:value 和 v-on:input 的簡寫冰评。

實現(xiàn)數(shù)據(jù)改變時映胁，文本框的值會隨之改變；輸入框文本改變時甲雅，數(shù)據(jù)也會隨之更改解孙。

 <div id="app">
    <div>
        <span>姓名：</span>
        <input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
    </div>
    <div>
        <span>年齡：</span>
        <!-- 如果事件方法的代碼不是很多，可以寫在行內(nèi)抛人。注意：這里不能寫this弛姜，返回的就是事件對象。 -->
        <input type="text" :value="age" @input="age = $event.target.value">{{age}}
    </div>
    <div>
        <span>工作：</span>
        <input type="text" v-model="job">{{job}}
    </div>
</div>

 <script>
        let vm = new Vue({
            el: '#app',
            //數(shù)據(jù)
            data: {
                name: '張三',
                age: 20,
                job:'程序員'
            },
            methods: {
                updateName(e){
                    //獲取文本框里面的內(nèi)容妖枚，更新數(shù)據(jù)
                    this.name = e.target.value
                }
            }
        })
 </script>

四廷臼、條件渲染和列表渲染

1、條件渲染

可以使用v-if 或者v-show實現(xiàn)條件渲染绝页。
★ v-if 和 v-show 如何選擇
① 如果頁面需要反復(fù)切換顯示和隱藏荠商，用v-show。
② 如果頁面中有很多模塊需要隱藏续誉，用戶可能只對其中的某個模塊感興趣莱没，用v-if。所有的模塊首屏加載時屈芜，全部都不渲染郊愧，當(dāng)用戶選擇指定的模塊后，再渲染指定的模塊井佑。

    <div id="app">
        <!-- 根據(jù)成績，顯示下面的等級 -->
        <h2 v-if="score>=90">優(yōu)秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=70">中等</h2>
        <h2 v-else-if="score>=60">合格</h2>
        <h2 v-else>差</h2>
        <hr>
        <button @click="isShow=!isShow">顯示/隱藏</button>
        <!-- 每次要根據(jù)isShow的值眠寿，確定是否渲染頁面 -->
        <div v-if="isShow">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428174908_sgsyj.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144539&t=de45197a8aa3bf884b08b791723e7ed0">
        </div>
        <hr>
        <!-- 模板已經(jīng)渲染成功躬翁，通過樣式控制顯示隱藏 -->
        <div v-show="isShow">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic40.nipic.com%2F20140428%2F9081536_114914525167_2.jpg&refer=http%3A%2F%2Fpic40.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144712&t=1261090ac684bf8e3c83f61ed012a2a7">
        </div>
    </div>

    <script>
        new Vue({
            el:'#app',
            //定義數(shù)據(jù)
            data:{
                score:55,
                isShow:false
            }
        })
    </script>

2、列表渲染

v-for指令：用于列表渲染盯拱；列表渲染時盒发，通常都要綁定key例嘱，key的作用是提高渲染性能。
注意：key必須是唯一宁舰，暫時可以將列表的索引作為key值去使用拼卵。

    <div id="app">
        <ul>
            <li v-for="(item,index) in foods" :key="index">{{index}}--{{item.name}}--{{item.price}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el:'#app',
            //定義數(shù)據(jù)
            data:{
                foods:[
                    {
                        id:1,
                        name:'薯片',
                        price:7.9
                    },
                    {
                        id:2,
                        name:'餅干',
                        price:3.9
                    },
                    {
                        id:3,
                        name:'面包',
                        price:9.9
                    },
                    {
                        id:4,
                        name:'蛋糕',
                        price:16.9
                    }
                ]
            }
        })
    </script>

五、小練習(xí)之輪播圖

    <div id="app">
        <img :src="imgs[showActive]" >
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                //顯示的下標
                showActive:0,
                //圖片數(shù)組
                imgs:["http://p1.music.126.net/7zAkp74zoKd0LuEuEP6dOg==/109951166645160829.jpg?imageView&quality=89",
                    "http://p1.music.126.net/pkXsmqmFQOehNkJYmehkng==/109951166646695577.jpg?imageView&quality=89",
                    "http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644891380.jpg?imageView&quality=89",
                    "http://p1.music.126.net/JMYet32O1mi6-YZ1GGSYcQ==/109951166646419732.jpg?imageView&quality=89",
                    "http://p1.music.126.net/WCX5Cq1z17Du2z0QBEcEaA==/109951166645933077.jpg?imageView&quality=89"]
            },
            // 生命周期函數(shù)（表示頁面掛載完成）
            mounted() {
                setInterval(() => {
                    this.showActive++
                    //如果下標越界蛮艰，重新從0開始
                    if(this.showActive>=5) this.showActive = 0
                }, 3000);
            },
        })
    </script>