vue3.0新特性集合

动态属性

<a v-bind:[attributeName]="url"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

外露$data属性和方法

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')
console.log(vm.$data.count)
vm.increment()

用v-for循环对象

<li v-for="(value, name, index) in myObject">
  {{ index }}. {{ name }}: {{ value }}
</li>

事件处理可以填写两个函数，用逗号隔开

<button @click="one($event), two($event)">
  Submit
</button>

按键监听

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

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

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

• .left
• .right
• .middle

v-model 添加 number 修饰符

<input v-model.number="age" type="number" />

v-model 添加 trim 修饰符

<input v-model.trim="msg" />

v-is=“组件名称”

<templateName></templateName>
// v-is写法
<div v-is="'templateName'"></div>

组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称：

<my-component v-model:foo="bar"></my-component>

app.component('my-component', {
  props: {
    foo: String
  },
  template: `
    <input 
      type="text"
      :value="foo"
      @input="$emit('update:foo', $event.target.value)">
  `
})

v-model自定义修饰符

<!-- 自定义一个capitalize -->
<my-component v-model.capitalize="bar"></my-component>

app.component('my-component', {
  props: {
    // v-model未绑定值的时候回传入modelValue
    modelValue: String,
    // 自定义修饰符会存放在一个叫modelModifiers在props中
    modelModifiers: {
      default: () => ({})
    }
  },
  template: `
    <input type="text" 
      :value="modelValue"
      @input="(e)=>{
        let value = e.target.value
        if (this.modelModifiers.capitalize) {
          value = value.charAt(0).toUpperCase() + value.slice(1)
        }
        this.$emit('update:modelValue', value)
      }"
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
})