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、测试结果


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

  1. Vue el与data的两种写法 && Object.defineProperty方法

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. iOS中表视图单元格事件用nib和storyboard的两种写法总结

    从ios6开始,苹果公司推出了storyborad技术取代了nib的写法,这样代码量确实少写了很多,也比较简洁.但是,从学习的角度来说,阿堂认为 用nib的写法,虽然多了些代码,但是对于掌握知识和原理 ...

  3. ThinkPHP中Widget的两种写法及调用

    Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...

  4. 关于MyBatis的两种写法

    刚接触MyBatis是在Jike的视频中学习的,但是之后又发现和项目中的MyBatis的用法不太一致.上网找了好多资料,发现网上的教程分为两种写法: 第一种,是jike视频中的写法,写好map.xml ...

  5. OpenGL坐标变换及其数学原理，两种摄像机交互模型（附源程序）

    实验平台:win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): a.鼠标拖拽旋转物体,类似于OGRE中的“OgreBites::CameraStyle: ...

  6. ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法

    ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法 语法 第一种: 通过使用Oracle语句块  --指定文档所有部门都能查看 declare cursor TABLE_DEPT and ...

  7. EF架构~linq模拟left join的两种写法,性能差之千里!

    回到目录 对于SQL左外连接我想没什么可说的,left join将左表数据都获出来,右表数据如果在左表中不存在,结果为NULL,而对于LINQ来说,要实现left join的效果,也是可以的,在进行j ...

  8. 运算符关键字。数据区别大小写。日期范围。判空的两种写法。NOT IN的两种写法。IN范围可含NULL,但NOT IN值范围不能含NULL。

    比较:>,<,=,>=,<=,<>(!=) 逻辑:AND,OR,NOT 范围:BETWEEN...AND... 范围:IN,NOT IN 判空:IS NULL, I ...

  9. 快速排序partition过程常见的两种写法+快速排序非递归实现

    这里不详细说明快速排序的原理,具体可参考here 快速排序主要是partition的过程,partition最常用有以下两种写法 第一种: int mypartition(vector<int& ...

随机推荐

  1. openstack 安装neutron网络服务安装 报错：Unknown operation 'enabled'

     注:这个脚本文件有一个地方是错误的,最后一行需要修改一下 # vim /usr/local/bin/iass-install-neutron-controller-gre.sh # 改systemc ...

  2. java学习第三天常用类.day11

    工具类如何设计,在开发中有两种设计: 工具方法:静态方法的使用 非静态的方法使用: 使用单列模式,为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 保证在整个应用中某一个类有且只有一个实例(一 ...

  3. Fiddler抓包工具下载安装及使用

    一.Fiddler简介 简介: Fiddler是一款强大的Web调试工具,他能记录所有客户端和服务器的HTTP/HTTPS请求 工作原理: Fiddler是以代理web服务器的形式工作的,它使用代理地 ...

  4. Flutter 实战（一）：列表项内容可自定义的列表组件

    前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...

  5. 给ShardingSphere提了个PR，不知道是不是嫌弃我

    说来惭愧,干了 10 来年程序员,还没有给开源做过任何贡献,以前只知道嘎嘎写,出了问题嘎嘎改,从来没想过提个 PR 去修复他,最近碰到个问题,发现挺简单的,就随手提了个 PR 过去. 问题 问题挺简单 ...

  6. CF-1675D. Vertical Paths

    题意:每次可以选择一条路径,要求这条路径中每个点都是上一个点的子节点,求最少需要几条路径将所有点走完 思路:将每个点有没有子节点判断出来,因为只有没有子节点的点需要新增一条路,所以需要路径的最小数目就 ...

  7. TCP/UDP报文格式

    TCP报文格式 源端口:数据发送方的端口号 目的端口:数据接收方的端口号 序号:本数据报文中的第一个字节的序号(在数据流中每个字节都对应一个序号) 确认号:希望收到的下一个数据报文中的第一个字节的序号 ...

  8. MySQL插入重复数据

    MySQL中批量insert into时防止更新插入重复数据去重的方法,主要是讲到了ignore,Replace,ON DUPLICATE KEY UPDATE三种方法 方案一:使用ignore关键字 ...

  9. Linux之如何配置IPV6网络

    配置IPV6地址小笔记 #例题: 1)为server添加一个IPv6地址fd00:ba5e:ba11:10::10/64: 2)为client添加一个IPv6地址fd00:ba5e:ba11:10:: ...

  10. Jenkins JNLP方式启动 Agent

    Jenkins Server配置 如果你是通过Nginx代理了jenkins,那么需要调整下Nginx的配置 map $http_upgrade $connection_upgrade { defau ...