Vue中el和data的写法与 MVVM模型

el和data的两种写法

el的两种写法


 
<body>
<div id="root">
hello,{{name}}
 
div>
 
<script type="text/javascript">
  const vm= new Vue({
     //  el:"#root",//el第一种写法
       data:{
           name:"孔超1"
       }
    })
   console.log(vm)//打印输出到网页控制台
vm.$mount("#root")//第二种写法
script>
body>

data的两种写法


 
<script type="text/javascript">
    const vm= new Vue({
        el:"#root",
        //data第一种写法 对象式
      /*  data:{
            name:"孔超1"
        } */
        
    data:function(){ //data的第二种写法 函数式
        return {
            name:"孔超2"
        }
    }
    } );
    console.log(vm)//打印输出到网页控制台
 
script>

简写成


    data(){ //data的第二种写法
        return {
            name:"孔超2"
        }
    }

data与el的写法小结

1.el有两种写法

new Vue时配置el属性el："#root"
先创建Vue实例，随后在通过vm.$mount('#root')指定el的值。

2、data有两种写法

对象式
函数式

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

3、一个重要的原则：

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

MVVM模型

1、M: 模型（Model）：对应data中的数据

2、V: 视图（View）：模版

3、VM：视图模型（ViewModel）：Vue实例对象

只要是vm对象中有的数据都可以展示出


<div id="root">
    {{name}},{{age}}<br>
    测试1：{{$createElement}}
div>
 
 
<script>
  const vm= new Vue({
        el:'#root',
        data:{
            name:'数据',
            age:"17"
        }
 
    });
console.log(vm)
 
script>

MVVM模型小结

MVVM模型

1、M: 模型（Model）：对应data中的数据
2、V: 视图（View）：模版
3、VM：视图模型（ViewModel）：Vue实例对象

观察发现：

1、data中的所有属性，最后都出现在vm中
2、vm身上所有的属性以及Vue原型上的所有属性，在Vue模版中都可以直接使用

相关阅读:
经济师报考专业选择及难度分析！这三个专业每年报考人数超10万！
开始在 Windows 上使用 Python（初学者）
排序算法：堆排序
今日绘画关键词分享
react-redux开发者工具的使用
批量手机号码归属地查询工具
adb 连接机顶盒命令
HFSS脚本建模入门
容器部署的openstack进入数据库流程、查看install目录流程、容器部署使用virsh命令流程【查看计算节点上的虚拟机信息】
学习自旋电子学的笔记07：根据微磁学基本能量密度公式推导有效场

原文地址：https://blog.csdn.net/weixin_60719453/article/details/128049102