我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素,而不用在template
中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。
data: {
msg: 'Hello world'
},
render (h) {
return h(
'div',
{ attrs: { id: 'my-id' },
[ this.msg ]
);
}
渲染后的内容为:
<div id='my-id'>Hello world</div>
Vue 2.0中的render
为我们开启了一片新的天地,赋予了我们无限的想象力。比如,我们可以把React中用到的JSX语法应用到Vue中来。接下来,我们就聊聊怎么在Vue项目中使用JSX.
JSX简介
JSX是基于Javascript的语言扩展, 它允许在Javascript代码中插入XML语法风格的代码。如下所示:
data: {