vue使用render渲染&jsx
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的更多相关文章
- Vue之render渲染函数和JSX的应用
一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- Render渲染函数和JSX
1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- vue用template还是JSX?
各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- Vue 服务端渲染(SSR)
什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...
随机推荐
- Android四大组件应用系列——使用BroadcastReceiver和Service实现倒计时
一.问题描述 Service组件可以实现在后台执行一些耗时任务,甚至可以在程序退出的情况下,让Service在后台继续保持运行状态.Service分本地服务和远程服务,Local地服务附在主进程上的m ...
- 转: chrome64打开弹出窗flash的办法
https://jingyan.baidu.com/article/380abd0a38f0411d90192c2e.html
- 郑晔谈 Java 开发:新工具、新框架、新思维【转载】【整理】
原文地址 导语:"我很惊讶地发现,现在许多程序员讨论的内容几乎和我十多年前刚开始做 Java 时几乎完全一样.要知道,我们生存的这个行业号称是变化飞快的.其实,这十几年时间,在开发领域已经有 ...
- Spark机器学习(11):协同过滤算法
协同过滤(Collaborative Filtering,CF)算法是一种常用的推荐算法,它的思想就是找出相似的用户或产品,向用户推荐相似的物品,或者把物品推荐给相似的用户.怎样评价用户对商品的偏好? ...
- javascript中return function与return function()的区别
参考https://stackoverflow.com/questions/7629891/functions-that-return-a-function-javascript 问题:唯一的区别是r ...
- 【SqlServer】SqlServer的游标使用
什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...
- IDEA使用笔记(六)——设置项目的JDK配置
1:由于dev分支和master分支的代码差异比较多,所以,就从master上分出一个新的分支dev_,于是我就克隆新的代码,打开对应的项目文件,然后启动试试,发现报出如下的错误,很明显是因为没有制定 ...
- 浏览器URL参数解决方案
function getUrlParams() { var search = window.location.search; // 写入数据字典 , search.length).split(&quo ...
- 5.翻译系列:EF 6中数据库的初始化(EF 6 Code-First 系列)
原文地址:http://www.entityframeworktutorial.net/code-first/database-initialization-in-code-first.aspx EF ...
- lua -- 生成协议
这是爬塔的协议 <?xml version="1.0" encoding="utf-8" ?> <coder name="Tower ...