Vue中數據代理、數據綁定、數據監測

Vue模版語法有2大類：

1、插值語法

　　功能：用于解析標簽內容

　　寫法：{{xxx}}，xxx是js表達式，且可以自動讀取到data中所有屬性

2、指令語法

　　功能：用于解析標簽（包括：標簽屬性、標簽體內容、綁定事件...）

　　舉例：v-bind:href="xxx"或簡寫為 :href="xxx",xxx同樣要寫js表達式，且可以直接讀取到data中的數據

　　備注：Vue中有很多指令，且形式都是：v-???，此處只是拿v-bind舉個例子

Object.defineProperty方法（es6的知識點），以下示例代碼是實現了：number和person.age的聯動，修改了number，person.age會自動被修改

<script type="text/javascript" >
    let number = 18
    let person = {
        name:'張三',
        sex:'男'
    }
    Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true, //控制屬性是否可以枚舉，默認值是false
        // writable:true, //控制屬性是否可以被修改，默認值是false
        // configurable:true //控制屬性是否可以被刪除，默認值是false

        //當讀取person的age屬性時，get函數(getter)就會被調用，且返回值就是age的值
        get(){
            console.log('有人讀取age屬性了')
            return number
        },

        //當修改person的age屬性時，set函數(setter)就會被調用，且會收到修改的具體值
        set(value){
            console.log('有人修改了age屬性，且值是',value)
            number = value
        }
    })
    console.log(Object.keys(person))
    console.log(person)
</script>

數據代理：就是通過一個對象代理對另一個對象中屬性的操作（讀/寫）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue中的數據代理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
                1.Vue中的數據代理：
                            通過vm對象來代理data對象中屬性的操作（讀/寫）
                2.Vue中數據代理的好處：
                            更加方便的操作data中的數據
                3.基本原理：
                            通過Object.defineProperty()把data對象中所有屬性添加到vm上。
                            為每一個添加到vm上的屬性，都指定一個getter/setter。
                            在getter/setter內部去操作（讀/寫）data中對應的屬性。
         -->
        <!-- 準備好一個容器-->
        <div id="root">
            <h2>學校名稱：{{name}}</h2>
            <h2>學校地址：{{address}}</h2>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
        
        const vm = new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                address:'宏?？萍紙@'
            }
        })
    </script>
</html>

posted @ 2023-12-21 21:16 喻聰閱讀(55) 評論(0) 收藏舉報

刷新頁面返回頂部

喻聰

臨淵羨魚，不如退而結網

Vue中數據代理、數據綁定、數據監測

公告

喻聰

臨淵羨魚，不如退而結網

Vue中數據代理、數據綁定、數據監測

公告

Vue中數據代理、數據綁定、數據監測