提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）

Vue代理学习数据 模型 2022 Data 两种
2023-09-14 09:07:25 时间

文章目录

1、el与data的两种写法

1.1、基础知识

data与el的2种写法

  • 1、el有2种写法
    (1)、new Vue时候配置el属性。
    (2)、先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

  • 2、data有2种写法
    (1)、对象式
    (2)、函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

  • 3、一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

1.2、代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div id="App">
        <h1>你好，{{name}}</h1>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //el的两种写法

        //第一种写法
        // new Vue({
        //     el: '#App',
        //     data: {
        //         value: "Vue"
        //     }
        // })

        //第二种写法
        // const vm = new Vue({
        //     data:{
        //         name:"VUE",
        //     }
        // })
        // vm.$mount('#App')  

        //data的两种写法
        new Vue({
            el:'#App',
            //第一种写法：对象式
            // data:{
            //     name:'ZYZ'
            // }

            //data的第二种写法：函数式
            data(){
                return {
                    name: 'zyz'
                }
            }
        })
    </script>

</body>

</html>

1.3、页面效果

在这里插入图片描述
在这里插入图片描述

2、MVVM模型

2.1、 基础知识

  • MVVM模型
    1、M：模型(Model) ：data中的数据
    2、V：视图(View) ：模板代码
    3、VM：视图模型(ViewModel)：Vue实例
  • 观察发现：
    1、data中所有的属性，最后都出现在了vm身上。
    2、vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
    在这里插入图片描述

2.2 、代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <h1>测试一下2：{{$options}}</h1>
        <!-- <h1>测试一下1：{{1+1}}</h1>
        
        <h1>测试一下3：{{$emit}}</h1>
        <h1>测试一下4：{{_c}}</h1> -->

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
       const vm =  new Vue({
            el: '#App',
            data: {
                name: "ZYZ",
                address: "CSDX"
            }
        })
        console.log(vm)
    </script>

</body>

</html>

2.3、页面效果

在这里插入图片描述

3、数据代理

3.1、 基础知识

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

3.2、 回顾Object.defineProperty方法

3.2.1、 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>


<body>
    <script type="text/javascript">
        let num = 24
        let person = {
            name: "张三",
            sex: "男",
        }

        Object.defineProperty(person, 'age', {
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get() {
                return num
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value) {
                num = value

            }
        })

        console.log(person)

    </script>

</body>

</html>

3.2.2、 测试结果

在这里插入图片描述

3.3、 何为数据代理

3.3.1 、代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
    <script type="text/javascript">
        let obj1 = { x: 10 }
        let obj2 = { y: 20 }

        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x;
            },
            set(value) {
                obj1.x = value

            }

        })

    </script>

</body>

</html>

3.3.2、测试结果

在这里插入图片描述

3.4、Vue中的数据代理

3.4.1、代码实例

z<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1>姓名：{{name}}</h1>
        <h1>年龄：{{age}}</h1>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                name: "ZYZ",
                age: 18
            }
        })
    </script>

</body>

</html>

3.4.2、测试结果

在这里插入图片描述
在这里插入图片描述

相关文章