Vue中使用JSX语法
一 项目结构
二 App组件
<template>
<div id="app">
<fruit/>
</div>
</template> <script>
import "./components/Fruit.js";
export default {
name: "App"
};
</script> <style lang="scss">
</style>
三 Fruit组件
import Vue from "vue";
import Mongo from "./Mongo.vue"; Vue.component("fruit", {
data() {
return {
kind: "大青芒",
address: "云南"
};
},
render() {
const { kind, address } = this;
return (
<Mongo kind={kind} address={address}>
very delicious
</Mongo>
);
}
});
四 芒果组件
<template>
<div>
<h2>芒果</h2>
<slot/>
<h6>{{kind}},{{address}}</h6>
</div>
</template>
<script>
export default {
name: "Mango",
props: ["kind", "address"]
};
</script>
五 运行效果
Vue中使用JSX语法的更多相关文章
- 在vue中使用jsx语法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...
- 在Vue中使用JSX,很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
- vue中使用jsx
vue中使用jsx 为什么需要使用jsx呢?这个需要搞清楚 其实vue官方也说了,对于那些非常多v-if v-else的情况,就可以尝试使用render函数或者jsx,不过render函数写简单的结构 ...
- vue中使用JSX报错,如何解决
Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...
- vue 中的.sync语法糖
提到父子组件相互通信,可能大家的第一反应是$emit,最近在学着封装组件,以前都是用的别人封装好的UI组件,对vue中的.sync这个修饰符有很大的忽略,后来发现这个修饰符很nice,官方对她的描述是 ...
- vue中的jsx
一.配置文件package.json { "name": "vuetest", "version": "1.0.0", ...
- 记录在vue中使用jsx时踩过的坑
使用方法及细节就不一一说了. 1.给input或者textarea绑定value时,出现失效的问题.解决方法:https://github.com/vuejs/babel-plugin-transfo ...
- vue中书写JSX一些坑-特殊属性名
举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...
- 解决Vite-React项目中js使用jsx语法报错的问题
背景 在做存量项目接入Vite测试时发现,存量(老)项目中很多是直接在js中书写jsx语法,使用Vite启动时就会抛出一堆问题Failed to parse source. 不嫌麻烦可以跑个脚本批量修 ...
随机推荐
- PAT Advanced 1033 To Fill or Not to Fill (25 分)
With highways available, driving a car from Hangzhou to any other city is easy. But since the tank c ...
- zencart 输出产品特价折扣百分比
通过调用zen_get_products_base_price($products_id)获取原价,zen_get_products_special_price($products_id)获取特价,进 ...
- .NET CORE学习笔记系列 开篇介绍
ASP.NET Core学习和使用了一段时间了,好记性不如烂笔头,通过查阅官网学习文档和一些大神们的博客总结一下.主要路线先总结一下ASP.NET Core的基础知识,然后是ASP.NET Core ...
- 告别if/else连环写法
1.once Upon a time 在平时的编码过程中,我们大部分新手可能都特别钟情于 if/else连环写法,比如举个简单栗子: 拿订单来说,我们正常的订单类型有多种,那么对应就会生成不同的收款, ...
- LVM逻辑卷理论及配置
LVM的概念 LVM 是 Logical Volume Manager 的简称,译为中文就是逻辑卷管理.它是 Linux 系统对磁盘分区的一种管理机制. LVM 是在硬盘分区之上建立一个逻辑层,这个逻 ...
- HDU-4289-Control(最大流最小割,拆点)
链接: https://vjudge.net/problem/HDU-4289 题意: You, the head of Department of Security, recently receiv ...
- Vue路由参数设置可有可无
参数后面使用 ? id 后面加个 ‘ ? ’ ,将 id 设置为可选参数 { name: "index", path: '/p/:id?', component: resolve ...
- 参数类型*&是什么意思?
前两天摸鱼聊天的时候遇到一个问题,一个链表的函数中,有一个参数显得很奇怪 (大概是一个样子的)ListNode<T>*& l 这个参数l除了用了一个*之外还用了一个&,直觉 ...
- Codeforces 919E Congruence Equation ( 数论 && 费马小定理 )
题意 : 给出数 x (1 ≤ x ≤ 10^12 ),要求求出所有满足 1 ≤ n ≤ x 的 n 有多少个是满足 n*a^n = b ( mod p ) 分析 : 首先 x 的范围太大了,所以使 ...
- POJ 2528 Mayor’s posters (线段树段替换 && 离散化)
题意 : 在墙上贴海报, n(n<=10000)个人依次贴海报,给出每张海报所贴的范围li,ri(1<=li<=ri<=10000000).求出最后还能看见多少张海报. 分析 ...