位置: IT常识 - 正文

Vue中JSX的基本用法(vue中使用jsx语法)

编辑:rootadmin
Vue中JSX的基本用法 基本用法

推荐整理分享Vue中JSX的基本用法(vue中使用jsx语法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue.js的作用,vue.js使用教程,vue中使用jsx,vuex.js,vue中使用js,vue.js的作用,vue中使用jsx,vuex.js,内容如对您有帮助,希望把文章链接给更多的朋友!

首先需要约定一下,使用JSX组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于vue-styled-components写在同一个文件中,复杂的建议放在单独的_Styles.js_文件中,当然也可以不采用CSS-IN-JS的方式,使用Less/Sass来写,然后在文件中import进来。

下面是一个通用的骨架:

import styled from 'vue-styled-components'const Container = styled.div` heigth: 100%;`const Dashboard = { name: 'Dashboard', render() { return ( <Container>内容</Container> ) }}export default Dashboard插值

在JSX中使用单个括号来绑定文本插值

<span>Message: {this.messsage}</span><!-- 类似于v-html --><div domPropsInnerHTML={this.dangerHtml}/><!-- v-model --><el-input v-model={this.vm.name} />

在jsx中不需要把v-model分成事件绑定和赋值二部分分开来写,因为有相应的babel插件来专门处理。

样式

在JSX中可以直接使用class="xx"来指定样式类,内联样式可以直接写成style="xxx"

<div class="btn btn-default" style="font-size: 12px;">Button</div><!-- 动态指定 --><div class={`btn btn-${this.isDefault ? 'default' : ''}`}></div><div class={{'btn-default': this.isDefault, 'btn-primary': this.isPrimary}}></div><div style={{color: 'red', fontSize: '14px'}}></div>遍历

在JSX中没有v-for和v-if等指令的存在,这些全部需要采用Js的方式来实现

{/* 类似于v-if */}{this.withTitle && <Title />}{/* 类似于v-if 加 v-else */}{this.isSubTitle ? <SubTitle /> : <Title />}{/* 类似于v-for */}{this.options.map(option => { <div>{option.title}</div>})}事件绑定

事件绑定需要在事件名称前端加上on前缀,原生事件添加nativeOn

<!-- 对应@click --><el-buton onClick={this.handleClick}>Click me</el-buton><!-- 对应@click.native --><el-button nativeOnClick={this.handleClick}>Native click</el-button><!-- 传递参数 --><el-button onClick={e => this.handleClick(this.id)}>Click and pass data</el-button>

注意:如果需要给事件处理函数传参数,需要使用箭头函数来实现。如果不使用箭头函数那么接收的将会是事件的对象event属性。

高级部分

在Vue中基于jsx也可以把组件拆分成一个个小的函数式组件,但是有一个限制是必需有一个外层的包裹元素,不能直接写类似:

const Demo = () => ( <li>One</li> <li>Two</li>)

必需写成:

const Demo = () => ( <div> <li>One</li> <li>Two</li> </div>)

而在React中可以使用空标签<></>和<react.Fragment></react.Fragment>来实现包裹元素,这里的空标签其实只是react.Fragment的一个语法糖。同时在React 16中直接支持返回数组的形式:

const Demo = () => [ <li>One</li> <li>Two</li>]

那么在Vue中就只能通过遍历来实现类似的功能,大体思路就是把数据先定义好数据然后直接一个map生成,当然如果说元素的标签是不同类型的那就需要额外添加标识来判断了。

{ data() { return { options: ['one', 'two'] } }, render() { const LiItem = () => this.options.map(option => <li>{option}</li>) return ( <div> <ul> <LiItem /> </ul> </div> ) }}事件修饰符

在基础部分简单介绍了事件的绑定用法,这里主要是补充一下事件修饰符的写法。

在模板语法中Vue提供了很多事件修饰符来快速处理事件的冒泡、捕获、事件触发频率、按键识别等。可以直接查看官方文档的事件&按键修饰符部分,这里把相关内容原样搬运过来:

修饰符前缀.passive&.capture!.once~.capture.once或.once.capture~!

使用方式如下:

<el-button {...{ '!click': this.doThisInCapturingMode, '!keyup': this.doThisOnce, '~!mouseover': this.doThisOnceInCapturingMode}}>Click Me!</el-button>

下面给出的事件修饰符是需要在事件处理函数中写出对应的等价操作

修饰符处理函数中的等价操作.stopevent.stopPropagation().preventevent.preventDefault().selfif (event.target !== event.currentTarget) return按键: .enter, .13if (event.keyCode !== 13) return (对于别的按键修饰符来说,可将 13 改为另一个按键码)修饰键: .ctrl, .alt, .shift, .metaif (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)

下面是在事件处理函数中使用修饰符的例子:

methods: { keyup(e) { // 对应`.self` if (e.target !== e.currentTarget) return // 对应 `.enter`, `.13` if (!e.shiftKey || e.keyCode !== 13) return // 对应 `.stop` e.stopPropagation() // 对应 `.prevent` e.preventDefault() // ... }}ref和refInFor

在Vue中ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。

注意:

因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在$refs不是响应式的,因此你不应该试图用它在模板中做数据绑定。

当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

假如在jsx中想要引用遍历元素或组件的时候,例如:

const LiArray = () => this.options.map(option => ( <li ref="li" key={option}>{option}</li>))Vue中JSX的基本用法(vue中使用jsx语法)

会发现从this.$refs.li中获取的并不是期望的数组值,这个时候就需要使用refInFor属性,并置为true来达到在模板中v-for中使用ref的效果:

const LiArray = () => this.options.map(option => ( <li ref="li" refInFor={true} key={option}>{option}</li>))插槽(v-slot)

在jsx中可以使用this.$slots来访问静态插槽的内容。

注意:在Vue 2.6.x版本后废弃了slot和slot-scope,在模板中统一使用新的统一语法v-slot指令。v-slot只能用于Vue组件和template标签。

<div class="page-header__title"> {this.$slots.title ? this.$slots.title : this.title}</div>

等价于模板的

<div class="page-header__title"> <slot name="title">{{ title }}</slot></div>

在Vue官方文档中提到:**父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。**因此像下面的示例是无法正常工作的

<current-user> {{ user.firstName }}</current-user>

在<current-user>组件中可以访问到user属性,但是提供的内容却是在父组件渲染的。如果想要达到期望的效果,这个时候就需要使用作用域插槽了。下面是改写后的代码,更多知识点可以直接查看官方文档的作用域插槽。

<!-- current-user组件定义部分 --><span> <slot v-bind:user="user"> {{ user.lastName }} </slot></span><!-- current-user 使用 --><current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template></current-user>

上面的示例其实就是官方的示例,这里需要说明的是,其实在Vue中所谓的作用域插槽功能类似于React中的Render Props的概念,只不过在React中我们更多时候不仅提供了属性,还提供了操作方法。但是在Vue中更多的是提供数据供父作用域渲染展示,当然我们也可以把方法提供出去,例如:

<template> <div> <slot v-bind:injectedProps="slotProps"> {{ user.lastName }} </slot> </div></template><script> export default { data() { return { user: { firstName: 'snow', lastName: 'wolf' } } }, computed: { slotProps() { return { user: this.user, logFullName: this.logFullName } } }, methods: { logFullName() { console.log(`${this.firstName} ${this.lastName}`) } } }</script>

在父组件中使用:

<current-user> <template v-slot:default="{ injectedProps }"> <div>{{ injectedProps.user.firstName }}</div> <el-button @click="injectedProps.logFullName">Log Full Name</el-button> </template></current-user>

在上面的代码中我们实际上使用解构的方式来取得injectedProps,基于解构的特性还可以重命名属性名,在prop为undefined的时候指定初始值。

<current-user v-slot="{ user = { firstName: 'Guest' } }"> {{ user.firstName }}</current-user>

如果组件只有一个默认的插槽还可以使用缩写语法,将v-slot:default="slotProps"写成v-slot="slotProps",命名插槽写成v-slot:user="slotProps",如果想要动态插槽名还可以写成v-slot:[dynamicSlotName],此外具名插槽同样也有缩写语法,例如 v-slot:header可以被重写为#header

上面介绍了很多插槽相关的知识点足已说明其在开发过程中的重要性。说了很多在模板中如何定义和使用作用域插槽,现在进入正题如何在jsx中同样使用呢?

// current-user components{ data() { return { user: { firstName: 'snow', lastName: 'wolf' } } }, computed: { slotProps() { return { user: this.user, logFullName: this.logFullName } } }, methods: { logFullName() { console.log(`${this.firstName}${this.lastName}`) } }, render() { return ( <div> {this.$scopedSlots.subTitle({ injectedProps: this.slotProps })} </div> ) }}

然后在父组件中以jsx使用:

<current-user {...{ scopedSlots: { subTitle: ({ injectedProps }) => ( <div> <h3>injectedProps.user</h3> <el-button onClick={injectedProps.logFullName}>Log Full Name</el-button> </div> ) }}}></current-user>指令

这里需要注意的是在jsx中所有Vue内置的指令除了v-show以外都不支持,需要使用一些等价方式来实现,比如v-if使用三目运算表达式、v-for使用array.map()等。

对于自定义的指令可以使用v-name={value}的语法来写,需要注意的是指令的参数、修饰符此种方式并不支持。以官方文档指令部分给出的示例v-focus使用为例,介绍二种解决办法:

1 直接使用对象传递所有指令属性

<input type="text" v-focus={{ value: true }} />

2 使用原始的vnode指令数据格式

{ directives:{ focus: { inserted: function(el) { el.focus() } } }, render() { const directives = [ { name: 'focus', value: true } ] return ( <div> <input type="text" {...{ directives }} /> </div> ) }}过滤器

过滤器其实在开发过程中用得倒是不多,因为更多时候可以通过计算属性来对数据做一些转换和筛选。这里只是简单提及一下并没有什么可以深究的知识点。

在模板中的用法如下:

<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>

在jsx中使用方法为:

<div>{this.$options.filters('formatDate')('2019-07-01')}</div>

注意:由于Vue全局的过滤器只用于模板中,如果需要用于组件的方法中,可以把过滤器方法单独抽离出一个公共Js文件,然后引入组件中,然后用于方法中。

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27 提取码: yu27 百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址 码云地址: http://github.crmeb.net/u/defu

Github 地址: http://github.crmeb.net/u/defu

本文链接地址:https://www.jiuchutong.com/zhishi/299913.html 转载请保留说明!

上一篇:可解释深度学习:从感受野到深度学习的三大基本任务:图像分类,语义分割,目标检测,让你真正理解深度学习

下一篇:大学毕业后,送了2个月外卖,哭了一整晚(大学毕业后送快递)

  • 怎样构思产品的软文推广(怎样构思产品的价值)

    怎样构思产品的软文推广(怎样构思产品的价值)

  • 小米10前置摄像头像素多少(小米10前置摄像头拍照模糊)

    小米10前置摄像头像素多少(小米10前置摄像头拍照模糊)

  • 抖音可以看到最近谁浏览了吗(抖音可以看到最近看的直播吗)

    抖音可以看到最近谁浏览了吗(抖音可以看到最近看的直播吗)

  • 华为nova电量百分比怎么设置(华为手机nova电池容量)

    华为nova电量百分比怎么设置(华为手机nova电池容量)

  • 华为p40pro有什么亮点功能(华为p40pro有什么隐藏功能)

    华为p40pro有什么亮点功能(华为p40pro有什么隐藏功能)

  • EXCEL怎么把表格里的字变成竖的(excel怎么把表格变成图片)

    EXCEL怎么把表格里的字变成竖的(excel怎么把表格变成图片)

  • win10装win7触摸板失灵(触摸板 win7)

    win10装win7触摸板失灵(触摸板 win7)

  • 5173提现多久到账支付宝(5173提现多久到账邮政)

    5173提现多久到账支付宝(5173提现多久到账邮政)

  • 765g相当于骁龙多少(765g相当于骁龙845吗)

    765g相当于骁龙多少(765g相当于骁龙845吗)

  • pixiv注册不了怎么办(pixiv app注册不了)

    pixiv注册不了怎么办(pixiv app注册不了)

  • 苹果shift是哪个键

    苹果shift是哪个键

  • ipad5支持指纹识别吗(苹果ipad5有没有指纹)

    ipad5支持指纹识别吗(苹果ipad5有没有指纹)

  • 荣耀20se什么时候上市(荣耀20se怎么样值得买吗)

    荣耀20se什么时候上市(荣耀20se怎么样值得买吗)

  • vivo云服务照片在哪里(vivo云服务照片同步)

    vivo云服务照片在哪里(vivo云服务照片同步)

  • 多媒体是以什么形式存在(多媒体是以什么形式存储的)

    多媒体是以什么形式存在(多媒体是以什么形式存储的)

  • 小米3c路由器是千兆吗(小米3c路由器是wifi6吗)

    小米3c路由器是千兆吗(小米3c路由器是wifi6吗)

  • 什么是pathon语言(pathonize)

    什么是pathon语言(pathonize)

  • 戴尔g7按哪个键开风扇(戴尔g7怎么打开键盘灯光)

    戴尔g7按哪个键开风扇(戴尔g7怎么打开键盘灯光)

  • hrytl00是什么型号(hryal00是什么型号)

    hrytl00是什么型号(hryal00是什么型号)

  • exchange密码不正确(exchange密码不正确怎么设置)

    exchange密码不正确(exchange密码不正确怎么设置)

  • dnf数据异常请规范游戏怎么解决(dnf说我数据异常,我也没用挂啊)

    dnf数据异常请规范游戏怎么解决(dnf说我数据异常,我也没用挂啊)

  • 闲鱼怎么看自己买到宝贝(闲鱼怎么看自己下架的商品)

    闲鱼怎么看自己买到宝贝(闲鱼怎么看自己下架的商品)

  • 微软Surface Pro 3笔记本U盘重装系统win7详细图文步骤(微软surfacepro3上市时间)

    微软Surface Pro 3笔记本U盘重装系统win7详细图文步骤(微软surfacepro3上市时间)

  • 目标检测算法——图像分割数据集汇总(附下载链接)(一阶段目标检测算法)

    目标检测算法——图像分割数据集汇总(附下载链接)(一阶段目标检测算法)

  • java处理字符的函数(java处理字符串公式运算)

    java处理字符的函数(java处理字符串公式运算)

  • 法人是残疾人有什么优惠政策
  • 所得税汇算清缴报告在哪查
  • 委托贷款利息收入需要缴纳增值税么
  • 增值税附征怎么计算
  • 实物折扣的增值税
  • 税务局代个人开票
  • 小规模发票单张限额
  • 零售化妆品交什么税种
  • 发票采集即征即退怎么填
  • 财务发票报销时限是多久
  • 中小企业对应的是
  • 煤矿企业维简费税务规定
  • 转让不动产增值税计算
  • 仲裁调解书赔偿多少钱
  • 工资表的其他扣除
  • 流动比率计算公式速动比率
  • 工程款开票后增值税怎么做分录?
  • 单位老房子拆一补一,而外的面积开发商怎么算价格
  • 审计人员的差旅费放在哪核算
  • 预付账款的借方是应付账款的哪方
  • 清算汇缴报表填写模板
  • 向境外支付违约金要代扣税吗
  • 金税盘发票显示不出确认
  • 购进货物不能抵扣进项税额
  • 仓库收料作业指导书
  • 买水果送什么赠品
  • win7电脑怎么样
  • 代扣代缴个税手续费
  • win11多开
  • 苹果电脑进入安全模式按什么键
  • vue页面获取url参数
  • php 字符串函数
  • 工程结算转收入
  • 收入支出如何结转
  • 提租补贴应计入什么科目
  • 城镇土地使用税纳税义务发生时间
  • 纳税人转让旧房及建筑物
  • 施工方可以向建设单位借款么
  • 捆绑销售如何进行账务处理?
  • php获取字符串位置
  • 使用vscode开发vue例子
  • vite搭建vue3
  • php使用mysql
  • 合并命令如何使用
  • 实现自己的http server loop_in_codes C++博客
  • 丧葬补贴金和抚恤金怎样领取
  • python中重写构造方法
  • 农副产品免税了还需要缴纳个人所得税吗
  • 定额税率举例子
  • 收到政府扶贫款如何做分录
  • 保险公司的奖励制度
  • 小规模收入怎么算
  • 无形资产摊销年限按法律规定还是企业估计
  • 股利分配是什么科目
  • 防伪税控技术维护费普通发票怎么申报
  • 长期待摊费用未摊销完一次性处理怎么走
  • 测试账户收入怎么处理
  • 非公司员工可以发提成吗
  • 废品损失明细账应选择三栏式
  • 违反会计法规定的行为有哪些
  • 会计中的资金
  • mysql关联语句
  • sql数据库性能
  • MySql 5.6.14 Win32位免安装解压缩版配置教程
  • linux里top
  • 64位ubuntu8.04 安装QQ
  • macair蓝牙用不了
  • Win10系统安装包
  • win8应用商店下载
  • coco包装设计
  • jquery中checkbox使用方法简单实例演示
  • 执行批处理命令
  • 创建简单的Web网页实验总结ASP
  • dom事件模型由什么组成
  • jquery获取文件大小
  • android开源app
  • js 上下文
  • 山东省国税地税体制改革
  • 代扣代缴申报表 填表说明
  • 销售土地使用权的税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设