如何在 Vue 中使用 JSX


Posted in Vue.js onFebruary 14, 2021

JSX 是什么

JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性

为什么要在 Vue 中使用 JSX

有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的

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 吧

开始

快读创建一个 Vue 项目,直接使用 vue-cli 创建一个项目:

# 直接回车即可
vue create vue-jsx

安装依赖:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置 .babelrc :

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

基础内容

这里展示在 Vue 中书写一些基础内容,包括纯文本、动态内容、标签使用、自定义组件的使用,这些跟我们平时使用单文件组件类似,如下所示:

render() {
 return (
 <div>
  <h3>内容</h3>
  {/* 纯文本 */}
  <p>hello, I am Gopal</p>
  {/* 动态内容 */}
  <p>hello { this.msg }</p>
  {/* 输入框 */}
  <input />
  {/* 自定义组件 */}
  <myComponent></myComponent>
 </div>
 );
}

Attributes/Props

Attributes 的绑定跟普通的 HTML 结构一样

render() {
 return <div><input placeholder="111" /></div>
}

注意,如果动态属性,之前是 v-bind:placeholder="this.placeholderText" 变成了placeholder={this.placeholderText}

render() {
 return <input
   type="email"
   placeholder={this.placeholderText}
   />
}

我们也可以展开一个对象

render (createElement) {
 return (
  <button {...this.largeProps}></button>
 )
}

像 input 标签,就可以如下批量绑定属性

const inputAttrs = {
 type: 'email',
 placeholder: 'Enter your email'
};
render() {
 return <input {...{ attrs: inputAttrs }} /> 
}

插槽

我们来看下怎么实现具名插槽和作用域插槽

具名插槽:父组件的写法和单文件组件模板的类似,通过 slot="header" 这样方式指定要插入的位置。子组件通过 this.$slots.header 方式指定插槽的名称,其中 header 就是插槽的名称

父组件:

render() {
 {/* 具名插槽 */}
 <myComponent>
 <header slot="header">header</header>
 <header slot="content">content</header>
 <footer slot="footer">footer</footer>
 </myComponent>
}

子组件:

render() {
 return (
 <div>
  {/* 纯文本 */}
  <p>我是自定义组件</p>
  {this.$slots.header}
  {this.$slots.content}
  {this.$slots.footer}
 </div>
 );
}

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

父组件:

render() {
 {/* 具名插槽 作用域插槽 */}
 <myComponent {
 ...{
  scopedSlots: {
  test: ({user}) => (
   <div>{user.name}</div>
  )
  }
 }
 }>
 </myComponent>

子组件:

render() {
 return (
 <div>
  {this.$scopedSlots.test({
  user: this.user
  })}
 </div>
 );
}

指令

常见的指令如下所示:

render() {
 {/* 指令 */}
 {/* v-model */}
 <div><input vModel={this.newTodoText} /></div>
 {/* v-model 以及修饰符 */}
 <div><input vModel_trim={this.tirmData} /></div>
 {/* v-on 监听事件 */}
 <div><input vOn:input={this.inputText} /></div>
 {/* v-on 监听事件以及修饰符 */}
 <div><input vOn:click_stop_prevent={this.inputText} /></div>
 {/* v-html */}
 <p domPropsInnerHTML={html} />
}

函数式组件

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

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

父组件中调用如下:

import funComponent from './FunctionalComponent'

...

render() {
 return {/* 函数式组件 */}
  <funComponent message="Gopal"></funComponent>
}

以上就是如何在 Vue 中使用 JSX的详细内容,更多关于Vue 中使用 JSX的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
详解Vue的七种传值方式
Feb 08 #Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
vue如何使用rem适配
Feb 06 #Vue.js
You might like
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
CCPry JS类库 代码
2009/10/30 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
vue项目中使用fetch的实现方法
2019/04/25 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python中私有函数调用方法解密
2016/04/29 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python实现堆排序的实例讲解
2020/02/21 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
建筑公司文秘岗位职责
2013/11/29 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
初中生评语大全
2014/04/24 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
创业计划书之农家乐
2019/10/09 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android