详解Vue2基本语法第一弹

与Vue的第一次相识

1、想让vue工作，就必须创建一个vue实例，且要传入一个配置对象

• el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串

• data中用于存储数据，数据供el指定的容器去使用

let vm = new Vue({
    el:"#root",
    data:{
        a:1                
    }
})

2、容器内的代码依然符合html规范，只不过混入例如一些特殊的vue语法

3、容器内的代码被叫做vue模板

4、vue实例和容器是一一对应的

5、真实开发中只有一个vue实例，并且会配合着组件使用

6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

注意区分：js表达式与js语句

    1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

    2、js代码（语句）

vue模板语法

1、插值语法

• 功能：用于解析标签体内容

• 写法：{{xxx}}，xxx是js表达式，且可以是直接读取到data中的所有属性

<div>{{a}}</div>

2、指令语法

• 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件）

• 举例：v-bind:href="xxx"或简写为 :href="xxx"

• 且可以直接读取到data中的所有属性

• 备注：vue中有很多的指令，且形式都是：v-???

<a v-bind:href="xxx"></a>

或<a :href="xxx"></a>

vue数据绑定的方式

1、单向绑定（v-bind）：数据只能从data流向页面

2、双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

备注：

• 双向绑定一般都应用在表单类元素上

• v-model:value可以简写为v-model,因为v-model默认收集的就是val

data与el的两种写法

el有两种写法：

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

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

data有两种写法：

（1）对象式

（2）函数式

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

一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是vue实例了

数据代理

1、vue中的数据代理

通过vm对象来代理data对象中的属性（读/写）

2、vue中数据代理的好处

更加方便的操作data中的数据

3、基本原理

• 通过Object.defineProperty()把data对象中的所有属性添加到vm上

• 为每个添加到vm上的属性都指定一个getter和setter

• 在getter/setter内部去操作（读/写）data中对应的属性

计算属性(computed)

1、定义

要用的属性不存在，要通过已有属性计算得来

2、原理

底层借助了Object.defineProperty方法提供的getter和setter

3、get函数什么时候执行

（1）初次读取时执行一次

（2）当依赖的数据发生改变时会被再次调用

4、优势

与methods实现相比，内部有缓存机制（复用）,效率更高，调试方便

5、备注

• 计算属性最终会出现在vm上，直接读取即可

• 如果计算属性要被修改，那必须写set函数去响应修改，且set要引起计算时依赖的数据发生改变

监视属性(watch)

1、当被监视的属性变化时，回调函数自动调用，进行相关操作

2、监视的属性必须存在，才能进行监视

3、监视的两种写法

（1）new.Vue时传入watch配置

（2）通过vm.$watch监视

例子：

watch:{
    xxx:{
        immediate:true,//初始化时让handler调用一下
        handler(newValue,oldValue){
                }
            }
        }

深度监视

（1）vue中watch默认不监视对象内部值的改变（一层）

（2）配置deep:true可以监视对象内部值的改变（多层）

备注

（1）vue自身可以监视对象内部值的改变，但vue提供的watch默认不可以

（2）使用watch时根据数据的具体结构，决定是否使用深度监视

computed与watch的区别

1、computed所完成的功能，watch也可以完成

2、watch能完成的功能，computed不一定能够完成，如watch可以进行异步操作

两个重要的原则

1、所被vue管理的函数，最好写成普通函数

2、所有不被vue管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数 这样this的指向才是vm或组件实例对象