从零学习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,      // 可被控制台修改数据，默认为falseconfigurable: 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中的数据代理