data和el的两种写法和MVVM模型

最新推荐文章于 2024-09-27 13:58:28 发布

GUO_0011

最新推荐文章于 2024-09-27 13:58:28 发布

阅读量83

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/GUO_0011/article/details/126823430

版权

1.data和el的两种写法
1.el有两种写法

(1) 配置el:属性

(2) 创建vue实例，随后在通过v.$mount('.root')制定el的值

注意 el两种方法用哪一种都可以当设置定时器的话第二种会方便一点

2.data有两种写法

(1)对象式

(2)函数式

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

3.一个重要的原则：

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

<body>
    <div class="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script>
    const v = new Vue({
            el: '.root', // el第一种写法
            // data: {        //data第一种写法
            //     name: '张三' 
            // }
            data: function() { //简写data(){}   //data的第二种写法
                return {
                    name: '张三'
                }
            }
        })
        // v.$mount('.root') //el第二种写法
 
    // setTimeout(() => {
 
    // el: '.root'   第一种写法
 
    // }, 1000)// v.$mount('.root')
</script>

2.MVVM模型
MVVM模型

1.M:模型(MOdel):data中的数据

2.V:视图(View):模板代码

3.VM:视图模型(ViewModel):实例

观察发现：

1.data中所有的属性，最后的出现在了vue身上

2.vm身上所有的属性及 Vue原型上所有属性，有Vue模板都可以直接使用

<body>
    <div class="root">
        <!-- View 相当于DOM(页面) -->
        <!-- //快递到手 -->
        <h1>你好，{{name}}</h1>
        <h1>测试1,{{_c }}</h1>
        <h1>测试2,{{$scopedSlots}}</h1>
    </div>
</body>
<script>
    const aa = new Vue({ // Vue相当于中转站  快递站
        el: '.root',
        data: { //MOdel(模型)对应data中的数据  快递
            name: '张三'
        }
    })
    console.log(aa);
</script>