“文档更多的是一个备忘录,给会用的人查阅。”这一点比较适合目前的我。

computed 有缓存,data 不变则不会重新计算。

对于 computed,若使用 v-model 则 computed 的 get 和 set 必须同时设定。

watch 默认是浅度监听,若使用监听引用类型(深度监听),拿不到 oldVal。

示例代码


data() {
  return {
    name: "coder",
    info: {
      city: "BeiJing"
    }
  }
}

watch: {
  name(oldVal, val) {
    // 值类型,可以拿到
    console.log('watch name', oldVal, val)
  },
  info: {
    handler(oldVal, val) {
      // 引用类型,拿不到,因为此时指针地址已变更
      console.log('watch info',oldVal, val)
    }
  }
}

动态属性的示例代码


<template>
  <div>
    <p :class="{black: isBlack, yellow: isYellow}"></p>
    <p :class="[black, yellow]"></p>
    <p :style="styleData"></p>
  </div>
</template>

<script>
  data() {
    return {
      isBlack: true,
      isYellow: true,

      black: 'black',
      yellow: 'yellow',

      styleData: {
        fontSize: 40px, // 驼峰式
        color: 'red',
        backgroundColor: '#ccc' // 驼峰式
      }
    }
  }
</script>

v-show修饰的标签都会被渲染出来,对于不需要展示的,将 display 属性置为 none。

v-show 适用于更新频繁的场景(性能较优),v-if 适用于更新不频繁的场景。

可以使用 v-for 遍历对象。key 不能乱写,例如 random 或者 index。

v-for 和 v-if 不建议放置于同一个标签内一起使用。因为在 Vue 中,v-for 的优先级要大于 v-if,当 v-for 执行完一个循环体后,再对每个循环子项进行 v-if 判断,这样比较损耗性能。

event 参数、自定义参数的示例代码


<button @click="increment1">add-1</button>
<button @click="increment2(2, $event)">add-2</button>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      increment(event) {
        // 原生的event对象
        console.log(event, event.__proto__.constructor)
        // 事件被挂载到当前元素上
        console.log(event.target)
        console.log(event.currentTarget)
      },
      increment2(val, event) {  
        console.log(event.target)
      }
    }
  }
</script>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

事件修饰符示例代码


<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<a v-on:submit.prevent="onSubmit"></a>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听时使用事件捕获的模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素处理 -->
<div v-on:click.capture="doThis"></div>

<!-- 只有在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部触发的 -->
<div v-on:click.self="doThat"></div>

按键修饰符示例代码


<button @click.ctrl="onClick"></button>

<!-- 有且仅有 Ctrl 被按下的时候才会被触发 -->
<button @click.ctrl.exact="onClick"></button>

表单示例代码


<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

<!-- 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符 -->
<input v-model.number="age" type="number">

<!-- 如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符 -->
<input v-model.trim="msg">


在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效,应用 v-model 来代替。

场景示例:

父组件通过 props 向子组件传递信息,子组件通过 this.$emit 调用父组件的事件。