Jsx语法指北 (Vue版)

郑重声明: 本文档只记录vue版jsx语法, 请勿在react项目中使用, 因为两者之间还是有些许的区别

vue-cli@3.x以上的版本可以搭配render函数直接使用jsx动态渲染组件, 但是vue-cli@2.x的版本必须加以下babel插件才可以使用

以下操作适用于vue-cli@2.x

• 首先安装一堆babel插件

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env babel-plugin-jsx-v-model --save-dev

• 然后在.babelrc里面增加如下配置

{
  "presets": ["env"],
  "plugins": ["jsx-v-model", "transform-vue-jsx"]
}

如果你还是配置不成功

• 参考1: vue官网提供的babel插件
• 参考2: 专门处理render里面的v-model数据双向绑定指令

目录

• 语法篇

  • render函数
  • 标签及注释
  • 渲染变量
  • 引用图片
  • class与style
  • 条件渲染
  • 列表渲染

• 事件篇

  • 绑定事件
  • 按键修饰符
  • 事件修饰符

• 插槽篇

  • 作用域插槽

• 指令篇

  • 自定义指令

render函数

原先的vue组件无非就是老三样: 在<template>里写html, <script>里写js, <style>去写css

但是我们看到下面的代码, 已经没有了<template>标签, 取而代之的是在js里面多了一个类似于生命周期一样的render函数, style样式则没有任何变化, 还是跟以前一样写在<style>里面

<script>
export default {
  name: 'home',
  data () {
    return {}
  },
  render () {
    return <div id="home">
      <h1 class="title">hello world</h1>
      <p>普通template语法</p>
    </div>
  }
}
</script>

但是需要注意, template标签和render函数不可以同时使用, 只能二选其一

标签及注释

• 单标签必须要闭合

<br />
<img src="./images.png" />
<input value="msg" />

• 注释写在{/* */}里面

<div>
  {/* <p>单行注释</p> */}

  {/*
    <p>多行注释</p>
    <p>多行注释</p>
    <p>多行注释</p>
  */}
</div>

• 返回根标签

在render函数中, return只能返回一个dom元素, 所以多标签必须拥有一个父元素来包裹

render () {
  return <div>
    <p>1</p>
    <p>2</p>
  </div>
}

如果想换行书写, 则需要在return后面紧跟一个小括号

render () {
  return (
    <div>
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </div>
  )
}

如果你把dom标签看成是一个一个的对象就容易理解多了

渲染变量

在jsx语法中, 所有的js都需要写在{ }单花括号中, 如果想要使用data中的数据, 则需要通过this调用

• 双花括号{{}}改成单花括号{}

<div>
  <p>{ 1 + 1 }</p>
  <p>{ this.msg }</p>
</div>

• v-html改成domPropsInnerHTML

<p domPropsInnerHTML={ this.msg }></p>

<p {...{ // 高级写法
  domProps: {
    innerHTML: this.msg
  }
}}></p>

• v-model则不变, 但是其中的变量必须使用this.属性的方式使用

<p v-model={ this.msg }></p>

引用图片

• 通过require引入

<img src={require('@/assets/img/logo.png')} />

<div style={{
  background: `url(${require('@/assets/img/banner.png')})`
}}></div>

• 通过import引入

<script>
import logo from '@/assets/img/logo.png'

export default {
  render () {
    return <div>
      <img src={logo} />
    </div>
  }
}
</script>

class与style

vue版jsx里面, 标签的class属性还是原样书写, 不必像react一样写成className

<p class="title"></p>

<p style="width: 100px; font-size: 18px"></p>

如果需要动态绑定, 则需要在花括号里面写一个对象

<p class={{ 'title': true, 'active': this.isShow }}></p>

<p style={{
  width: '100px',
  fontSize: '18px',
  background: this.active ? '#fff' : '#000'
}}></p>

条件渲染

jsx里面不能使用类似于v-if这样的指令, 只能是通过&& 逻辑运算符或三元运算符

<div>
  { this.isShow && <p>这是一个p标签</p> }

  { this.isShow ? <p>这是一个p标签</p> : null }
</div>

列表渲染

同样v-for也不能使用了, 使用map方法进行代替

<ul>
  {
    this.list.map((item, index) => {
      // key当成属性写在li标签中即可
      return <li key={index}>{item}</li>
    })
  }
</ul>

简写方式:

<ul>
  { this.list.map((item, index) => <li key={index}>{item}</li>) }
</ul>