el与data的两种写法&&数据绑定&&MVVM模型

一、el与data的两种写法

1.el的两种写法

        （1）.new  Vue时候配置el属性

        （2）.先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

​

    

        
你好，{{name}}
    
    

​

    2.data的两种写法

        （1）.对象式

        （2）.函数式

    
    

        
你好，{{name}}
    
    

        如何选择：学习Vue组件时，data必须使用函数式，否则会报错

 注意：由于Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了

控制台输出，此处的this对象是Vue实例。

二、数据绑定

vue中有两种数据绑定的方式：

    1.单向绑定(v-bind)：数据只能从data流向页面

    2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

备注：

        1.双向绑定一般都应用在表单类元素上（如：input、select等）

        2.v-model:value  可以简写为 v-model  因为v-model默认收集的就是value值

    

        
        

        
        单向数据绑定： 
 双向数据绑定：
        
        
    
    

效果图如下：

 三、MVVM模型

1. M：模型(Model)：对应data中的数据

2. V：视图(View)：模板

3. VM：视图模型(ViewModel)：Vue实例对象

 注意：

1. data中所有属性的代码，最后都出现在了vm身上

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