核心概念

模板语法 #

Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令来给 attribute 赋值一个变量。

v-model

v-bind:key

data #

$data 的形式存储在组件实例中。为方便起见,该对象的任何顶级 property 也会直接通过组件实例暴露出来

有三种写法,都是定义函数,而不是属性。

name #

属性 props #

方法 methods #

v-model 数据双向绑定

箭头函数 #

计算属性 computed #

computed: {
  now: function () {
    return Date.now()
  }
}

设置 setter #

计算属性默认只有 getter,不过可以自定义一个 setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

计算属性 vs 方法 #

计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。。

计算属性 vs 侦听属性 #

很多场景可以用 computed 替代,考虑 watch 的真正用途不是替代 computed,而是 computed 以外的场景需要。

侦听属性 watch #

watch 用来专门响应数据变化,比如对数据的快速变化进行除抖。

表单输入绑定 v-model #

使用 v-model 在表单 <input><textarea><select> 元素上创建双向数据绑定。

组件引用 #

事件 #

v-on #

简写 @

官方提供的事件列表:

click #

this.$emit #

子组件可以使用 $emit ,让父组件监听到自定义事件 。

this.$on #

父组件可以使用 props ,把数据传给子组件。

生命周期 #

created #

unmounted #

Vue3 和 Vue2 的区别 #

文档 #

2.x官方中文文档 https://cn.vuejs.org/v2/guide/

本文共 543 字,上次修改于 Jul 30, 2022
相关标签: Vue, 前端