Vue中从template到jsx语法教程示例

更新时间：2023年10月25日 09:00:04 作者：熊的猫

这篇文章主要为大家介绍了Vue中从template到jsx语法教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

从 template 到 jsx

大多数 Vue 开发者都习惯使用 template 模板语法，因为 template 模板语法具有如下优点：

熟悉的类 HTML 结构
- 模板语法可以像 HTML 一样进行布局和设计，上手快、学习成本比低
更简洁的写法
- 例如，可以在模板中使用各种修饰符来达到简化编写代码的过程
结构与逻辑分离
- 元素结构和逻辑并没有杂糅在一起，因此结构上更简洁明了
提供更好的性能
- Vue3 中对模板语法在编译阶段进行的各种优化，使得其性能更好

但即便如此，在某些场景下还是不得不在 Vue 中使用 jsx 语法实现需求，例如开发内部组件库选择的编写形式就是 jsx 语法等。

而对于习惯使用 template 模板语法的开发者并不是轻易的就能转换到相应 jsx 语法，因此本文就列举一些 template 模板语法中对应的 jsx 语法应该怎么写。

插值表达式（文本插值）

template 语法

最基本的数据绑定形式就是文本插值，它使用的是 Mustache 语法 (即 {{}} )，双大括号中的内容最终会将数据解释为纯文本。

<span>Message: {{ msg }}</span>

jsx 语法

而 JSX 中使用文本插值就从双大括号 {{ }} 变成单大括号 {}

<span>Message: { msg }</span>

原始 HTML

template 语法

双大括号会将数据解释为纯文本，而不是 HTML，因此若想在模板中插入 HTML，我们需要使用 v-html 指令：

// html 字符内容
rawHtml = '<span>hello!</span>'
// 最终变成纯文本
<p>Using text interpolation: {{ rawHtml }}</p>
// 最终渲染为 html 结构
<div>Using v-html directive: <p v-html="rawHtml"></p></div>

jsx 语法

而在 jsx 语法中就更直接了，我们直接通过变量的形式来写 html 结构配合上文本插值 {} 即可：

// 最终变成纯文本
cosnt rawHtml = '<span>hello!</span>'
<p>Using text interpolation: { rawHtml }</p>
// 最终渲染为 html 结构
cosnt rawHtml = <span>hello!</span>
<div>Using v-html directive: { rawHtml }</div>

条件渲染

template 语法

在模板语法中和条件渲染相关的可以直接使用指令 v-if / v-show 来实现：

<p v-show="isShow">hello world！</p>
<p v-show="!isShow">hello bros！</p>
<p v-if="isShow">hello world！</p>
<p v-else>hello bros！</p>

jsx 语法

而在 jsx 语法中我们就不能使用指令形式了，取而代之的是 JavaScript 中的 if-else、&&、||、三元表达式 等形式：

if-else

const content = (isShow) => {
    if(isShow){
      return <h1>hello world！</h1>
    }else{
      return <div>hello bros！</div>
    }
}

{ isShow && <div>hello world！</div> }
{ !isShow && <div>hello bros！</div> }

const content1 = <h1>hello world！</h1>
const content2 = <h1>hello world！</h1>
<div>{ content1 || content2 } </div>

三元表达式

const content1 = <h1>hello world！</h1>
const content2 = <h1>hello world！</h1>
<div>{ isShow ? content1 : content2 } </div>

列表渲染

tempalte 语法

在 template 模板中可以通过 v-for 指令来快速实现列表渲染：

<ul>
  <li v-for="item in list" :key="item.key">{{ item.text }}</li>
</ul>

jsx 语法

在 jsx 语法中通常是使用 Array.prototype.map() 方法来实现列表渲染，原因就在于这个遍历数组的方法返回值也是数组：

<ul>
  {
    list.map((item) => (
      <li key={item.key}>{ item.text }</li>
    ))
  }
</ul>

style 外部样式

template 语法

在 .vue 文件中可以通过 <style> 标签来编写样式或导入外部样式，还可以直接通过设置 scope 实现局部样式:

<script setup lang="ts">
import { ref } from "vue";
import ChcekBox from "./components/CheckBox";
const checkResult = ref(false);
</script>
<template>
  <ChcekBox v-model="checkResult">选项</ChcekBox>
</template>
<style scope>
@import './index.less';
</style>

jsx 语法

而在一个 .jsx / .tsx 文件中由于不存在 <style> 元素，因此无法通过其来编写或导入样式，或者通过 scope 实现局部样式，可通过如下方式导入：

直接 import 导入

import { defineComponent, ref } from 'vue'
import './index.less'
export default defineComponent({})

通过 CSS Module 导入

import { defineComponent, ref } from 'vue'
import styleModule from './index.module.less'
export default defineComponent({
    setup() {
        return () => (
            <label class={styleModule.abs}>hello world!</label>
         )
})

事件绑定

tempalte 语法

在模板语法中绑定事件可以使用 v-on（简写 @）来实现，并且可以在模板中直接传递参数给目标事件，也可以配合使用事件修饰符，支持内联事件等等。

绑定处理函数

<!-- 方法处理函数 --> 
<button v-on:click="doThis"></button>
<!-- 缩写 --> 
<button @click="doThis"></button>

使用修饰符

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

传递参数

<!-- 传参 --> 
<button @click="doThis($event, params)"></button>

内联事件

<!-- 传参 --> 
<button @click="count++"></button>

jsx 语法

上述写法在 jsx 语法中的对应写法具体如下：

绑定处理函数

需要使用 on + [eventName] 的形式来绑定事件，可使用或不使用驼峰形式，但当使用 typescript 时建议使驼峰形式，否则会有提示：

<!-- 驼峰 --> 
<button onClick={doThis}></button>
<!-- 非驼峰 --> 
<button onclick={doThis}></button>

使用修饰符

在 jsx 语法中不能直接使用 .stop 形式的事件修饰符，需要通过 withModifiers 函数来实现，其支持事件和按键修饰符：

<!-- withModifiers  -->
<button onClick={withModifiers(doThis, ['prevent'])}></button>

传递参数

在 jsx 语法中不能像在模板中使用 handleAction($event, params) 的方式来实现传参，因为这种写法在 jsx 中属于调用，因此相当于把函数返回值作为事件绑定到目标元素上，大多数情况下会抛出异常（即返回值不一定为函数）：

使用 bind 实现传参

const bindEvent = doThis.bind(tarrget)
<!-- 传参 -->
<button onClick={bindEvent}></button>

使用 箭头函数 实现传参

<!-- 传参 -->
<button onClick={ (parms) => bindEvent(parms)}></button>

内联事件

在 jsx 语法并不支持内联事件的写法，因此可以使用箭头函数来包裹：

<!-- 方式一 -->
<button onClick={ () => count++ }></button>
<!-- 方式一 -->
const addCount = () => count++
<button onClick={ addCount }></button>

双向绑定 v-model

template 语法

v-model 可以在组件上使用以实现双向绑定：

在原生表单元素上使用 v-model 会被编译为 value 属性 和 input 事件
在组件上使用 v-model 会被编译为 modelValue 属性 和 update:modelValue 事件
支持自定义 v-model 绑定的 属性名 和 事件名

// 常见表单
<input v-model="searchText" />
// 自定义组件
<CustomInput v-model="searchText" />
// 自定义 v-model 名
<MyComponent v-model:title="bookTitle" />

jsx 语法

正常绑定

<CustomInput v-model={searchText} />

自定义名称

jsx 语法中不存在类似 v-model:title 的命名形式，因此我们给 v-model 一个数组，如 [title, 'titleAlias']：

数组的第一个参数就是要绑定的值

数组的第二个参数就是要绑定的自定义名称

<Custom v-model={[title, 'titleAlias']} />

slot 插槽

template 语法

在模板语法中可以 <slot> 元素来定义插槽出口，用于标示父元素提供的插槽内容的渲染位置:

默认插槽

<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>

具名插槽

<button class="fancy-btn">
  <slot name="content"></slot> <!-- 插槽出口 -->
</button>

动态插槽

<div> 
    <!-- 动态插槽 --> 
    <template v-slot:[dynamicSlotName]> ... </template> 

    <!-- 缩写为 --> 
    <template #[dynamicSlotName]> ... </template> </base-layout>
</div>

作用域插槽

<!-- MyComponent 模板 --> 
<div>
    <slot :text="greetingMessage" :count="1"></slot> 
</div>
<!-- 父组件模板 --> 
<MyComponent v-slot="slotProps"> 
    {{ slotProps.text }} {{ slotProps.count }} 
</MyComponent>

jsx 语法

由于 jsx 语法中不存在 <slot> 元素，因此只能通过如下方式来渲染插槽内容：

从 SetupContext 中获取

defineComponent({
    setup(props, { slots }) {
        return <div>
            { slots.default && slots.default() }
            { slots.nameSlot && slots.nameSlot() }
        </div>
    }
})

使用 useSlot() 方法

import { defineComponent, renderSlots } from 'vue'
defineComponent({
    setup(props, context) {
        const slots = useSlots();
        return <div>
            { renderSlot(slots, 'default') }
        </div>
    }
})

使用 renderSlot() 方法

import { defineComponent, renderSlot } from 'vue'
defineComponent({
    setup(props, { slots }) {
        return <div>
            { renderSlot(slots, 'default') }
        </div>
    }
})

使用 Scoped Slots 作用域插槽

<!-- MyComponent 模板 --> 
defineComponent({
    setup(props, { slots }) {
        const slotParams = { name: 'hello' };
        return <div>
            { slots.default && slots.default(slotParams) }
        </div>
    }
})
<!-- 父组件模板 -->
defineComponent({
    setup(props, { slots }) {
        return <div>
            <MyComponent v-slot="slotProps"> 
                {{ slotProps.name }}
            </MyComponent>
        </div>
    }
})

以上就是Vue中从template到jsx语法指北的详细内容，更多关于Vue template jsx语法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue2.0实现组件之间数据交互和通信操作示例
这篇文章主要介绍了Vue2.0实现组件之间数据交互和通信操作,结合实例形式分析了vue2.0组件之间通信的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
2019-05-05
Vue transition过渡组件详解
我们现在可以了解一下vue的过渡，vue在插入、更新以及移除DOM元素的时候，提供了很多不同方式过渡的效果，如果在css过渡自动应用class，在过渡钩子函数中使用JavaScript直接操作DOM就可以了
2022-08-08
Vue框架下引入ActiveX控件的问题解决
这篇文章主要介绍了Vue框架下引入ActiveX控件的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
详解VUE 定义全局变量的几种实现方式
本篇文章主要介绍了VUE 全局变量的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue实现自定义公共组件及提取公共的方法
这篇文章主要介绍了vue实现自定义公共组件及提取公共的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue路由的模块自动化与统一加载实现
这篇文章主要介绍了Vue路由的模块自动化与统一加载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue组件与生命周期详细讲解
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
2022-10-10
vue中如何携带参数跳转页面
这篇文章主要介绍了vue中如何携带参数跳转页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
如何使用Vue进行文件预览与打印功能
这篇文章主要给大家介绍了关于如何使用Vue进行文件预览与打印功能的相关资料,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,需要的朋友可以参考下
2023-10-10
vue 递归组件的简单使用示例
这篇文章主要介绍了vue 递归组件的简单使用示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01