从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理

root容器里的代码被称为模板，有了模板会有特殊的模板语法。Vue模板中语法有两大类，一类是插值语法，另一类是指令语法。

插值语法

功能：用于解析标签体内容。写法：{{xxx}}，xxx为js表达式，且可以直接读取到data中的所有属性。

由两个大括号引用Vue实例中定义的data数据，在Vue实例进行解析扫描时会检查到他的模板语法，从而根据模板语法继续宁解析，后形成正常的html片段执行。下面代码页面会显示                你好，jack。

    
    

        
插值语法
        
你好，{{name}}
    

    

指令语法 v-bind

作用：用于解析标签（标签属性、标签体内容、标签体内容、绑定事件...）。

v-bind: 单向绑定，添加v-bind指令，后面的属性会被当做js表达式去执行。v-bind可以动态的给所有标签属性去绑定值。        简写形式：可以简写为冒号 “:”  。 插值语法往往指定标签体内容，

如果data中的key重复，可以在data中以层级关系定义。下面name重复，我们可以将其中一个name定义到下一个层级，避免重复引起冲突。如果重复，则会以最后定义的属性为准。

    
    

        
插值语法
        
你好，{{ name }}
        

        
指令语法
        点我去{{ school.name }}学习1
    

    

数据绑定

单向数据绑定：通过v-bind绑定的数据只会与data中定义的数据进行同步，如果修改页面中的数据则不会改变原本的数据。数据仅能从data流向页面。

双向数据绑定：通过v-model:value，可以双向修改。v-model只能应用在输入类元素中，因为需要用户输入数据进行交互。简写为v-mode。

    
    

        单向数据绑定：

        双向数据绑定：
    

    

解析流程：容器中所写的模板交给vue实例，通过vue实例对语法的解析后，将其挂载（放到）到页面的指定位置。

el与data的两种写法

第一种方法，普通写法。

    
    

        
hello, {{ name }}
    

    
    

第二种写法，函数式挂载，容器中所写的模板交给vue实例，通过vue实例对语法的解析后，将其挂载（放到）到页面的指定位置。

    
    

        
hello, {{ name }}
    

    
    

MVVM模型

VM负责V与M中数据传递与解析的工作，也就是前面说了很多次的流程。容器中所写的模板交给vue实例，通过vue实例对语法的解析后，将其挂载（放到）到页面的指定位置。

数据代理

Object.defineProperty方法回顾

该方法可以为一个对象添加属性，如果一个对象person中有两个属性分别为name与age，那么我们可以使用这个方法在对象中添加一个新的属性sex。

       let person = {
            name: '孙笑川',
            age: '38'
        }

        Object.defineProperty(person, 'sex', {
            value: '男', // sex属性不可被枚举 不能被添加遍历
            enumerable: true,    // 默认为false不可枚举 true表示可被枚举但不可以在网页控制台修改
            writable: true,      // 可被控制台修改数据，默认为false
            configurable: true      // 控制属性是否可以被删除 默认为false
            }

        })

这样添加console.log(person)后，可以在网页中查找到崭新的属性sex，但是不能被修改。这个时候我们需要拿出get和set方法来完成对属性数据的查找和修改。

这样我们就可以通过obj2来操作obj1里的x属性了。

 

 Vue中的数据代理