一下是一段覆盖大年夜部分语法的vue jsx代码：

render (h) { 
 
  return ( 
 
    <div 
 
      // normal attributes or component props. 
 
      id="foo" 
 
      // DOM properties are prefixed with `domProps` 
 
      domPropsInnerHTML="bar" 
 
      // event listeners are prefixed with `on` or `nativeOn` 
 
      onClick={this.clickHandler} 
 
      nativeOnClick={this.nativeClickHandler} 
 
      // other special top-level properties 
 
      class={{ foo: true, bar: false }} 
 
      style={{ color: 'red', fontSize: '14px' }} 
 
      key="key" 
 
      ref="ref" 
 
      // assign the `ref` is used on elements/components with v-for 
 
      refInFor 
 
      slot="slot"> 
 
    </div> 
 
  ) 
 
}  

可以看到DOM属性要加domProps前缀，但这里lass和style却不须要，因为这两个是特别的模块，并且react的class用的是className，vue却竽暌姑的class。事宜监听是以“on”或者“nativeOn”为开端。

实际上vue2.0的模版最后都邑被编译为render办法，所以模版声明的组件和jsx声明的组件最后都是一样的。

可以看到我们把jsx写在了render办法琅绫擎，render办法是vue2.0才支撑的，用来供给对虚拟DOM的支撑，也就是说只有vue2.0才支撑jsx语法转换。

膳绫擎的jsx最后会被编译成下面如许：

render (h) { 
 
  return h('div', { 
 
    // Component props 
 
    props: { 
 
      msg: 	
			
 2/6   首页 上一页 1 2 3 4 5 6 下一页 尾页
	
			

　　推荐阅读
　　尴尬了：谷歌Android Samba应用仅支持不安全的SMBv1
近日谷歌初次推出其新的Android  Samba应用，这显然不是好的宣布机会，因为在不久前，在重大年夜进击变乱中进击者就应用了该应用中安排的不安然版本SMB协定。比来几个月来，办事器消息块(SMBv1)协定中的马脚经由过程>>>详细阅读


本文标题：用Jsx写Vue组件
地址：http://www.17bianji.com/lsqh/36384.html
 1/2    1