Vue 渲染函数

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。

一 项目结构

二 App组件

<template>
  <div id="app">
    <fruit fruitName="Durian" :level="2">
      very  delicious!
    </fruit>
  </div>
</template>

<script>
import "./components/Fruit.js";
export default {
  name: "App"
};
</script>

<style lang="scss">
</style>

三 Fruit组件

import Vue from "vue";
import Durian from "./Durian.vue";
import Mongo from "./Mongo.vue";

Vue.component("fruit", {
  props: {
    fruitName: {
      type: String,
      required: true
    },
    level: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      shop: "水果店"
    };
  },
  render(createElement) {
    const { fruitName, level, shop, $slots, nativeClickHandler } = this;
    const ele = fruitName === "Durian" ? Durian : Mongo;
    return createElement(
      ele,
      {
        class: {
          favorFruit: true
        },
        style: "color:gold;font-style:italic;",
        attrs: {
          id: "favorFruit"
        },
        nativeOn: {
          click: nativeClickHandler
        },
        scopedSlots: {
          shop(props) {
            return createElement("h6", shop);
          }
        }
      },
      [createElement("h" + level, fruitName), $slots.default]
    );
  },
  methods: {
    nativeClickHandler() {
      console.log("native click");
    }
  }
});

四 Durian组件

<template>
    <div>
        <slot/>
        <slot name="shop"/>
    </div>
</template>
<script>
export default {
  name: "Durian"
};
</script>

五 Mongo组件

<template>
    <div>
        <slot/>
        <slot name="shop"/>
    </div>
</template>
<script>
export default {
  name: "Mango"
};
</script>

六 运行效果

原文地址:https://www.cnblogs.com/sea-breeze/p/11563545.html

时间: 2024-10-06 05:29:45

Vue 渲染函数的相关文章

vue 渲染函数&amp;jsx

前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多,  所把要js和html混写. vue 的动态js操作 html  方法:reader函数: vue  虚拟dom原理  +jsx ========================= <h1>{{bigTitle }}</h1> 渲染函数: reader:function(createElement){ return createElement('h1',this.bigTitle);

Vue躬行记(7)——渲染函数和JSX

除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分场景中,都会选择直观而清晰的模板,但遇到一些复杂的场景时,就不得不使用渲染函数render()了. 1)render() 假设有一个page组件,它会根据外部传入的type特性,有选择的渲染,其模板如下所示. <script type="text/x-template" id=&qu

VUE调用函数,以及event的讲解

先看我们是如何定义函数的 var vm = new Vue({ //找到ID为APP的作用域 el: "#app", //数据 data: { msg: "Hello Vue", num: 0 }, //methods就是VUE中函数的定义处 methods: { //函数名称 函数体 handle: function (event) { //查看当前触发函数的内容 console.log(event.target.value); this.num++; }, ha

理解Vue中的Render渲染函数

VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE html> <html

vue渲染数据后与owlCarousel轮播插件冲突,失效

主要原因:dom解析准备完成后,开始执行$(document).ready(); 而vue是在window.onload(页面加载完后才执行):所以会导致owlCarousel插件失效. 解决方案:数据渲染后,更新dom:再调用插件.(vue的 this.$nextTick可以更新dom) 1.引入owlCarousel插件,vue,jq (function ($) { new Vue({ el: '#owl-demo1', data:{ aboutData:[], getRouteUrl: '

vue render函数 函数组件化

之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data),无实例(没有this上下文) 一个函数化组件就像这样: Vue.component('my-component', { functional: true, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) {

Vue:渲染、指令、事件、组件、Props、Slots

如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”.每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 Vue 的介绍.在我第一次学习 Vue 的时候,我就想要这样的文章 我喜欢 Vue 的一点是它吸取了其它框架的优秀之处,并有条不紊的将它们组合在一起. 具有响应式组件化的虚拟 DOM 只提供视图层, props 和 类 Redux 状态管理与 React 类似. 条件渲染和服务与 Angular 类

Vue:渲染、指令、事件、组件、Props

如果要我用一句话描述使用 Vue 的经历,我可能会说"它如此合乎常理"或者"它提供给我需要的工具,而且没有妨碍我的工作".每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 Vue 的介绍.在我第一次学习 Vue 的时候,我就想要这样的文章 我喜欢 Vue 的一点是它吸取了其它框架的优秀之处,并有条不紊的将它们组合在一起. 具有响应式组件化的虚拟 DOM 只提供视图层, props 和 类 Redux 状态管理与 React 类似. 条件渲

Render渲染函数和JSX

1.Render函数 官网API地址:https://cn.vuejs.org/v2/guide/render-function.html 通常写的h为createElement的缩写,createElement 会返回虚拟节点 (virtual node)”,也常简写它为“VNode,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息. 第一个参数为一个 HTML 标签名.组件选项对象,为必选项. 第二个参数为 {Object},是一个与模板中属性对应的数据