Vue中jsx的最简单用法
最终页面显示效果为
<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>
这是两个最简单的例子
Vue中jsx的最简单用法的更多相关文章
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- java项目中ehcache缓存最简单用法
java项目中ehcache缓存最简单用法: 1.下载ehcache-core-2.4.3.jar复制到项目的lib目录下 2.新建ehcache.xml文件,放置在项目src目录下的resour ...
- vue中mixin的理解与用法
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
- vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
- Vue中Jsx的使用
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...
- 在vue中优雅地实现简单页面逆传值
[需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中, ...
- vue 中 px转vw的用法
下面介绍最简单的用法 1 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev 2 在项目根 ...
- vue中is的作用和用法
回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...
- vue中使用vue-i18n 一个简单的国际化操作
1.安装:npm install vue-i18n --save-dev 2.在main.js文件中引入: import VueI18n from 'vue-i18n' Vue.use(VueI18n ...
随机推荐
- cesium计算当前地图范围extent以及近似当前层级zoom
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- Java基础语法02-流程控制-if-switch-for-while
流程控制语句 顺序结构 任何编程语言中最常见的程序结构就是顺序结构.顺序结构就是程序从上到下逐行地执行,中间没有任何判断和跳转. 分支结构 if(条件表达式){ 语句体;} 执行流程 首先判断条件表达 ...
- Maven pom.xml文件深度学习
本文介绍Maven项目构建中,pom.xml文件的生成规则和常用节点的使用方法.pom.xml官方网址:http://maven.apache.org/pom.html pom简介 pom作为项目对象 ...
- MySql 更新死锁问题 Deadlock found when trying to get lock; try restarting transaction
文章导航-readme MySql 更新死锁问题 Deadlock found when trying to get lock; try restarting transaction 1.场景 //t ...
- C# -- Quartz.Net入门案例
1. 入门案例 using Quartz;using Quartz.Impl; public class PrintTime : IJob { public Task Execute(IJobExec ...
- (转)LSTM神经网络介绍
原文链接:http://www.atyun.com/16821.html 扩展阅读: https://machinelearningmastery.com/time-series-prediction ...
- AssemblyBuilder以及Activator双剑合璧
AssemblyBuilder和Activator两个类是DispatchProxy类实现动态代理以及AOP的根本,示例demo可参考 DispatchProxy实现动态代理及AOP .Assembl ...
- ProjectServer2010升级到ProjectServer2016,Sharepoint2010升级到Sharepoint2016第一章
之后还原 Project Server 2010 数据库和包含 Project Web App 网站数据的 SharePoint 内容数据库,您可以运行数据和 Project Web App 网站集升 ...
- [转]UiPath Installing the Firefox Extension
本文转自:https://docs.uipath.com/studio/lang-en/v2019/docs/installing-the-firefox-extension From UiPath ...
- 地图 SDK 系列教程-在地图上展示指定区域(转载)
腾讯位置服务地图SDK是一套提供多种地理位置服务的应用程序接口.通过调用该接口,开发者可以在自己的应用中加入地图相关的功能(如地图展示.标注.绘制图形等),轻松访问腾讯地图服务和数据,构建功能丰富.交 ...