个人中心
gpt4 book ai didi

如何在 Vue 中使用 JSX

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章如何在 Vue 中使用 JSX由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

JSX 是什么

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

为什么要在 Vue 中使用 JSX

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

?
1
2
3
4
5
6
7
8
9
10
createElement(
  'anchored-heading' , {
  props: {
   level: 1
  }
  }, [
  createElement( 'span' , 'Hello' ),
  ' world!'
  ]
)

其对应的模板是下面:

?
1
2
3
< anchored-heading :level = "1" >
  < span >Hello</ span > world!
</ anchored-heading >

这显然是吃力不讨好的，这个时候就派上 JSX 上场了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在 Vue 中写 JSX 吧 。

开始

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

?
1
2
# 直接回车即可
vue create vue-jsx

安装依赖:

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

配置 .babelrc :

?
1
2
3
4
5
6
7
8
9
module.exports = {
  presets: [
  '@vue/cli-plugin-babel/preset' ,
  [ '@vue/babel-preset-jsx' ,
   {
   'injectH' : false
   }]
  ]
}

基础内容

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render() {
  return (
  <div>
   <h3>内容</h3>
   { /* 纯文本 */ }
   <p>hello, I am Gopal</p>
   { /* 动态内容 */ }
   <p>hello { this .msg }</p>
   { /* 输入框 */ }
   <input />
   { /* 自定义组件 */ }
   <myComponent></myComponent>
  </div>
  );
}

Attributes/Props

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

?
1
2
3
render() {
  return <div><input placeholder= "111" /></div>
}

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

?
1
2
3
4
5
6
render() {
  return <input
    type= "email"
    placeholder={ this .placeholderText}
    />
}

我们也可以展开一个对象 。

?
1
2
3
4
5
render (createElement) {
  return (
   <button {... this .largeProps}></button>
  )
}

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

?
1
2
3
4
5
6
7
const inputAttrs = {
  type: 'email' ,
  placeholder: 'Enter your email'
};
render() {
  return <input {...{ attrs: inputAttrs }} />
}

插槽

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

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

父组件:

?
1
2
3
4
5
6
7
8
render() {
  { /* 具名插槽 */ }
  <myComponent>
  <header slot= "header" >header</header>
  <header slot= "content" >content</header>
  <footer slot= "footer" >footer</footer>
  </myComponent>
}

子组件:

?
1
2
3
4
5
6
7
8
9
10
11
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 值 。

父组件:

?
1
2
3
4
5
6
7
8
9
10
11
12
render() {
  { /* 具名插槽 作用域插槽 */ }
  <myComponent {
  ...{
   scopedSlots: {
   test: ({user}) => (
    <div>{user.name}</div>
   )
   }
  }
  }>
  </myComponent>

子组件:

?
1
2
3
4
5
6
7
8
9
render() {
  return (
  <div>
   { this .$scopedSlots.test({
   user: this .user
   })}
  </div>
  );
}

指令

常见的指令如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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 文件，内容如下:

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

父组件中调用如下

?
1
2
3
4
5
6
7
8
import funComponent from './FunctionalComponent'
 
...
 
render() {
  return {/* 函数式组件 */}
   < funComponent message = "Gopal" ></ funComponent >
}

以上就是如何在 Vue 中使用 JSX的详细内容，更多关于Vue 中使用 JSX的资料请关注我其它相关文章！ 。

原文链接：https://www.cnblogs.com/vickylinj/p/14384315.html 。

最后此篇关于如何在 Vue 中使用 JSX的文章就讲到这里了,如果你想了解更多关于如何在 Vue 中使用 JSX的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： C++ inline内联函数详解
文章推荐： node.js 基于 STMP 协议和 EWS 协议发送邮件
文章推荐： c++11 atomic的使用详解
文章推荐： Vue单页面应用中实现Markdown渲染
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com