动态属性
<a v-bind:[attributeName]="url"> ... </a> // 属性
<a v-on:[eventName]="doSomething"> ... </a> // 事件
简写:
<a :[attributeName]="url"> ... </a>
<a @[eventName]="doSomething"> ... </a>
表单验证简写
<input v-model.number="age" type="number" />
<input v-model.trim="msg" />
验证发射事件
app.component('custom-form', {
emits: {
// 没有验证
click: null,
// 验证提交事件
submit: ({ email, password }) => {
if (email && password) {
return true
} else {
return false
}
}
},
methods: {
submitForm() {
this.$emit('submit', { email, password })
}
}
})
在3.x中,添加到组件的修饰符v-model
将通过modelModifiers属性提供给组件
<div id="app">
<my-component v-model.capitalize="myText"></my-component>
{{ myText }}
</div>
const app = Vue.createApp({
data() {
return {
myText: ''
}
}
})
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `<input
type="text"
v-bind:value="modelValue"
v-on:input="emitValue">`
})
app.mount('#app')})
命名插槽速记
// 原来的v-slot 改为 #,不过原来省略的default插槽名要加上。
<todo-list #default="{ item }">
<i class="fas fa-check"></i>
<span class="green">{{ item }}<span>
</todo-list>
props的选项,跟ant design一样啊
-
type 数据类型
-
default 默认值
-
required 是否必须
-
validator 自定义验证函数
增加了两个生命周期
在keep-alive
中的组件才具有,
- activated:进入时执行一次,回退到该组件时执行,不再执行其他生命周期
- deactivated:离开时执行一次。
反应性api
balabala一大堆。。。待写demo
没有bus总线,移除了 o n , on, on,off事件,只保留$emit事件,用于父子事件监听
以前this.xxx的写法,比如this.$nextTick()
改为了import { nextTike } from 'vue'
,然后再使用.
很大的写法都借鉴了react hook。