Vue计算属性computed、v-model、侦听器watch

1）计算属性computed：解决在模板中放入太多的逻辑会让模板过重且难以维护的问题

• computed:{fn1(){return 123},fn2(){return 456 }}

• 把计算属性当变量使用，变量值就是 fn1,fn2 函数的返回值(fn1 和 fn2 后面不能加括号)

<h1>你的全名是:{{fullName}}</h1>

computed: {
    fullName() {
    return this.firstName + this.lastName;
     },
}

计算属性computed和methods方法的区别：

-- computed是有缓存的，只有和他有关的data值变化的时候才会重新计算；

-- methods每次更新的时候都好重新计算；

mvvm模型

• M（Model）:数据模型 -- data 对象

• V（View）: 视图

• VM (ViewModel): vue 实例

• vue 实现了数据的更新会导致视图的更新

• 实现:Object.defineProperty

2）v-model 语法糖：表单数据双向绑定数据（数据的变化导致视图的变化，视图的变化导致数据的变化）

• text/textarea :value 值和 input 事件

• checkbox/radio:checked 值和 change 事件

• select:value 值和 change 事件

• 修饰符: v-model.修饰符 1.修饰符 2="xxx"

  • lazy: input 变成 change 同步

  • number: 转数值类型，转不动就不转

  • trim: 去除首尾空格

  • 文本类指令

  • v-text : 设置标签的文本内容

  • v-html : 设置标签的超文本内容

  • v-once : 只渲染一次

  • v-pre : 不解析

  • v-cloak: 渲染完成以后移除

事件修饰符

• stop: 阻止冒泡

• prevent: 阻止默认行为

• capture: 事件处理函数在捕获阶段发生

• once: 只触发一次

• self: 只有 e.target 是自己才发生

• .left .right .middle :鼠标按键

• keyCode|keyAlias : 键盘按键

侦听器:watch 

let vm = new Vue({
  watch: {
    要监听的变量名1: function (newVal, oldVal) {
      // 当变量的值变化的时候执行
    },
    要监听的变量名2: {
      handler: function () {
        // 当变量的值变化的时候执行
      },
      deep: true,    //可以监听对象已有属性的变化，不管属性嵌套多深
    },
  },
});

vm.$watch("要监听的变量名3", {
  handler: function () {
    // 当变量的值变化的时候执行
  },
  deep: true,
});