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

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

插值语法

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

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

    <!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: 'jack'
            }
        })
    </script>

指令语法 v-bind

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

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

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

    <!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{ name }}</h3>
        <hr>
        <h1>指令语法</h1>
        <a :href='school.url'>点我去{{ school.name }}学习1</a>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: 'jack',
                school: {
                    name: 'biadu',
                    url: 'http://www.baidu.com'
                }
            }
        })
    </script>

数据绑定

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

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

    <!-- 创建一个容器 -->
    <div id="root">
        单向数据绑定：<input type="text" :value="msg1"><br>
        双向数据绑定：<input type="text" v-model="msg2">
    </div>

    <script type="text/javascript">
        new new Vue({
            el: '#root',
            data: {
                msg1: '单向数据绑定',
                msg2: '双向数据绑定'
            }
        })
    </script>

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

el与data的两种写法

第一种方法，普通写法。

    <!-- 创建一个容器 -->
    <div id="root">
        <h1>hello, {{ name }}</h1>
    </div>

    <!-- el两种写法 -->
    <script type="text/javascript">
        new Vue({
             el: '#root', // el第一钟方法

             data: {  // data第一种写法 对象式
                 name: '世界'
             }
        })
    </script>

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

    <!-- 创建一个容器 -->
    <div id="root">
        <h1>hello, {{ name }}</h1>
    </div>

    <!-- el两种写法 -->
    <script type="text/javascript">
        const v = new Vue({
            data:function() {   // data第二种写法 函数式
                return {
                    name: 'shijie'
                }
            }
        })
        console.log(v)
        v.$mount('#root')   // el第二种方法   mount - 挂载、镶嵌                   
    </script>

MVVM模型

    <!-- 
        M:模型(Model) - 对应data中的数据
        V:视图(View) - 模板
        VM:视图模型(ViewModel) - Vue实例对象
     -->

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方法来完成对属性数据的查找和修改。

    <script type="text/javascript">
        let msg = '孙狗'
        let person = {
            name: '孙笑川',
            age: '38'
        }

        Object.defineProperty(person, 'sex', {
            // 当有人读取person的sex属性时，get函数（getter）就会被调用，且return就是sex的值。
            get:function() {
                return msg
            },
            // 当有人修改person的sex属性时，set函数（setter）就会被调用，且会受到修改的具体值。
            set(value) {
                msg = value
            }

        })

        console.log(person)     // {name: '孙笑川', age: '38', sex: '男'}
        console.log(Object.keys(person))    // 遍历  ['name', 'age']    无sex的key

 

 这样的话我们就可以修改并得到数据的具体信息了。

数据代理

通过一个对象代理对另一个对象中的属性进行操作。（读/写）

    <script type="text/javascript">
        let obj1 = {x:100}
        let obj2 = {y:200}
        
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x
            },
            set(value) {
                obj1.x = value
            }
        })

        console.log(obj1)
        console.log(obj2)
    </script>

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

 

 Vue中的数据代理