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

目录

el和data的两种写法

el的两种写法

data的两种写法

 data与el的写法小结

MVVM模型

 MVVM模型小结

---

el和data的两种写法

el的两种写法

hello,{{name}}

data的两种写法

简写成 

    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对象中有的数据都可以展示出

    {{name}},{{age}}

    测试1：{{$createElement}}

 MVVM模型小结

MVVM模型

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

观察发现：

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