Vue——初始Vue & Vue的響應(yīng)式原理 & Vue常用指令 & 條件渲染和列表渲染

一、初始Vue

1、準(zhǔn)備一個(gè)容器

    <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)版本（打包上線時(shí)使用） -->
    <!-- <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)建一個(gè)Vue對(duì)象

注意：初次使用vue，控制臺(tái)會(huì)有兩條提示。

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

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

創(chuàng)建一個(gè)Vue對(duì)象

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

4、效果

點(diǎn)擊修改按鈕

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

1、代理對(duì)象的基本理解

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

2、vue的data和_data

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

3、給對(duì)象添加屬性的幾種方式

方式（1）使用點(diǎn) .

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

方式（2）使用中括號(hào) [ ]

        obj3['age'] = 20

方式（3）defineProperty方法

通過Object對(duì)象的defineProperty方法，給指定的對(duì)象添加指定的屬性。
使用這種方式，給對(duì)象添加的屬性，默認(rèn)不可被枚舉，不能被刪除；對(duì)屬性的保護(hù)措施更加嚴(yán)謹(jǐn)。

   Object.defineProperty(obj3,'sex',{
       // 屬性值
       value:'男',
       // 允許被枚舉（默認(rèn)不允許）
       enumerable:true,
       // 允許被刪除（默認(rèn)不允許）
       configurable:true
   })
   // 枚舉出對(duì)象的所有屬性（其實(shí)就遍歷出對(duì)象的所有屬性名）
   // 如果sex屬性沒有設(shè)置允許被枚舉，就不能被枚舉
   for(let key in obj3){
       console.log(key);
   }
   // 通過delete關(guān)鍵，可以刪除對(duì)象身上的指定屬性
   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）定義一個(gè)源對(duì)象
        let data = {
            name:'張三',
            age:20
        }
        //在頁面中，顯示姓名和年齡
        document.querySelector('#name').innerHTML = data.name
        document.querySelector('#age').innerHTML = data.age

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

三、Vue的常用指令

v-bind:用于綁定屬性，通過v-bind:綁定過的屬性，可以在屬性值可以寫表達(dá)式。v-bind:可以用 : 簡寫。
v-on:用于綁定事件，通過v-on:綁定過的事件，可以指定Vue實(shí)例定義的方法。v-on:可以用 @ 簡寫。
v-model指令可以實(shí)現(xiàn)對(duì)數(shù)據(jù)的雙向綁定。所謂雙向綁定指的是：數(shù)據(jù)發(fā)生變化重新渲染頁面，頁面數(shù)據(jù)發(fā)生變化更新回?cái)?shù)據(jù)。v-model指令是 v-bind:value 和 v-on:input 的簡寫。

實(shí)現(xiàn)數(shù)據(jù)改變時(shí)，文本框的值會(huì)隨之改變；輸入框文本改變時(shí)，數(shù)據(jù)也會(huì)隨之更改。

 <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，返回的就是事件對(duì)象。 -->
        <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實(shí)現(xiàn)條件渲染。
★ v-if 和 v-show 如何選擇
① 如果頁面需要反復(fù)切換顯示和隱藏，用v-show。
② 如果頁面中有很多模塊需要隱藏，用戶可能只對(duì)其中的某個(gè)模塊感興趣，用v-if。所有的模塊首屏加載時(shí)，全部都不渲染，當(dāng)用戶選擇指定的模塊后，再渲染指定的模塊。

    <div id="app">
        <!-- 根據(jù)成績，顯示下面的等級(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指令：用于列表渲染；列表渲染時(shí)，通常都要綁定key，key的作用是提高渲染性能。
注意：key必須是唯一，暫時(shí)可以將列表的索引作為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:{
                //顯示的下標(biāo)
                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++
                    //如果下標(biāo)越界，重新從0開始
                    if(this.showActive>=5) this.showActive = 0
                }, 3000);
            },
        })
    </script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容