写点什么

在 Vue 中使用 JSX,很 easy 的

发布于: 刚刚

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

 

本文分享自华为云社区《在 Vue 中如何使用 JSX,就这么简单!【建议收藏】》,作者:纸飞机 。

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# oryarn 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'
// 创建一个组件buttonconst 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 stylusyarn add --dev stylus stylus-loader
复制代码


各种 style 安装见:https://www.cnblogs.com/jimc/p/10265198.html

安装完成后新建 HelloWorld.styl,然后引入。


stylus 的使用:https://www.jianshu.com/p/5fb15984f22d

stylus 官网:https://stylus.zcopy.site/

控制台 stylus 报错见:https://blog.csdn.net/csdn_zhoushengnan/article/details/109448369

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 的支持,可以直接使用

<inputv-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,这个上面就挂载了一个这个组件内部的所有插槽,使用 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,对于默认插槽使用 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/p/13324222.html

https://www.jb51.net/article/205764.htm

https://cn.vuejs.org/v2/guide/render-function.html#事件-amp-按键修饰符https://www.cnblogs.com/htoooth/p/6973238.html

https://www.jianshu.com/p/84b708c80598

https://cloud.tencent.com/developer/article/1704608


点击关注,第一时间了解华为云新鲜技术~

发布于: 刚刚阅读数: 2
用户头像

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区,提供全面深入的云计算前景分析、丰富的技术干货、程序样例,分享华为云前沿资讯动态,方便开发者快速成长与发展,欢迎提问、互动,多方位了解云计算! 传送门:https://bbs.huaweicloud.com/

评论

发布
暂无评论
在Vue中使用JSX,很easy的