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的资料请关注其它相关文章!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]