vue.js使用JSX语法扩展

简介: vue.js使用JSX语法扩展

JavaScript XML


JSX 是一个看起来很像 XML 的 JavaScript 语法扩展


不同版本需要装不同的依赖


https://github.com/vuejs/jsx

https://github.com/vuejs/babel-plugin-transform-vue-jsx

测试发现 vue 4.2.3 可以直接使用jsx语法


vue -V
@vue/cli 4.2.3
vue create vue-jsx-demo

src/App.vue

<template>
    <div id="app">
        <HelloWorld />
    </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

src/components/HelloWorld.vue


<script>
export default {
  name: "HelloWorld",
  render() {
    return <h2>Hello JSX</h2>;
  }
};
</script>

image.png

相关文章
|
2月前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
62 11
|
3月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
121 1
|
2月前
|
JavaScript
Vue3中路由跳转的语法
Vue3中路由跳转的语法
128 58
|
23天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
28天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
15 0
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
3月前
|
JavaScript 开发工具 容器
初始Vue、Vue模板语法、数据绑定(2022/7/3)
这篇文章是关于Vue.js基础的介绍,包括Vue的简介、安装使用、开发工具、基础知识、模板语法和数据绑定。文中通过代码实例和页面效果展示了如何创建Vue实例、使用插值和指令语法、以及单向和双向数据绑定的方法。
初始Vue、Vue模板语法、数据绑定(2022/7/3)
|
3月前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
3月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
4月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
133 4