vue&jsx文档

vue实例属性

  1. // App.ts
  2. import hBtn from './components/hBtn'
  3. import hUl from './components/hUl'
  4. export default {
  5. data(){
  6. return {
  7. theme: "mdui-theme-pink",
  8. accent: "mdui-theme-accent-pink",
  9. users:['aoo', 'boo', 'coo']
  10. }
  11. },
  12. methods:{
  13. },
  14. render(h){
  15. return h('div',{
  16. 'class':[this.theme, this.accent],
  17. attrs:{
  18. id: 'app'
  19. }
  20. },[
  21. h(hBtn,{
  22. 'class':['mdui-color-theme-accent']
  23. }),
  24. h('ul',{},
  25. [
  26. h('li',{
  27. 'class':{
  28. 'text-danger':true
  29. },
  30. style:{
  31. color:'red';
  32. }
  33. } ,'start'),
  34. this.users.length
  35. ? this.users.map((key, index)=>{
  36. return h('li',key)
  37. })
  38. : h('li','v-if else 这样写')
  39. ,
  40. h('li', 'end')
  41. ]
  42. ),
  43. h(hUl,{
  44. attrs:{
  45. users:['user1', 'user2']
  46. }
  47. })
  48. ]);// return end
  49. }, //render end
  50. }

  1. // src/components/hBtn.ts
  2. var Text = {// 在内部定义了一个组件
  3. props:['body'],
  4. render(h){
  5. return h('span',[this.body])
  6. }
  7. }
  8. export default {
  9. data(){
  10. return {
  11. myName: "ajanuw"
  12. }
  13. },
  14. methods:{
  15. echo (num:number):void {
  16. alert(num)
  17. }
  18. },
  19. mounted(){
  20. console.log( '组件渲染完成!!')
  21. },
  22. render(h) {
  23. return h(
  24. 'button',
  25. {
  26. // 和`v-bind:class`一样的 API
  27. 'class':['mdui-btn'],
  28. style: {// 定义 style
  29. fontSize: '22px'
  30. },
  31. attrs:{// 定义attribute, 可以利用这个更组件传递 props
  32. id: "ajanuw"
  33. },
  34. domProps: {// DOM 属性
  35. // innerHTML 会替换组件内部的赋值
  36. },
  37. on: {
  38. click: this.echo.bind(null, 1995)
  39. }
  40. },
  41. [
  42. h(Text, {attrs:{body:"this a "},ref: 'start'} ),
  43. h(Text, {attrs:{// 使用text组件, 传递props
  44. body:this.myName}, ref: 'end'} )
  45. ]
  46. );
  47. }
  48. }

  1. // src/components/hUl.ts
  2. // 渲染一个列表
  3. var list = {
  4. props:['body']
  5. render(h){
  6. return h('li', this.body)
  7. }
  8. };
  9. export default {
  10. props:['users'],
  11. render(h){
  12. if(this.users){
  13. if(this.users.length){
  14. return h('ul',{},[
  15. this.users.map((key, index)=>{
  16. return h(list,{
  17. attrs:{
  18. body: key
  19. }
  20. })
  21. })
  22. ])
  23. }else{
  24. return h('ul', {}, [
  25. return h(list, {
  26. attrs:{
  27. body: "没有数据哦!"
  28. }
  29. })
  30. ])
  31. }
  32. }
  33. }, //render end
  34. }

下面是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

  1. // .babelirc
  2. {
  3. "presets": ["env"],
  4. "plugins": ["transform-vue-jsx"]
  5. }

  1. // App.js
  2. var Text = {
  3. props:['body'],
  4. render(h){
  5. return(
  6. <p
  7. onClick={ ()=> console.log( this.body)}
  8. style={{color:'red'}}
  9. >
  10. hello {this.body}
  11. </p>
  12. );// return end
  13. }
  14. }
  15. var List = {
  16. props:['body'],
  17. render(h){
  18. return (
  19. <li onClick={()=> console.log( this.body)}>{ this.body}</li>
  20. );
  21. }
  22. }
  23. export default {
  24. data(){
  25. return {
  26. name:"ajanuw",
  27. users: ['aoo', 'boo']
  28. }
  29. },
  30. methods:{
  31. echo(name){
  32. alert( name)
  33. }
  34. },
  35. render(h){
  36. return (
  37. <div id="app">
  38. <Text body={this.name}/>
  39. <ul>
  40. {
  41. this.users.length !==0
  42. ? this.users.map((key, index)=>{
  43. return <List body={key} key={index}/>
  44. })
  45. : <li>没有数据</li>
  46. }
  47. </ul>
  48. </div>
  49. );// return end
  50. }, // render end
  51. }

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

把App.vue 改成 App.js 文件

  1. // App.js
  2. export default {
  3. data(){
  4. return {
  5. name: 'ajanuw'
  6. }
  7. },
  8. render(){
  9. return (
  10. <div id="app">
  11. <p>hello {this.name}</p>
  12. </div>
  13. )
  14. }
  15. }
  1. // main.js
  2. 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. Android四大组件应用系列——使用BroadcastReceiver和Service实现倒计时

    一.问题描述 Service组件可以实现在后台执行一些耗时任务,甚至可以在程序退出的情况下,让Service在后台继续保持运行状态.Service分本地服务和远程服务,Local地服务附在主进程上的m ...

  2. 转: chrome64打开弹出窗flash的办法

    https://jingyan.baidu.com/article/380abd0a38f0411d90192c2e.html

  3. 郑晔谈 Java 开发:新工具、新框架、新思维【转载】【整理】

    原文地址 导语:"我很惊讶地发现,现在许多程序员讨论的内容几乎和我十多年前刚开始做 Java 时几乎完全一样.要知道,我们生存的这个行业号称是变化飞快的.其实,这十几年时间,在开发领域已经有 ...

  4. Spark机器学习(11):协同过滤算法

    协同过滤(Collaborative Filtering,CF)算法是一种常用的推荐算法,它的思想就是找出相似的用户或产品,向用户推荐相似的物品,或者把物品推荐给相似的用户.怎样评价用户对商品的偏好? ...

  5. javascript中return function与return function()的区别

    参考https://stackoverflow.com/questions/7629891/functions-that-return-a-function-javascript 问题:唯一的区别是r ...

  6. 【SqlServer】SqlServer的游标使用

    什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...

  7. IDEA使用笔记(六)——设置项目的JDK配置

    1:由于dev分支和master分支的代码差异比较多,所以,就从master上分出一个新的分支dev_,于是我就克隆新的代码,打开对应的项目文件,然后启动试试,发现报出如下的错误,很明显是因为没有制定 ...

  8. 浏览器URL参数解决方案

    function getUrlParams() { var search = window.location.search; // 写入数据字典 , search.length).split(&quo ...

  9. 5.翻译系列:EF 6中数据库的初始化(EF 6 Code-First 系列)

    原文地址:http://www.entityframeworktutorial.net/code-first/database-initialization-in-code-first.aspx EF ...

  10. lua -- 生成协议

    这是爬塔的协议 <?xml version="1.0" encoding="utf-8" ?> <coder name="Tower ...