关于前端:手把手教你在-Vue-中使用-JSX不怕学不会建议收藏

69次阅读

共计 9018 个字符，预计需要花费 23 分钟才能阅读完成。

学习这篇文章心愿您曾经具备以下常识：

  1. vue.js 的根本应用
  2. 对前端三件套 (html、css、js) 曾经能够纯熟应用了

文末有配套 demo 代码：点我中转

JSX 是什么

JSX 是一种 Javascript 的语法扩大，JSX = Javascript + XML，即在 Javascript 外面写 XML，因为 JSX 的这个个性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。（集体倡议灵便度强的局部组件能够用 JSX 来代替，整个我的项目 JSX 属实没必要）

XML 学习地址（学与不学可随便，理解就 ok）：https://www.w3school.com.cn/xml/index.asp
用 template 的弊病：https://www.mk2048.com/blog/blog_h1c2c22ihihaa.html

为什么要在 Vue 中应用 JSX

有时候，咱们应用渲染函数（render function）来形象组件，渲染函数不是很分明的参见官网文档, 而渲染函数有时候写起来是十分苦楚的，所以只须要有个理解。

渲染函数：https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80

createElement(
 'anchored-heading', {
 props: {level: 1}
 }, [createElement('span', 'Hello'),
 'world!'
 ]
)

其对应的模板是上面：

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

你看这 写起来多吃力，这个时候就派上 JSX 上场了。在 Vue 中应用 JSX，须要应用 Babel 插件，它能够让咱们回到更靠近于模板的语法上，接下来就让咱们一起开始在 Vue 中写 JSX 吧。

创立我的项目并配置 Babel

vue create vue-jsx
# 抉择 vue2 的

装置依赖：

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# or
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置 .babelrc(babel.config.js)：

module.exports = {
 presets: [
 '@vue/cli-plugin-babel/preset',
 ['@vue/babel-preset-jsx',
  {'injectH': false}]
 ]
}

配置后咱们启动我的项目：

yarn serve

demo 结构图：

配置了 babel.config.js 后，咱们把 App.vue 引入的HelloWorld.vue 改为 HelloWorld.js，并且删除 HelloWorld.js 中对于 template 和 style, 以及 script 标签。

export default {
  name: 'HelloWorld',
  props: {msg: String}
}

JSX 根底用法

这里展现在 Vue 中书写一些根底内容。

纯文本、动静内容、标签应用、自定义组件、款式和 class

import myComponent from './myComponent'
import './HelloWorld.css'

// 创立一个组件 button
const ButtonCounter = {
  name: "button-counter",
  props: ["count"],
  methods: {onClick() {this.$emit("change", this.count + 1);
    }
  },
  render() {
    return (<button onClick={this.onClick}> 数量 {this.count}+</button>
    );
  }
};


export default {
  name: 'HelloWorld',
  components: {myComponent},
  data () {
    return {
      text:'hello 纸没了飞机',
      inputText:'我吃了',
      count: 0
    }
  },
  props: {msg: String},
  watch: {},
  methods: {onChange(val) {
      this.count = val;
      alert(this.count)
    }
  },
  render() {// const {text,inputText,count} = this // 通过解构，下方 return 片段中就不须要 this
    return (
    <div>
     <h3> 内容 </h3>
     {/* 纯文本 */}
     <p>hello, I am Gopal</p>
     {/* 动静内容 */}
     <p>{this.text}</p>
     <p>hello {this.msg}</p>
     {/* 输入框 */}
     <input/>
     {/* 自定义组件 */}
     <myComponent/>
     <ButtonCounter
        style={{marginTop: "10px"}}
        count={this.count}
        type="button"
        onChange={this.onChange}
      />
    </div>
    );
   }
}

题外话：创立组件那里大家能够多学学 const 创立的 ButtonCounter 组件的那种形式。在 React 中也是常常会这么创立的。

这么看的话和在 template 里写没有多大区别，标签该是啥还是啥没有变动。那么这么一想的话，style 呢，class呢？接下来就是 style 和 class 款式的写法 (包含 动静款式)

咱们先给 h3 绑定一个 class 为 colorRed：

<h3 class="colorRed"> 内容 </h3>

审查元素发现间接写 class 绑定是能够的：

那么 class 的款式怎么写呢？毕竟 js 文件里写 <style></style> 貌似是不行的！
1、全局款式
App.vue

<style>
.colorRed{color: red;}
</style>

2、引入一个 css 文件或者配合 style-loader 引入一个 less、sass、stylus 文件
留神：都须要装置配置对应的 loader，既然都是 JSX 了，那咱们用 stylus 来解说下，置信 less、sass 大家都会了。stylus 是一个省略了{}，靠缩紧来辨认的 css 编译器。（不想用 stylus 可跳过，款式这块可随便）

yarn add global stylus
yarn add --dev stylus stylus-loader

各种 style 装置见：https://www.cnblogs.com/jimc/…

装置实现后新建 HelloWorld.styl，而后引入。

stylus 的应用：https://www.jianshu.com/p/5fb…
stylus 官网：https://stylus.zcopy.site/
控制台 stylus 报错见：https://blog.csdn.net/csdn_zh…
vscode 编辑期报错：装置编辑器 stylus 语法插件，并重启

成果：

行内款式 style：

<p style="color:blue">hello, I am Gopal</p>


动静绑定 class 和 style

<p style={this.isGreen?'color:green':''}>{this.text}</p>
<p class={this.isYellow?'colorYellow':''}>hello {this.msg}</p>
<p style={this.isRed?colorRed:''}> 红色的文字 </p>


属性绑定和一般 HTML 一样的
毕竟 class 和 style 可都是 html 的属性，这点置信大家都晓得的。

<input placeholder="我是 placeholder"  />
<input placeholder={placeholderText}  />
{/* 解构 N 个属性，要啥放啥 */}
<div {...attrObj}  />


成果：

罕用指令

template 罕用指令：v-html | v-text、v-if、v-for、v-modal 等。template 的指令在 JSX 是无奈应用的，故须要一些写法，请看上面。
我新建个 instructions.js 用来示范指令这块。在 App.vue 中引入。
v-html | v-text
在 JSX 外面，如果要设置 dom 元素的 innerHTML，就用到 domProps。

render() {const { htmlCode} = this
    return (
        <div>
            <div domPropsInnerHTML={htmlCode}></div>
        </div>
    );
   }

尽管 v -text 有 domPropsInnerText，但没有用的必要。
v-if
分简略的和简单的。
简略：

render() {
    let bool = false
    return (
        <div>
            {bool ? <button> 按钮 1 </button> : <button> 按钮 2 </button>}
        </div>
    );
   }

简单：

render() {
  let num = 3
  if(num === 1){return( <button> 按钮 1 </button>) }
  if(num === 2){return( <button> 按钮 2 </button>) }
  if(num === 3){return( <button> 按钮 3 </button>) }
}

v-for
就应用 map 办法来实现，在 react 中也是如此。

render(h) {var list = [1,2,3]
  return( 
    <div>
      {list.map(item => <button> 按钮{item}</button>) }
    </div>
  )
}

v-modal

留神：新版 vue-cli4 中，曾经默认集成了 JSX 语法对 v-model 的反对，能够间接应用
<input v-model={this.value}>
如果你的我的项目比拟老，也能够装置插件 babel-plugin-jsx-v-model 来进行反对

我可是 cli4，我来验证下：

验证后果：（通过）

当然以上两种形式你都不想搞，你也能够手动反对，这就波及到监听事件了，请向下看。

监听事件及事件修饰符

监听事件想到用 onChange, onClick 等。
须要留神的是，传参数不能应用 onClick={this.removePhone(params)}，这样子会每次 render 的时候都会主动执行一次办法
应该应用 bind，或者箭头函数来传参

methods: {handleClick(val){alert(val)
    }
  },
<button type="button" onClick={this.handleClick.bind(this, 11)}> 点击 bind</button>
<button type="button" onClick={() => this.handleClick(11)}> 点击箭头函数 </button>

下面提到的用过监听事件来实现 v -modal

<input type="text" value={this.text} onInput={this.input}/>
methods: {input(e){this.text = e.target.value}
  },

除此之外，还能够应用对象的形式去监听事件：

render() {
  return (
    <input
      value={this.content}
      on={{
        focus: this.$_handleFocus,
        input: this.$_handleInput
      }}
      nativeOn={{click: this.$_handleClick}}
    ></input>
  )
}

其余事件的应用同理都是加 on。
事件修饰符
和指令一样，除了个别的之外，大部分的事件修饰符都无奈在 JSX 中应用，这时候你必定曾经习惯了，必定有代替计划的。

.stop：阻止事件冒泡，在 JSX 中应用 event.stopPropagation()来代替
.prevent：阻止默认行为，在 JSX 中应用 event.preventDefault() 来代替
.self：只当事件是从侦听器绑定的元素自身触发时才触发回调，应用上面的条件判断进行代替

if (event.target !== event.currentTarget){return}

.enter 与 keyCode: 在特定键触发时才触发回调

if(event.keyCode === 13) {// 执行逻辑}

除了下面这些修饰符之外，尤大大为了关照咱们这群 CV 仔，还是做了一点优化的, 对于.once,.capture,.passive,.capture.once，尤大大提供了前缀语法帮忙咱们简化代码

 render() {
    return (
      <div
        on={{
          // 相当于 :click.capture
          '!click': this.$_handleClick,
          // 相当于 :input.once
          '~input': this.$_handleInput,
          // 相当于 :mousedown.passive
          '&mousedown': this.$_handleMouseDown,
          // 相当于 :mouseup.capture.once
          '~!mouseup': this.$_handleMouseUp
        }}
      ></div>
    )
  }

如果有参数传递给办法，不能间接(参数)，会在页面中立刻触发，须要我在上面这种写法：

clickOnce(val) {alert(val);
},
<button
    type="button"
    on={{'~click': ()=>this.clickOnce('只能点一次'),
    }}
   >
    事件修饰符点击一次
</button>

应用范畴（联合第三方 ui 组件）

不仅仅在 render 函数外面应用 JSX，而且还能够在 methods 外面返回 JSX，而后在 render 函数外面调用这个办法。并且也能够间接应用例如 elementui 等 ui 组件。
JSX 还能够间接赋值给变量、例如应用 elementui 的 el-dialog。（您在测试该案例时记得装置 elemnt）

methods: {$_renderFooter() {
      return (
        <div>
          <el-button> 确定 </el-button>
          <el-button onClick={() =>this.closeDialog()}> 勾销 </el-button>
        </div>
      );
    },
    openDialog(){this.visible = true},
    closeDialog(){this.visible = false}
  },
render() {const buttons = this.$_renderFooter();
    return (
      <div>
        <Button onClick={() =>this.openDialog()}> 关上 Dialog</Button>
        <el-dialog visible={this.visible}>
          <div> 弹窗内容 </div>
          <template slot="footer">{buttons}</template>
        </el-dialog>
      </div>
    );
  }

插槽

插槽就是子组件中提供给父组件应用的一个占位符，插槽分为默认插槽，具名插槽和作用域插槽，上面我顺次为您带来每种在 JSX 中的用法与如何去定义插槽。

默认插槽

应用默认插槽
应用 element-ui 的 Dialog 时，弹框内容就应用了默认插槽，在 JSX 中应用默认插槽的用法与一般插槽的用法根本是统一的，如下代码所示：

render() {
    return (<ElDialog title="弹框题目" visible={true}>
        {/* 这里就是默认插槽 */}
        <div> 这里是弹框内容 </div>
      </ElDialog>
    )
  }

自定义默认插槽
在 Vue 的实例 this 下面有一个属性 $slots, 这个下面就挂载了一个这个组件外部的所有插槽，应用 this.$slots.default 就能够将默认插槽退出到组件外部。

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  render() {
    return (<div class="custom-dialog" vShow={this.visible}>
        {/** 通过 this.$slots.default 定义默认插槽 */}
        {this.$slots.default}
      </div>
    )
  }
}

应用：

<myComponent visible={true} slot> 我是自定义默认插槽 </myComponent>

另 vShow 相当于 v-show，不代表别的也能够这样！

具名插槽

应用具名插槽
有时候咱们一个组件须要多个插槽，这时候就须要为每一个插槽起一个名字，比方 element-ui 的弹框能够定义底部按钮区的内容，就是用了名字为 footer 的插槽。

render() {
    return (<ElDialog title="弹框题目" visible={true}>
        <div> 这里是弹框内容 </div>
        {/** 具名插槽 */}
        <template slot="footer">
          <ElButton> 确定 </ElButton>
          <ElButton> 勾销 </ElButton>
        </template>
      </ElDialog>
    )
  }

自定义具名插槽
在上节自定义默认插槽时提到了 $slots，对于默认插槽应用 this.$slots.default，而对于具名插槽，能够应用 this.$slots.footer 进行自定义。

render() {
    return (<div class="custom-dialog" vShow={this.visible}>
        {this.$slots.default}
        {/** 自定义具名插槽 */}
        <div class="custom-dialog__foolter">{this.$slots.footer}</div>
      </div>
    )
  }

应用：

<myComponent visible={true}>
      <template slot="footer">
            <ElButton> 确定 </ElButton>
            <ElButton> 勾销 </ElButton>
      </template>
</myComponent>

作用域插槽

应用作用域插槽
有时让插槽内容可能拜访子组件中才有的数据是很有用的，这时候就须要用到作用域插槽, 在 JSX 中，因为没有 v -slot 指令，所以作用域插槽的应用形式就与模板代码外面的形式有所不同了。比方在 element-ui 中，咱们应用 el-table 的时候能够自定义表格单元格的内容，这时候就须要用到作用域插槽。

<myComponent1
      visible={this.visible}
      {...{
         scopedSlots: {test: ({ user}) => {
           // 这个 user 就是子组件传递来的数据，同理可这样拿到 el-table 的 row，不过 test 得是 default，不过案例还是我这样
              <div style="color:blue;"> 快来啊，{user.name}，看看这个作用域插槽 </div>
          },
         },
     }}
></myComponent1>

自定义作用域插槽
子组件中通过 {this.$scopedSlots.test({ user: {name:’ 纸飞机 ’}})} 指定插槽的名称是 test，并将 user 传递给父组件。父组件在书写子组件标签的时候，通过 scopedSlots 值指定插入的地位是 test，并在回调函数获取到子组件传入的 user 值

留神：作用域插槽是写在子组件标签中的，相似属性。而不是像具名插槽放在标签外部

新建个作用域插槽.js

// 一个为 jsx 的子组件(玩玩插槽)

export default {
    name: "myComponent",
    data() {return {};
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      listData: {
        type: Array,
        default: function() {return [];
        },
      },
    },
    render() {
      return (<div vShow={this.visible}>
          {/** 自定义作用域插槽 */}
          <div class="item">
           {this.$scopedSlots.test({user: {name:'纸飞机'}
            })}
          </div>
        </div>
      );
    },
  };

成果：

函数式组件

函数式组件是一个 无状态、无实例 的组件，详见官网阐明，新建一个 FunctionalComponent.js 文件，内容如下：

// export default ({props}) => <p>hello {props.message}</p>;

// 或者举荐下方写法

export default {
  functional: true,
  name: "item",
  render(h, context) {console.log(context.props)
    return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>;
  },
};

HelloWorld.js 中应用：

<funComponent message="展现下函数式组件"></funComponent>

成果：

代码地址：

https://codechina.csdn.net/qq_32442973/vue2-jsx-demo.git

后记

无论你是要用 vue2 的 jsx 还是 vue3 的 jsx 都没有本质区别，毕竟 vue3 是向下兼容 vue2 的；假使你真的要学 vue3 的 JSX，我倡议你学完 vue2 的再去学；另我不举荐在 vue 中所有的组件和页面都用 JSX，两者须要权衡利弊；同时也不用放心 JSX 和 template 的互相嵌套，两者是能够相互嵌套的。

参考：
https://www.cnblogs.com/ainyi…
https://www.jb51.net/article/…
https://cn.vuejs.org/v2/guide…
https://www.cnblogs.com/htooo…
https://www.jianshu.com/p/84b…
https://cloud.tencent.com/dev…

正文完
前端
发表至： 前端
2021-09-20
 0
关于前端:不写代码也能年薪百万Prompt低代码开发实战
关于前端:高级前端开发进阶指南面试篇区别类型问题整理
关于前端:关于考研题库小程序如何获取激活码进行解锁题库的几种方式探索与实践
关于前端:Vue鼠标框选生成坐标组件