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);
                }
}

2.使用$watch进行调用 

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