如何在 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+vant实现购物车全选和反选功能
Nov 17 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
Vue router配置与使用分析讲解
Dec 24 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
php通过各种函数判断0和空
2020/07/04 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python元组操作实例解析
2014/09/23 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
授权委托书格式模板
2014/04/03 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
中标通知书范本
2015/04/17 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书