vue中使用jsx

为什么需要使用jsx呢?这个需要搞清楚

其实vue官方也说了,对于那些非常多v-if v-else的情况,就可以尝试使用render函数或者jsx,不过render函数写简单的结构还行,结构复杂了就很蛋疼了,而既然用到render了,肯定是有一些复杂的逻辑判断,结构肯定简单不了,所以用jsx就是一个比较好的选择了
今天自己尝试了一下,也是借鉴了网上的一些例子,不过在使用图片的时候发现事情好像有点难搞
<script>
import img_more from '../assets/images/pk/icon-more.png';
export default {
name: 'More',
props: {
type: {
required: true
}
},
data() {
return {
text: 'xxxxxxxjsx',
role: 1
}
},
render() {
return (
<div
class={{
btn: true,
'btn-success': this.type === 'success',
'btn-danger': this.type === 'danger',
'btn-warning': this.type === 'warning'
}}
>
{this.text}
/*这种写法是可以的,图片路径通过变量传递进来,此时可以显示图片*/
<img class={{more: true}} onClick={this.handleClick} src={img_more} alt="" />
/* 这种写法,直接写图片相对路径,无法显示图片 是不是很蛋疼,(暂时还不知道针对图片的具体规则)*/
<img src="../assets/images/pk/icon-more.png" alt="" />
</div>
);
},
methods: {
handleClick() {
console.log('点击了', this.role);
}
}
}
</script> <style scoped lang="scss">
.more{
width: 36px;
height: 36px; //设置背景图片也是可以正常显示图片的
/*background: url("../assets/images/pk/icon-more.png") no-repeat;*/
/*-webkit-background-size: 100%;*/
/*background-size: 100%;*/
} .btn{
width: 100px;
height: 50px;
&.btn-success{
background-color: yellowgreen;
}
} </style>

从上面的代码中可以学习的有

  1. class的写法,包含已知的class以及根据变量来动态添加的
  2. 事件的添加

这个组件自己还只是开了个头,里面的逻辑还没有尝试,待我写完了在来把本文写完

vue中使用jsx的更多相关文章

  1. 在Vue中使用JSX,很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

  2. vue中使用JSX报错,如何解决

    Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...

  3. 在vue中使用jsx语法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  4. vue中的jsx

    一.配置文件package.json { "name": "vuetest", "version": "1.0.0", ...

  5. 记录在vue中使用jsx时踩过的坑

    使用方法及细节就不一一说了. 1.给input或者textarea绑定value时,出现失效的问题.解决方法:https://github.com/vuejs/babel-plugin-transfo ...

  6. vue中书写JSX一些坑-特殊属性名

    举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...

  7. Vue中使用JSX语法

    一 项目结构 二 App组件 <template> <div id="app"> <fruit/> </div> </temp ...

  8. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  9. 谈谈 Vue 模板和 JSX

    工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX.Template 有关吗?当然有.在 React 中使用 JSX,众所周知, JSX 需要经过 T ...

随机推荐

  1. 01 微信小程序入门

    一. 小程序介绍 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用,主要提供给企业.政府.媒体.其他组织或个人的开发者在微信平台上提供服务. 微信小程序和微信的原 ...

  2. 洛谷P5018 对称二叉树

    不多扯题目 直接题解= = 1.递归 由题目可以得知,子树既可以是根节点和叶节点组成,也可以是一个节点,题意中的对称二叉子树是必须由一个根节点一直到树的最底部所组成的树. 这样一来就简单了,我们很容易 ...

  3. Spring IOC的核心机制:实例化与注入

    上文我们介绍了IOC和DI,IOC是一种设计模式,DI是它的具体实现,有很多的框架都有这样的实现,本文主要以spring框架的实现,来看具体的注入实现逻辑. spring是如何将对象加入容器的 spr ...

  4. 在Vue中使用iview的Select控件实现一个多级选项列表

    前言 今天项目要实现一个多级选项列表,发现iview官网上没有写这个例子,于是自己就实现了,如果对你有帮助请点个赞 ‘ * ’!! 解决方法:下面我们就来使用V-for 来定义一个二级选项列表 ,代码 ...

  5. css的属性选择器

    语法说明: 属性选择器需要将对应属性放入到 方括号中  [ ] ,其中包含属性名,标识符(* $ ~ ^ |) 使用说明: [attribute] 例如  [target] 表示 选择带有 targe ...

  6. Eating Everything Efficiently(反向dp)

    传送门 取最大值即可.用拓扑,dfs都可以实现 #include <bits/stdc++.h> using namespace std; const int maxn=500009; i ...

  7. D. Count the Arrays 计数题

    D. Count the Arrays 也是一个计数题. 题目大意: 要求构造一个满足题意的数列. \(n\) 代表数列的长度 数列元素的范围 \([1,m]\) 数列必须有且仅有一对相同的数 存在一 ...

  8. 自动化运维工具Ansible之Roles测验详解

    Ansible Roles 详解与实战案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务数据乱放: 3. 该用 ...

  9. SSM家庭财务管理系统

    包含[项目源码+论文]:http://mp.toutiao.com/preview_article/?pgc_id=6805534721838154254

  10. QtCreator中使用链接库

    说明 之前讨论的DLL的静态链接和动态连接都是基于 MSVC 编译器,但是 MinGW 似乎有另外一套类似但是不相同的机制.下文均在 windows 下使用 Qt Creator 中使用 MinGW ...