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. 移动端实现HTML5 mp3录音踩坑指南：系统播放音量变小、一些机型录音断断续续 之 MediaRecorder和AudioWorklet的终极对决

    目录 H5录音见坑填坑 采用MediaRecorder采集音频 音频格式:WebM和PCM 从WebM封装容器中提取PCM数据 录音的兼容性 困扰已久的H5录音时系统播放音量变小的问题 H5录音见坑填 ...

  2. Slf4j的MDC初尝试

    为什么会用到MDC? 本人使用Java两年时间,鉴于经验有限,在开发java后端代码过程中,为了定位问题,希望同一个线程的requestId可以从web层的日志一直输出到dao层,这样使用Linux命 ...

  3. Vue3 Transition 过渡效果之基于 CSS 过渡

    介绍 Transistion 路由组件的切换.动态组件的切换.v-if 条件渲染组件以及 v-show 显示组件原本是没有任何过渡(CSS 动画)效果的.然而,Vue 的内置组件<Transit ...

  4. centos7.6内核之cfs_bandwidth下的distribute_cfs_runtime hard lockup

    接到业务兄弟报障,出现多例crash,堆栈大多数如下: KERNEL: /usr/lib/debug/lib/modules/3.10.0-957.27.2.el7.x86_64/vmlinuxDUM ...

  5. 【美国血统 American Heritage 题解】已知前序中序 求后序

    题目: 题目名称:美国血统 American Heritage 题目来源:美国血统 American Heritage ## 题目描述 农夫约翰非常认真地对待他的奶牛们的血统.然而他不是一个真正优秀的 ...

  6. 这12款idea插件，能让你代码飞起来

    前言 基本上每个程序员都会写代码,但写代码的速度不尽相同. 为什么有些人,一天只能写几百行代码? 而有些人,一天可以写几千行代码? 有没有办法,可以提升开发效率,在相同的时间内,写出更多的代码呢? 今 ...

  7. C++工厂方法模式讲解和代码示例

    在C++中使用模式 使用示例: 工厂方法模式在 C++ 代码中得到了广泛使用. 当你需要在代码中提供高层次的灵活性时, 该模式会非常实用. 识别方法: 工厂方法可通过构建方法来识别, 它会创建具体类的 ...

  8. java8 新特性 -Optional的常见用法

    1. Optional 一. 简介 Opitonal是java8引入的一个新类,目的是为了解决空指针异常问题.本质上,这是一个包含有可选值的包装类,这意味着 Optional 类既可以含有对象也可以为 ...

  9. [机器学习]-分类问题常用评价指标、混淆矩阵及ROC曲线绘制方法

    分类问题 分类问题是人工智能领域中最常见的一类问题之一,掌握合适的评价指标,对模型进行恰当的评价,是至关重要的. 同样地,分割问题是像素级别的分类,除了mAcc.mIoU之外,也可以采用分类问题的一些 ...

  10. 亚马逊云科技现身世界人工智能大会，揭示AI最新技术趋势

    2022世界人工智能大会(WAIC)于日前落幕.经过过去四届的发展与沉淀,今天的世界人工智能大会已成为人工智能领域最有影响力的国际盛会之一,今年大咖云集.国际大厂扎堆,充分彰显了大会的国际影响力和磁力 ...