VueJS组件的数据和函数进行交互操作

前言¶

在Vue组件中，data选项 是一个函数，它返回一个字典对象，里面的元素便是该组件的属性；而 methods选项 是用于定义一系列的函数，这便是组件的动作，然后可以绑定事件处理的形式调用这些函数完成交互操作。

另外组件还可以有 computed属性 ，这种属性是每次其依赖的属性改变时便会重新计算，从而得到新的属性。

组件的 mounted选项 在组件挂载时自动执行，可以做一些初始化工作。

data选项: 属性¶

举例:

export default {
    data() {
        return {
            name: "Lily",
            age: 0,
        }
    },
    //....
}

methods选项: 操作¶

举例:

export default {
    //...
    methods: {
        name() {
            console.log(`name: ${this.name}`);
        },
        age(){
            console.log(`name: ${this.age}`);
        }
    }
}

computed选项: 计算属性¶

举例:

export default {
  //...
  computed: {
        disabled(){
            return this.name.length == 0 || this.age <= 0;
        },
        enabled(){
            return this.age >= 18;
        }
    },
}

对于计算属性的使用和普通属性是一样的，只不过这个属性它每次当依赖的元素改变时会自动进行计算，用于那些依赖其他属性的新属性。

相对于函数，计算属性有缓存的效果，只有需要重新计算的时候才会计算，而函数是每次调用都会计算一次，因此使用计算属性的原因在于 缓存效果。

计算属性的get和set方法¶

举例:

export default {
  //...
  computed: {
        name:{
          get(){
            return this.name;
          },
          set(newName){
            this.name = newName;
          }
        }
    },
}

如果定义了 get 和 set 方法，那么访问该计算属性时会自动调用get方法，而赋值的时候则自动调用set方法；如果只有get方法则变成了只读属性。

watch选项：监听类属性¶

举例:

export default {
  //...
  watch: {
        searchName(oldName, newName){
          if(oldName === newName){
            alert("they are same!");
          }
          //...
        }
    },
}

这个监听类属性使用方法和普通属性一样，只不过每次这个属性每次变化的时候就会自动调用对应的监听函数，一般用于input标签的输入监听。

函数延迟调用¶

函数如果频繁的调用可能导致效率降低，或者出现卡顿的情况，因此需要对函数的调用频率进行限制，进行函数延迟调用。

它的基本做法是：

• 为函数的调用设置一个变量，如果变量为false就调用，否则就不调用
• 函数被调用就设置该属性为true，从而防止频繁的调用
• 通过 setTimeout 函数在一定时间后自动将该变量变回false，从而可以再次被调用

事件监听函数绑定¶

在Vue中通过 v-on 或 @ 来绑定事件处理函数，如果事件处理函数没有任何参数，也可以添加一个Event对象作为参数:

click(){
  console.log(`click with no parameter`);
}

click(index){
  console.log(`click with index: ${index}`);
}

click(event){
  console.log(`click with event: ${event}`);
}

click(index, event){
  console.log(`click with index: ${index}, event: ${event}`);
}

如果要传入Event对象作为实参，可以这样通过 $event 来传入:

<button @click="click(9, $event)"> Click Here </button>

也可以一个动作绑定多个事件，只需要逗号分开即可，比如:

<button @click="click(9), click($event)"> Click Here </button>

事件修饰符¶

一个组件产生一个事件，比如被点击了，那么这个click事件它会先经历一个向子组件传递的过程，这个叫 捕获，即子组件可以捕获父组件产生的事件；然后还会经历一个向父组件传递的过程，这个叫 冒泡 。

即当事件发生的时候，它有两个过程，一个是逐级传给自己的子组件和父组件，分别叫捕获和冒泡；默认情况下，监听的事件是冒泡，即只影响父组件。

但Vue提供一系列的事件修饰符来控制事件的监听：

可以通过符号.来同时使用多个事件修饰符，比如:

<button @click.stop.once="click(9, $event)"> Click Here </button>

这样，该事件只会被触发调用一次，之后就会被阻止了。

常用事件类型¶

这有一个事件类型清单:

对于每个事件都可以通过传递 $event 参数来通过Event对象获取具体的类型等信息。

键盘按键与鼠标修饰符¶

监听键盘按键事件，一般是通过 keyup 事件，然后通过Event对象的key值判断具体按键式哪个，但也可以通过按键修饰符直接指定:

• enter: 按下回车键
• ctrl: 按下control键
• alt: 按下alt或option键
• shift: 按下shift键
• meta: 按下Windows或command键
• left: 鼠标左键按下
• right: 鼠标右键按下
• middle: 鼠标中间键按下
• exact: 精准触发约束

举例:

<button @keyup.enter="click(9, $event)"> Click Here </button>

<button @keyup.alt.enter="click(9, $event)"> Click Here </button>

<button @mousedown.ctrl="click(9, $event)"> Click Here </button>

<button @mousedown.ctrl.enter="click(9, $event)"> Click Here </button>

<button @click.left="click(9, $event)"> Click Here </button>

这种按键或鼠标事件组合，只要符合就会触发，比如ctrl按键只要被按下了就触发；但如果要精准的触发，比如ctrl按下时，还有其他键也按下了就不能触发，则使用exact修饰符:

<button @mousedown.ctrl.enter="click(9, $event)"> Click Here </button>

<button @mousedown.ctrl.extact="click(9, $event)"> Click Here </button>

在这个例子里面，单独按下ctrl会触发第二个，而ctrl和enter同时按下只触发第一个；如果没有精准触发约束，那么只有ctrl按下了，两个都会触发。

setTimeout与setInterval¶

• setTimeout 是等待一定时间后自动执行对应的回调函数，只执行一次，常用于处理超时:

setTimeout(() => {
              console.log("fetch data failed!");
          }, 
          1500);

• setInterval 是每隔一定时间自动一次回调函数，会一直执行，常用于处理游戏或动画:

setInterval(() => {
              console.log("print data here!");
          }, 
          2);

Event对象¶

通过 $event 传递Event对象作为实参，其属性主要有：

• key: 具体按键，它的值是每个按键的名字:
• Enter: 回车键
• ArrowLeft: 左方向键
• ArrowRight: 右方向键
• clientX、clientY: 鼠标位置相对当前body容器的坐标
• pageX、pageY: 鼠标位置相对整个页面的坐标
• screenX、screenY: 鼠标位置相对整个屏幕坐标
• offsetX、offsetY: 鼠标位置相对父容器的坐标
• x、y: 同screenX、screenY

通过这些属性可以控制元素的位置移动，也可以结合键盘按键事件和鼠标事件来改变组件的位置，但要检查元素是否超出可视范围。

手动绑定事件处理函数方式:

document.addEventListener("keydown", functionname1());

可以在组件的 mounted选项 执行该语句，从而在组件挂载时自动注册事件函数，做一些初始化工作。