Render函数在Vue多页面应用中的应用

最新推荐文章于 2023-08-26 22:32:18 发布
最新推荐文章于 2023-08-26 22:32:18 发布
阅读量176 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5bebe1e6e51d457d5c75fea8
版权

标签

Vue、apiCloud、HTML

写在前面
背景介绍

因一些历史遗留问题，需要维护一款借助apiCloud开发的项目，需要实现公共组件抽离

通过此分享你将
  1. 了解apiCloud多页面项目中引入Vue开发
  2. 如何在浏览器中调试apiCloud项目
  3. 借助render函数实现组件的封装和引用
  4. render函数中值得注意的点
在apiCloud多页面项目中引入Vue开发
新建一个标准的apiCloud模板
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
  </head>
  <body>

  </body>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
复制代码
引入vue，初始化
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
  </head>
  <body>
  ******************************************
    <section id="app">
      {{message}}
    </section>
	***************************************
  </body>
  <script src="./../script/vue.2.5.1.min.js"></script>
  <script type="text/javascript">
     ******************************************
      function create () {
        var app = new Vue({
          el: '#app',
          data () {
            return {
              message: 'this'
            }
          }
        })
      }
      apiready = function(){
        create();
      };
***********************************************
  </script>
  </html>
复制代码

此时已初始化完成，***区域为修改区域，为了节省空间，接下来只展示主要代码

如何在浏览器中调试apiCloud项目
// js
function create () {
    var app = new Vue({
        el: '#app',
        data () {
            return {
                message: 'this'
            }
        }
    })
}
********************************
window.onload = function(){
    create();
};
**************************
复制代码

将apiready改为window.onload即可在浏览器中调试

借助render函数实现组件的封装和引用
普通方式封装组件
html:
********************************
<section id="app">
    <child :message="message"></child>
</section>

<template id="child">
    <div>
        {{message}}
    </div>
</template>
********************************

js:
function create () {
    var app = new Vue({
        el: '#app',
        ***********************
        components: {
            child: {
                template: '#child',
                props: ['message']
            }
        },
        ********************************
        data () {
            return {
                message: 'this'
            }
        }
    })
}
window.onload = function(){
    create();
};
复制代码

可以看到，这种形式封装的组件，因为需要template模板的缘故几乎无法抽离

render形式封装
html:
***************
<section id="app">
    <child :message="message"></child>
</section>
****************

js:
function create () {
    var app = new Vue({
        el: '#app',
        ********************************
        components: {
            child: {
                render: function (g) {
                    return g('div', {
                        domProps: {
                            innerHTML: this.message
                        }
                    })
                },
                props: ['message']
            }
        },
         *******************************
        data () {
            return {
                message: 'this'
            }
        }
    })
}
window.onload = function(){
    create();
};
复制代码

可以看到，这种形式的封装，可以将child对应的值抽离出一个对象，从而从外部引入

组件抽离与引入

新建index.js，抽离组件

var child = {
  render: function (h) {
    return h('div', {
      domProps: {
        innerHTML: this.message
      }
    })
  },
  props: ['message']
}
复制代码

引入组件

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
  </head>
  <body>
    <section id="app">
      <child :message="message"></child>
    </section>

  </body>
  <script src="./../script/vue.2.5.1.min.js"></script>
  **********************
  <script src="./index.js"></script>
  **********************
  <script type="text/javascript">
      function create () {
        var app = new Vue({
          el: '#app',
          components: {
          ************************
            child: child
            ***********************
          },
          data () {
            return {
              message: 'this'
            }
          }
        })
      }
      window.onload = function(){
        create();
      };
  </script>
  </html>

复制代码

此时已经实现了Vue组件在多页面应用中的抽离，接下来我们来研究一下render函数

render函数中值得注意的点
createElement

createElement接收三个参数，我们经常以h来作为它的别名

  • [x] 第一个参数是你要渲染的标签名 {String | Object | Function}
  • [x] 第二个参数是你当前标签上的属性和方法 {Object}
  • [x] 第三个参数是当前标签下的子标签，接收createElement实例作为数组中的每一项 {Array}

接下来对第二个参数进行说明

{
  // 和`v-bind:class`一样的 API
  // 接收一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  // 接收一个字符串、对象或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz' // innerHTML必须写对
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽格式
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中向多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}
复制代码

这里官网有详细的说明，请自行参考

cn.vuejs.org/v2/guide/re…

v-show在render函数中的实现
var child = {
  render: function (h) {
    return h('div', {
    *****************
      style: {
        display: this.visible ? undefined : 'none'
      },
      ***************
      domProps: {
        innerHTML: this.message
      }
    })
  },
  **************
  props: ['message', 'visible']
  ***************
}

复制代码
v-for在render函数中的实现
html:
<ul>
  <li v-for="item in items">{{ item.name }}</li>
</ul>

js:
var child = {
  render: function (h) {
  *********************
    return h('ul', this.items.map(function (item) {
      return h('li', item.name)
    }))
    *******************
  },
  *****************
  props: ['items']
  *****************
}
复制代码
v-model在render函数中的实现
html:
<input type="text" v-model="value">

js:
var child = {
  render: function (h) {
    var self = this;
    return h('input', {
      on: {
        input: function (even) {
          self.value = even.target.value
        }
      }
    })
  },
  data () {
    return {
      value: ''
    }
  },
  props: ['items']
}
复制代码
weixin_33976072
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈Vue render函数在ElementUi中的应用
10-18
本文探讨了Vue.js框架中的render函数在Element UI组件库中的应用实践。Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。Element UI是Vue.js的一个组件库，提供了许多预定义的UI组件，比如...
Render函数(基础一)
zhangCheng的博客
05-08 2300
一、概念: Vue当状态更新的时候并非直接更新dom,而是通过diff比较,更新需要更新的虚拟dom,用以提高效率。 Render函数就是用来创建虚拟dom的。 Render函数通过createElement参数(此参数也是一个function),来创建Virtual Dom(虚拟节点), 我感觉当可以用参数来判断显示或者要生成某个元素的时候,用render比较方便。 二、createEleme...
render函数返回多个标签
lotte
02-19 8427
render函数实用场景 直接返回标签 render: (h, params) =&gt; { // 重点 let _this = this return ( &lt;div class="tree_node_op"&gt; &lt;i-switch value="{params.row.status}" size="large" slot="...
Vue提高16 render函数
多啦的博客
11-12 152
在某些场景下你可能需要render渲染函数带来的完全编程能力来解决不太容易解决的问题，特别是要动态选择生成标签和组件类型的场景。 动态标签 根据props来生成标签的场景 &lt;template&gt; &lt;div&gt; &lt;div v-if="level === 1"&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/div&gt; &am
vue-render函数和插槽
weixin_30273175的博客
04-07 759
Vue render函数，官方文档定义绝大部分时候我们使用template 来创建html 模板，但是纯html 和css都基本上都不具有编程能力，而当我们想使用 　　javascript的编程能力时，我们可以用render 函数来创建html 模板 　　1.使用简单的tamplate 去创建html 模板 // 使用简单的template 去创建html 模板 new Vu...
VUE render函数使用和详解
Andrew_Chenwq的博客
09-14 1125
在官网的这里示例中，使用组件，将相同的内容通过solt放进h1-h6的标签中，在使用传统方式时，代码不仅冗长，而且在每一个级别的标题中重复书写了 ``，在要插入锚点元素时还要再次重复。而使用render函数后，代码就精简了很多。在使用render函数中，会使用到一个参数createElement，而这个createElement参数，本质上，也是一个函数，是vue中构建虚拟dom所使用的工具。这样写在按钮少的时候没有问题，但是一旦按钮数量变多，这样写就会显得特别冗长，在这个时候，就需要render函数。
Vue中render函数的使用方法
08-28
今天，我们将深入探讨 render 函数的使用方法，並探讨它在实际开发中的应用场景。 什么是 render 函数 在 Vue 中，render 函数是一个可选的函数，它可以在组件中使用，以生成 HTML 内容。render 函数的主要作用是...
何时/使用 Vue3 render 函数的教程详解
10-15
在Vue3中，render函数的使用和理解对开发人员来说是非常关键的，它允许开发人员以编程方式控制组件的输出。本文将详细介绍在Vue3中使用render函数的时机、原理以及它的优势。 首先，什么是虚拟DOM（VDOM）？在Web...
vue2的render函数详解
最新发布
如果相遇，那么你好哦~
08-26 2452
render函数和template一样，都是用来创建html模板的，但是有些场景里使用template实现起来会使代码冗余且复杂，因此产生了render函数。
vue中的render函数、h（）函数、函数式组件
^_^
02-06 7353
官网：用于编程式地创建组件虚拟 DOM 树的函数。在我们使用webpack脚手架创建项目时，都能在main.js中看到一个render函数对于render函数 es6中写成了箭头函数实际上createElement只是形参用h代表了，h()是的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是，但当你需要多次使用渲染函数时，一个简短的名字会更省力。
Vue.js实战学习笔记----Render函数
xuan的博客
07-14 351
一、概述 （1）Vue.js 2.x与Vue.js 1.x最大的区别就在于2.x使用了Virtrual Dom（虚拟DOM）来更新DOM节点，提升渲染性能。 （2）写在template选项里的组件模板，在Vue.js编译时，会解析为Virtrual Dom。 （3）Render，是Vue.js用于实现Virtrual Dom的。 二、Virtrual Dom（虚拟DOM） （1）Reac...
vue中render循环渲染多个标签
Songlinlin_的博客
11-29 1万+
用的iView组件Table所以不能在标签上用v-for，下面代码是一列政策文件，图在最后，在网上找了好久render渲染多个a标签都没找到，render中还不能循环渲染，这是自己根据vue中v-for的原理写的。 arr是要循环出来的数组 { title: '政策文件', key: 'policyFile', al...
Vue-render方法
陈小白
01-11 430
看了官网的渲染函数render，https://cn.vuejs.org/v2/guide/render-function.html，对于刚接触的话，可能会懵逼的，会不知道啥意思。后面话 根据资料和文档 写下自己的见解 虽然有点粗糙 Vue.component('anchored-heading', { /* @params createElement 声明工具函数的名称； ...
Lesson 7 组件的 render 方法
Mr_zzr的博客
07-13 565
Lesson 7 组件的 render 方法
Vue 中的 Render 全面详解 (渲染函数 & JSX)
小太阳的博客
11-03 2万+
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。简单的说，在 Vue 中我们使用模板 HTML 语法组建页面的，使用 Render 函数我们可以用 Js 语言来构建 DOM。因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转译成 VNode 的函数，而用 Render 函数构建 DOM，Vue 就免去了转译的过程。
Vue 同时监视多个值得变化传给render，并在render中使用
o0__0的博客
10-12 1295
现在我监视了两个值，当这两个值任意一个发生变化时调用render函数比如taskId变化为2，这时render中val输出为2，danger变化为’aaa’这时render中val输出为aaa,如果两个值同时变化，danger的值就会覆盖掉taskId的值，但是两个值变化后的值我都需要该怎么办呢？如上将他们存放在数组里就可以了这样taskId和danger不管单独变化还是同时变化，我们都能够拿到我们
three.js 一个页面可以存在多个render吗_你真的会用setState吗？
weixin_39720510的博客
12-15 342
setState函数是什么？1. 将需要处理的变化塞入组建的state对象中2. 告诉该组件及其子组件需要用更新的状态来重新渲染3. 响应事件处理和服务端响应更新用户界面的主要方式setState经典例子constructor(props) { super(props); this.state = { count: 0 }; this.increase = t...
终于搞懂了vue 的 render 函数（一） -_-|||
热门推荐
Amy的博客
10-11 15万+
文章目录render 函数作用render 函数讲解render 函数的返回值（VNode）render 函数的参数（createElement）createElement 函数的返回值（VNode）createElement 函数的参数（三个）结合代码 vue渲染函数文档第一遍看的晕晕乎乎的，再看看写写终于清晰了。建议配合文档阅读，本文也是根据文档加上自己的理解。 注：本文代码都是在单文件组件中...
Vue中render方法的使用
07-05 1万+
先说一下对官网上demo的个人理解:<!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="vue.js"></script> </head> <body> <div id="app"> <child :level="1"> hello world </child>
Vue.js 2.0实战：Render函数解析与应用
在Vue.js 2.0中，Render函数是一个重要的新特性，它提供了一种替代template的方式，可以更直接地控制组件的输出。通过Render函数，上面的例子可以改写为： ```javascript Vue.component('my-component', { render...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值