上一篇文章介绍了Render函数基本的用法以及渲染场景,本篇文章主要介绍利用JavaScript代替模板功能。
一、v-if / v-else
利用if else代替:
二、v-for
必须用map:
三、v-model
父子组件相互传值:
四、修饰符
(1):Vue自带修饰符:
修饰符 | 前缀 | 作用 |
---|---|---|
.once | ~ | 事件只执行一次 |
.capture | ! | 给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。就是谁有该事件修饰符,就先触发谁。 |
.passive | & | 启动被动监听器,触发默认行为 |
.capture.once | ~! | 使用多种修饰符 |
.once.capture | ~! | 使用多种修饰符 |
(2):其他修饰符:
修饰符 | use |
---|---|
.stop | event.stopPropagation() |
.prevent | event.preventDefault() |
key .enter or .13 | event.keyCode == 13 or event.keyCode == enter |
ctrl、shift or alt | event.shiftKey、event.altKey or event.ctrlKey |
五、关于Vue其他:
官方目前给出:
render: h =>{
h('p',{
// 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
// 赋值,因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽格式
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件,需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中向多个元素都应用了相同的 ref 名,
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
},'其他')
}