最终页面显示效果为

<div class="open-service" style="color: #0199f0; cursor: pointer;">
hello
<p>world</p>
</div>

主页面

parent.vue

<template>
<div class="hello">
<vue-test :typeSpan="typeSpan"></vue-test>
</div>
</template> <script type="text/jsx">
import VueTest from "./jsx/VueTest";
export default {
name: 'HelloWorld',
components:{
VueTest,
},
computed:{
typeSpan(){
return {
text:'hello',
attrs:{
class:"open-service",
style:'color:#0199f0;cursor:pointer'
}, }
}
},
}
</script>

子页面child.vue有两种方法

第一种

<script type="text/jsx">
export default {
props: {
typeSpan:{
type:Object,
default:{}
}
},
created(){ },
methods:{
openContactService(){
alert()
},
},
render(createElement) {
return(
<div
class={this.typeSpan.attrs.class}
style={this.typeSpan.attrs.style}
onClick={this.openContactService}>
{this.typeSpan.text}
<p >world</p>
</div>
)
}
}
</script>

第二种

<script type="text/jsx">
export default {
props:{
typeSpan:{
type:Object,
default:{}
}
},
methods:{
openContactService(){
alert()
}
},
render(createElement, context) {
return createElement(
'div',{
class:this.typeSpan.attrs.class,
style:this.typeSpan.attrs.style,
on:{
click:this.openContactService
}
},[
this.typeSpan.text,
createElement('p','world'),
] )
}
}
</script>

这是两个最简单的例子

参考链接 https://cn.vuejs.org/v2/guide/render-function.html

Vue中jsx的最简单用法的更多相关文章

  1. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. java项目中ehcache缓存最简单用法

      java项目中ehcache缓存最简单用法: 1.下载ehcache-core-2.4.3.jar复制到项目的lib目录下 2.新建ehcache.xml文件,放置在项目src目录下的resour ...

  3. vue中mixin的理解与用法

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...

  4. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  5. Vue中Jsx的使用

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

  6. 在vue中优雅地实现简单页面逆传值

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中, ...

  7. vue 中 px转vw的用法

    下面介绍最简单的用法 1 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev 2 在项目根 ...

  8. vue中is的作用和用法

    回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...

  9. vue中使用vue-i18n 一个简单的国际化操作

    1.安装:npm install vue-i18n --save-dev 2.在main.js文件中引入: import VueI18n from 'vue-i18n' Vue.use(VueI18n ...

随机推荐

  1. 如何正确使用 Spring Cloud?【中】

    3. Spring 集成了哪些常用组件? 从 2004 年发布 1.0 版本开始,Spring 目前已经演进至 5.x 版本了,为不同时期的应用开发提供了强有力的支撑.现在我们正面对微服务.DevOp ...

  2. 【代码审计】ESPCMSP8(易思企业建站管理系统)漏洞报告

    0x00简介 项目名称:ESPCMS-P8(易思企业建站管理系统) 测试平台:Windwos 版本信息:P8.19082801稳定版 更新时间:2019-08-30 00:56:32 网站官网:htt ...

  3. 微软与阿里云合作推出“开放应用模型(OAM)”

    英文原文:Announcing the Open Application Model (OAM) 原文标题:微软与阿里云合作推出“开放应用模型(OAM)” 用于 Kubernetes 及更多平台的应用 ...

  4. asp.net core 3.0 选项模式1:使用

    本篇只是从应用角度来说明asp.net core的选项模式,下一篇会从源码来分析 1.以前的方式 以前我们使用web.config/app.config时是这样使用配置的 var count = Co ...

  5. Openshift 自建DDNS动态域名

    某种情况下如openstack或者openshift/kubernetes软件部署过程由于需要标准的 域名系统(DNS UPDATE)RFC 2136中的动态更新功能, 但是现有的阿里云/华为云均不提 ...

  6. Prometheus学习系列(九)之Prometheus 存储

    前言 本文来自Prometheus官网手册 和 Prometheus简介 存储 Prometheus是一个本地磁盘时间序列数据库,但也可选择与远程存储系统集成,其本地时间序列数据库以自定义格式在磁盘上 ...

  7. Eclipse与IDEA配置tomcat

    在eclipse中配置tomcat 打开servers窗口点击新建服务器 选择apache下对应版本,填写服务器名(自定义) 点击browse指定tomcat解压路径,点击finish 在server ...

  8. Nexus-在项目中使用Maven私服,Deploy到私服、上传第三方jar包、在项目中使用私服jar包

    场景 Ubuntu Server 上使用Docker Compose 部署Nexus(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...

  9. Angular(06)- 为什么数据变化,绑定的视图就会自动更新了?

    这里提一点,前端三大框架(Angular,React,Vue)的数据驱动来更新视图的原理,即 MVVM 的实现. 为什么数据发生变化,绑定的视图就会刷新了呢? 以下是我的个人理解,仅供参考: 在还是 ...

  10. Java学习笔记-Java文件操作流

     day03 输入输出流:读入写出  节点流:   有明确的来源和去向   往往对字节操作 节点流又叫低级流.字节流   处理流:  没有明确的来源和去向  往往对低级流或其他高级流进行操作,不能独立 ...