Vue3

一、容易忽略的小技巧

Vue 中可以动态的决定绑定属性名、事件名：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.createApp({
    data() {
        return {
            key: 'title',
            value: 'value',
            event: 'mouseenter'
        }
    },
    template: `
    <div
    @[event]="handleClick"
    :[key]=value
    >
    	{{ message }}
    </div>
    `
}).mount('#root')

Vue 中有更简单的 preventDefault 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  Vue.createApp({
    data() {
      return {
        key: 'title',
        value: 'value',
        event: 'mouseenter'
      }
    },
    methods: {
      handleClick(e) {
        e.preventDefault()
      },
      handleClick2(e) {
        // $event 接收原生事件
      },
      handleClick3() {
        // 一次点击同时掉多个方法
      },
      handleClick4() {
        // 一次点击同时掉多个方法
      }
    },
    template: `
      <button @click="handleClick">提交</button>
      <button @click.prevent="handleClick">提交</button>
      <button @click.prevent="handleClick2($event)">提交</button>
<button @click.prevent="handleClick3(), handleClick4()">提交</button>
    `
  }).mount('#root')

Vue 事件修饰符：

1
2
3
4
5
6
7
@click.stop
@click.self
@click.prevent
@click.capture
@click.once
@click.passive
@click.ctrl    // 组合键

Vue 按键修饰符：

1
2
3
4
5
6
@keydown.enter
@keydown.tab
@keydown.delete
@keydown.esc
@keydown.up
@keydown.down

Vue 鼠标修饰符：

1
2
3
@click.left
@click.right
@click.middle

Vue 精确修饰符：

1
@click.ctrl.exact  // ctrl + 点击，不能是 ctrl + 其他按键 + 点击

v-model 修饰符：

1
2
3
v-model.lazy
v-model.number
v-model.trim

二、组件

全局组件：

1
2
3
4
5
6
7
8
9
10
11
const app = Vue.createApp({
  template: `<div><hello/><world/></div>`
})
// 全局组件，一直挂在 app 上
app.component(`hello`, {
  template: `<div>Hello</div>`
})
app.component(`world`, {
  template: `<div>world</div>`
})
app.mount('#root')

局部组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 const counter = {
   data() {
     return {
       count: 1
     }
   },
   template: `<div @click="count += 1">{{ count }}</div>`
 }
 const app = Vue.createApp({
// 局部组件
   components: { counter },
   template: `<div><counter/></div>`
 })
 app.mount('#root')