const Demo = () => [
<li>One</li>
<li>Two</li>
]那么在Vue中就只能通过遍历来实现类似的功能，大体思路就是把数据先定义好数据然后直接一个map生成，当然如果说元素的标签是不同类型的那就需要额外添加标识来判断了。
{
data() {
return {
options: ['one', 'two'] }
}, render() {
const LiItem = () => this.options.map(option => <li>{option}</li>)
return (
<div>
<ul>
<LiItem />
</ul>
</div>
)
}
}
事件修饰符
在基础部分简单介绍了事件的绑定用法，这里主要是补充一下事件修饰符的写法。
在模板语法中Vue提供了很多事件修饰符来快速处理事件的冒泡、捕获、事件触发频率、按键识别等。可以直接查看官方文档的事件&按键修饰符部分，这里把相关内容原样搬运过来：
| 修饰符 | 前缀 |
|---|---|
| .passive | & |
| .capture | ! |
| .once | ~ |
| .capture.once或.once.capture | ~! |
使用方式如下：
<el-button {...{
'!click': this.doThisInCapturingMode,
'!keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}}>Click Me!</el-button>
下面给出的事件修饰符是需要在事件处理函数中写出对应的等价操作
| 修饰符 | 处理函数中的等价操作 |
|---|---|
| .stop | event.stopPropagation() |
| .prevent | event.preventDefault() |
| .self | if (event.target !== event.currentTarget) return |
| 按键： .enter, .13 | if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码) |
| 修饰键： .ctrl, .alt, .shift, .meta | if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey) |
下面是在事件处理函数中使用修饰符的例子：
methods: {
keyup(e) {
// 对应`.self`
if (e.target !== e.currentTarget) return // 对应 `.enter`, `.13`
if (!e.shiftKey || e.keyCode !== 13) return
// 对应 `.stop`
e.stopPropagation()
// 对应 `.prevent`
e.preventDefault()
// ...
}
}
ref和refInFor
在Vue中ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。
