vue&jsx文档

vue实例属性

// App.ts
import hBtn from './components/hBtn'
import hUl from './components/hUl' export default {
data(){
return {
theme: "mdui-theme-pink",
accent: "mdui-theme-accent-pink",
users:['aoo', 'boo', 'coo']
}
},
methods:{ },
render(h){
return h('div',{
'class':[this.theme, this.accent],
attrs:{
id: 'app'
}
},[
h(hBtn,{
'class':['mdui-color-theme-accent']
}),
h('ul',{},
[
h('li',{
'class':{
'text-danger':true
},
style:{
color:'red';
}
} ,'start'),
this.users.length
? this.users.map((key, index)=>{
return h('li',key)
})
: h('li','v-if else 这样写')
,
h('li', 'end')
]
),
h(hUl,{
attrs:{
users:['user1', 'user2']
}
})
]);// return end
}, //render end
}

// src/components/hBtn.ts

var Text = {// 在内部定义了一个组件
props:['body'],
render(h){
return h('span',[this.body])
}
} export default {
data(){
return {
myName: "ajanuw"
}
},
methods:{
echo (num:number):void {
alert(num)
}
},
mounted(){
console.log( '组件渲染完成!!')
},
render(h) {
return h(
'button',
{
// 和`v-bind:class`一样的 API
'class':['mdui-btn'],
style: {// 定义 style
fontSize: '22px'
},
attrs:{// 定义attribute, 可以利用这个更组件传递 props
id: "ajanuw"
},
domProps: {// DOM 属性
// innerHTML 会替换组件内部的赋值
},
on: {
click: this.echo.bind(null, 1995)
}
},
[
h(Text, {attrs:{body:"this a "},ref: 'start'} ),
h(Text, {attrs:{// 使用text组件, 传递props
body:this.myName}, ref: 'end'} )
]
);
}
}

// src/components/hUl.ts
// 渲染一个列表 var list = {
props:['body']
render(h){
return h('li', this.body)
}
}; export default {
props:['users'],
render(h){
if(this.users){
if(this.users.length){
return h('ul',{},[
this.users.map((key, index)=>{
return h(list,{
attrs:{
body: key
}
})
})
])
}else{
return h('ul', {}, [
return h(list, {
attrs:{
body: "没有数据哦!"
}
})
])
}
} }, //render end
}

下面是jsx

vue init webpack vueJsx

cd vueJsx

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev

npm i

npm start

// .babelirc

{
"presets": ["env"],
"plugins": ["transform-vue-jsx"]
}

// App.js

var Text = {
props:['body'],
render(h){
return(
<p
onClick={ ()=> console.log( this.body)}
style={{color:'red'}}
>
hello {this.body}
</p>
);// return end
}
}
var List = {
props:['body'],
render(h){
return (
<li onClick={()=> console.log( this.body)}>{ this.body}</li>
);
}
} export default {
data(){
return {
name:"ajanuw",
users: ['aoo', 'boo']
}
},
methods:{
echo(name){
alert( name)
}
},
render(h){
return (
<div id="app">
<Text body={this.name}/>
<ul>
{
this.users.length !==0
? this.users.map((key, index)=>{
return <List body={key} key={index}/>
})
: <li>没有数据</li>
}
</ul>
</div>
);// return end
}, // render end
}

"vue": "^2.5.2" 发现自带 jsx 模块。。。

把App.vue 改成 App.js 文件

// App.js
export default {
data(){
return {
name: 'ajanuw'
}
}, render(){
return (
<div id="app">
<p>hello {this.name}</p>
</div>
)
}
}
// main.js
import App from './App' => import App from './App.js'

vue使用render渲染&jsx的更多相关文章

  1. Vue之render渲染函数和JSX的应用

    一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...

  2. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  3. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

  4. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  5. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  6. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  7. vue用template还是JSX?

    各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...

  8. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  9. Vue 服务端渲染(SSR)

    什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...

随机推荐

  1. Mentor面向智能家居的IoT方案

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wireless_com/article/details/82111734 眼下有各种智能家居的自己主 ...

  2. Spring导出可以运行的jar包

    最近需要解决Maven项目导入可执行的jar包的问题,如果项目不包含Spring,那么使用mvn assembly:assembly即可,详情可以参考:http://www.cnblogs.com/l ...

  3. ffmpag总结_android_to_ios视频转换

    项目需求: 需要android和ios拍的视频在两个平台上都能播放. ffmpag很早以前就安装好了,忘了是如何装了. 一直无法将android同事的视频转成mp4在ios上播放. 后来发现ffmpa ...

  4. primary库新增数据文件后,standby库无法创建文件并终止数据同步

    主库是RAC环境,使用asm存放数据文件,备库是操作系统本地文件系统存放数据文件.在主库执行以下操作: SQL> alter tablespace ysdv add datafile '+dat ...

  5. java解惑--摘要

    (1)下面是一个试图解决上述问题的程序,它会打印出什么呢?public class Change{public static void main(String args[]){System.out.p ...

  6. 菜鸟学SSH(十九)——提高用户体验之404处理

    只要做过WEB开发人对于“404”已经再熟悉不过了吧.当我们访问的资源不存在时,它就会跑出来跟你打招呼啦.但是默认情况下,404页面比较简陋,不是很友好.而且一般用户不知道404是个神马东东,还以为是 ...

  7. ECMAScript 6 入门之字符串

    1.新增字符串的方法 1.字符是否存在 console.log("Yo".indexOf("Y")!=-1); console.log("Yo&quo ...

  8. 灯箱效果插件Magnific Popup详解

    Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件.它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用. 官网地址: http://dimsemenov.co ...

  9. <BEA-141281> <unable to get file lock, will retry ...>

    原文:http://gdutlzh.blog.163.com/blog/static/164746951201291903824812/ <BEA-141281> <unable t ...

  10. MSSQL 2012 修改所有表的架构Schame

    ALTER SCHEMA [dbo] TRANSFER [sq_szswdjd].COM_Category ); declare csr1 cursor for select 'Name' = nam ...