Vue语法糖(待完善)
作者：
秒速五厘米
文章简介：
Vue语法糖(待完善)
一、双向绑定(语法糖)
变量可以给组件传递特定props特性,可以通过监听特定事件获得新值 组件需要定义props、值改变时发送带新值的事件
//使用组件
<自定义元素 :prop名="变量" @事件=”变量=$event"/>
//创建组件
props:['prop名'],
$emit(’事件‘,新值),
原生表单元素 自定义元素 特定props特性 特定事件 input text、textarea v-model value @input select v-model value @change checkbox、radio v-model checked @change 自定义元素 v-model 默认value 或由组件model.prop定义 默认@input 或由组件model.event定义 v-bind.sync prop名 @update:prop名
1. v-model、v-bind.sync两种语法糖
<自定义元素 v-model="变量"/>
<自定义元素 :prop名.sync="变量"/>
1.1 v-model在自定义组件中实现
//默认接收数据的props特性为value
props:['value'],
//默认被监听的发送事件为input,并带参数返回新值
$emit(’input‘,新值),
通过model修改接收数据的props特性、被监听的发送事件
model:{
prop: 'prop特性名',
event: '被监听的事件名'
}
props:['prop特性名'],
$emit(’被监听的事件名‘,新值),
1.2 v-bind.sync在自定义组件中实现
//只需要定义
props:['prop名'],
$emit(’update:prop名‘,新值),
//相当于对v-mode自动完成
//model:{
// prop: 'prop名',
// event: 'update:prop名'
//}
1.3 修饰符
修饰符 作用 v-model.lazy input事件发生时同步延迟到change事件发生时同步 v-model.number 输入值转为数值类型 v-model.trim 自动过滤首尾空白符
1.4 值绑定
//选中：变量=值1，未选中：变量=值2
<input type="checkbox" v-model="变量" true-value="值1" false-value="值2"/>
//选中：变量=值1
<input type="radio" v-model="变量" :value="值1"/>
//选中：变量=值1
<select v-model="变量">
<option :value="值1">123</option>
</select>
textarea在html插槽中的模板变量不会生效,需要使用v-model
二、动态组件(语法糖)
通过组件名变量直接选择组件进行渲染,<component>是vue内置组件
<component is="组件名变量"/>
//相当于
<自定义元素 v-if="组件名变量==组件名1">
<组件名1/>
</自定义元素>
<自定义元素 v-else-if="组件名变量==组件名2">
<组件名2/>
</自定义元素>
如果是需要配对的内部和外部元素,而内部没有使用指定元素,则会被作为无效的内容提升到外部.从而解析dom出错
<ul>
<自定义元素></自定义元素> //无效dom内容
</ul>
<ul>
<li is="自定义元素"></li> //保持配对并使用自定义元素
</ul>
需要配对的内部和外部元素<ul><li>、<ol><li>、<table><tr> 和 <select><option>
第一次创建后被缓存,失活的组件仍然保留,提高渲染效率
<keep-alive>
<component is="组件名变量"/>
</keep-alive>