Vue基础：数据双向绑定，计算，监视

一、模板语法

1.插值语法：双大括号表达式：{

{ }}

功能：用于解析文本内容
语法：{

{xxx}}，xxx会作为

js表达式

来进行解析

2.指令语法：以v-开头

功能：解析标签属性、解析标签体内容、绑定事件
语法：v-xxx=“yyy”，xxx为vue中的指令，yyy作为

js表达式

解析

二、数据绑定

1.MVVM模型

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

2.单向数据绑定

语法：v-bind：href=“xxx” v-bind：可以简写为：
特点：数据只能从data流向页面，也就是只能从model影响到view，无法从view影响到model

3.双向数据绑定

语法：v-model：value=“xxx” 因为v-model只能绑定value属性的值，所以可以直接写为 v-model=“xxx”
特点：

数据不仅能从 data 流向页面，还能从页面流向 data，也就是model与view之间可以互相影响

三、事件处理

1.事件的基本使用

语法：v-on：事件名称=“fun(参数)”

简写：@事件名称=”fun(参数)”
参数：默认形参为event，隐藏形参为$event

2.事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
.once : 使事件只执行一次
.self：使event.target是当前操作元素的时候才执行
.capture：使事件在捕获阶段就执行

备注

：修饰符可以连着写

例：阻止时间默认行为同时阻止冒泡

<a href="http://www.baidu.com" @click.prevent.stop="showInfo"></a>

3.按键修饰符

keycode : 操作的是某个 keycode 值的键
.keyName : 操作的某个按键名的键(少部分)
按键别名：

enter：回车

delete：删除

esc：退出

tab：换行必须配和keydown使用

space：空格

up down left right 上下左右

按键别名可以自己设定：
```
Vue.config.keyCodes.name=13    自己命名一个别名按键
```

4.系统修饰符

系统修饰符： ctrl，alt，shift，meta

备注

： 1. 配和keyup使用时，必须再按下另外一个键，然后抬起另外一个键，才可以可以使用ctrl.y来固定另外一个键

2. 配和keydown正常

四、计算属性与监视

1.计算属性：computed

定义：需要的属性不存在，通过已有的属性计算得出

优势：有缓存，可存放利用，效率更高，调试方便
备注：直接读取目标属性就可，如果要修改数据，需要使用set方法

语法：正常情况：get，set同时调用

computed:{
                fullName:{
                    get(){
                        return this.firstName +'-'+ this.lastName
                    },
                    set(value){
                        var arr=value.split('-')
                        this.firstName=arr[0]
                        this.lastName=arr[1]
                    }
                }
            }

简写形式：只调用get方法

            computed:{
                fullName(){
                        return this.firstName +'-'+ this.lastName
                    }
                }

get：

作用：当fullName被读取时，它就被调用
什么时候被调用：1.fullName初次出现时

2.它所依赖的数据发生变化时

set：

当fullName被修改时调用

注意：get可以理解为单向数据绑定，而set则是双向数据绑定

2.监视属性：watch

作用：监视数据的改变，

当属性变化时, 回调函数自动调用, 在函数内部进行计算

语法：1.在vue实例中，使用watch

watch:{
                isHot:{
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue);
                    }
                }
            }

2.使用$watch进行调用

vm.$watch('isHot',{
             handler(newValue,oldValue){
             console.log(newValue,oldValue)
             }
        })

深度监视：监视多级结构中所有属性的变化

vue中的watch默认不监视对象中内部值的改变

配置deep:true可以监测对象中所有值的改变

当只使用handler不使用别的属性时可以简写：

1.在vue实例中，使用watch

watch:{
isHot(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
}