JSX

在Vue中使用JSX语法。可以让我们回到更接近模板的语法上。

render () {
  return (
    
这是一个标题
  )
}

插值

{ this.value }

指令

在JSX中，一些指令并不存在，所以我们可以换一种方式来处理。

v-text

v-html

v-show

jsx支持v-show指令：

v-if

  
{true && 
div
}
{true ? 
div
 : span}

v-for

{ [1, 2, 3].map(item => (
{ item }
))}

v-on

点击事件
点击事件
  
原生点击事件
  
 this.handleClick(this.id)}>触发点击事件时，传递参数

v-bind

在JSX中可以直接使用class="xx"来指定样式类，内联样式可以直接写成style=“xxx”

Content
Content
Content

v-model

有相应的插件 支持 v-model，所以可以直接使用：

v-slot

  默认插槽
  
具名插槽 a

v-pre

v-cloak

v-once

以上三个指令，不常用，无替代方案

Ref

xxx

当遍历元素或组件时，如：

[1, 2, 3].map(item => 
{ item }
)

会发现从 [this.refs.xxx](<> "this.refs.xxx](<>"this.refs.xxx") 中获取的并不是期望的数组值，此时就需要将refInFor属性设置为true了：

[1, 2, 3].map(item => 
{ item }
)

自定义指令

render () {
   // 1
  return (
    
  )

  // 2
  const directives = [
    { 
      name: 'splice', 
      value: this.value,  
      modifiers: {number: true }
    }
  ];

  return (
    

  )

过滤器

  
{{ msg | capitalize }}

  
{ this.$options.filters('capitalize')(this.msg)}

插槽

模板写法：

  

  
  


  

  default
  

JSX写法：

  

  { this.$slots.header }
  { this.$slots.default }


  

  default
  

作用域插槽： 模板写法：

  

  


  

  {{ slotProps.text }}

JSX写法：

  

  { 
    this.$scopedSlots.default({
      text: 'HelloWorld',
    }) 
  }


  

   props.text
    },
  }}>