VUE基本语法——模板和数据代理

目录

前言

模板语法

1、插值语法

2、指令语法

数据绑定

1、单向绑定（v-bind）

2、双向绑定（v-model）

数据代理

前置知识

数据代理的好处

数据代理基本原理

---

前言

前面我们了解了一下关于vue的内容，接下来我们会慢慢的来熟悉一下vue的基本语法与使用技巧。

模板语法

下面这些内容是我们vue官网对于模板语法的一些解释。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

模板语法主要是2个大类分别如下：

1、插值语法

插值语法是用来解析标签体的内容。

语法：{{abc}}  其中abc是js表达式，并且他是可以直接读取到我们data中的全部属性值的。

2、指令语法

用于解析标签的，其中包括了标签属性、标签体内容、绑定事件等等

比如：v-bind:href=“abc” 他还可以简写成  :href="abc"   这里的abc他是要写成js表达式的，并且他也是可以读取dta中国你的所有属性值的。

注意：vue他有很多很多指令，并且外在形式都是一样的：比如 v-xxx。我们这里试试拿v-bind作为代表来讲解的

数据绑定

数据绑定在我们日常开发中是经常用到的， 比如给某个div赋值或者动态更新某个a标签的href属性、还有动态修改该菜单数据等等，接下来我们看看数据绑定的2种形式

1、单向绑定（v-bind）

数据只能够从data中指向页面更改的一条线路。

2、双向绑定（v-model）

数据不仅能够从data中指向页面更改这一条线路，还能够从页面指向data这条线路，这就搞成了双向互相绑定的效果。

注意：1）、双向绑定是用在应用的表单类元素（例如：input、select等等）

           2）、v-model:value他是可以缩写成v-model.   

数据代理

数据代理就是通过一个对象的代理对另一个对象的属性进行读写操作。

换句话说的直白点就是通过修改我的属性来达到你的值改变的意图。

在vue中就是闲了通过vm对象去代理dta对象中的的属性的读写操作。

前置知识

Object.defineProperty()

他有三个参数，分别是：

1）、需要设置或者添加的属性的对象

2）、需要设置或者添加的属性的属性名

3）、需要配置的对象

方法配置中，还需要特别注意以下几点：

1）、enumerable:true  它是用来控制属性是否可以被枚举，他的默认值是false

2）、writable:true        他是用来控制属性是否可以被修改的指标，他的默认值是false

3）、configurable:true 他是用来控制属性是否可以被删除的，他的默认值是false

举个例子：

    // 此时往对象里添加属性，就可调用此方法
    Object.defineProperty(Student, 'age', {
        // 也就是getter方法：读取Student的age属性时，get函数就会被调用，且返回值就是age属性的值
        get:function(){
            return age;
        },
        // 也就是setter方法：修改Student的age属性时，set函数就会被调用，且会传入修改的值
        set:function(value){
            age = value;
        }
    })

数据代理的好处

数据代理可以为我们操作data中的数据提供了便利

数据代理基本原理

其实就是前面所属的前置知识中的的Object.defineProperty(),他把data对象中的所有的属性添加到了vm身上。然后在位我们每个添加vm身上的属性，像java类中为每个属性指定定了了一个getter和setter方法一样，为其添加了getter和setter方法。最终实现通过getter和setter内部来操完成读写操作，使得data来完成对应的操作。