VUE数据代理

听风吹麦浪

已于 2024-03-18 21:45:11 修改

阅读量334

点赞数 10

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2024-03-05 22:50:48 首次发布

本文链接：https://blog.csdn.net/qq_51550150/article/details/136492313

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

MVVM模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
 
    <div id="root">
        <h1>{{name}}</h1>
        <h1>测试一下1：{{1+1}}</h1>
        <h2>测试一下2：{{$options}}</h2>
    </div>
</body>
<!-- 
Vue在一定程度上参考了MVVM模型；
M：模型(Model):对应data中的数据
V：试图(View):模板
VM：视图(ViewModel):Vue实例对象

观察发现：
1.data中所有的属性，最后都出现在vm上（vue实例）；
2.vm身上所有的属性 及 Vue原型上的所有属性，在Vue模板中都可以直接使用。

-->

<script type="text/javascript">
    Vue.config.productionTip = false//阻止.vue在启动时生成生产提示。
    const vm = new Vue({
        
        data(){
            console.log('@@@@',this)//此处的this是Vue实例对象
            return{
                name:'尚硅谷',
                address:'北京'
                
            }
        }     
    })
    console.log(vm)//此处的v是Vue实例对象
    vm.$mount('#root')//第二种写法 mount：挂载
</script>
</html>

何为数据代理

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>何为数据代理</title>
    </head>
    <body>
        <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作(读/写) -->
        <script type="text/javascript">
            let obj = {x:100}
            let obj2 = {y:200}
            Object.defineProperty(obj2,'x',{
                get(){
                    return obj.x
                },
                set(value){
                    obj.x = value
                }
            })
        </script>
    </body>
</html>

回顾Object.defineProperty方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <script type="text/javascript">
        let num = 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(person)
        for (let key in person){
            console.log('@@@',person[key])
        }
    </script>
    
</body>

</html>

Vue中的数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id = "root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    let data ={
            name:'尚硅谷',
            address:'宏福科技园'
    }
    const vm = new Vue({
        el:'#root',
        data
    })
</script>



</html>



<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id = "root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    const mv = new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            address:'宏福科技园'
        }
    })
</script>



</html> -->