Vue3 入门

动态参数

<a :[attributename]="hrefVal">百度一下</a>

其中的attributename就是动态参数，必须是小写，因为他默认会全部转为小写，如果小写没有匹配的，则就会移除属性

截图中的attributeName2会被转为attributeame2

修饰符

事件修饰符

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

按键修饰符

• .enter
• .tab
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰符

• .ctrl
• .alt
• .shift
• .meta

.exact修饰符

.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

响应式代理

export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

当你在赋值后再访问 this.someObject，此值已经是原来的 newObject 的一个响应式代理。与 Vue 2 不同的是，这里原始的 newObject 不会变为响应式：请确保始终通过 this 来访问响应式状态。

Vue能监控的数组方法

都是一些原本就会变更原数组的方法，Vue对他们进行了封装

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

事件

• 内联处理器
• 方法事件处理器