而在React中可以使用空标签<></>和<react.Fragment></react.Fragment>来实现包裹元素，这里的空标签其实只是react.Fragment的一个语法糖。同时在React 16中直接支持返回数组的形式：
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 元素；如果用在子组件上，引用就指向组件。
注意：
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在
$refs不是响应式的，因此你不应该试图用它在模板中做数据绑定。
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
假如在jsx中想要引用遍历元素或组件的时候，例如：
const LiArray = () => this.options.map(option => ( <li ref="li" key={option}>{option}</li> ))
会发现从this.$refs.li中获取的并不是期望的数组值，这个时候就需要使用refInFor属性，并置为true来达到在模板中v-for中使用ref的效果：
const LiArray = () => this.options.map(option => ( <li ref="li" refInFor={true} key={option}>{option}</li> ))
插槽（v-slot)
在jsx中可以使用this.$slots来访问静态插槽的内容。
注意：在Vue 2.6.x版本后废弃了slot和slot-scope，在模板中统一使用新的统一语法v-slot指令。v-slot只能用于Vue组件和template标签。
<div> {this.$slots.title ? this.$slots.title : this.title} </div>
等价于模板的
<div> <slot>{{ title }}</slot> </div>