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>
六 运行效果
Vue 渲染函数的更多相关文章
- 从虚拟dom了解vue渲染函数
vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...
- Vue渲染函数
前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...
- vue 渲染函数&jsx
前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多, 所把要js和html混写. vue 的动态js操作 html 方法:reader函数: vue ...
- vue渲染函数&JSX
Vue推荐在绝大多数情况下使用template来创建你的HTML.然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器. 虚 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- vue从入门到进阶:渲染函数 & JSX(八)
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- Vue:模板&渲染函数学习
模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...
- Vue.js 渲染函数, JSX(未掌握,未学完)
渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...
- Vue基础-渲染函数-插槽
Vue 测试版本:Vue.js v2.5.13 先看个插槽的例子: <div id="app"> <child > <span slot-scope= ...
随机推荐
- AIX中的进程管理
1.AIX中的进程 (1)后台进程 后台进程运行时,用户不必等待当前后台进程的结束,即可以运行下一个进程. 后台进程的运行方式: # command & (2)提高进程优先等级 -- ni ...
- 新手的Linux zcat命令示例
Zcat是一个命令行实用程序,用于查看压缩文件的内容.它将压缩文件扩展为标准输出,允许您查看内容. 分类:Linux命令操作系统 2018-08-13 00:00:00 通常,使用gzip压缩的文件可 ...
- web框架-(七)Django补充---models进阶操作及modelform操作
通过之前的课程我们可以对于Django的models进行简单的操作,今天了解下进阶操作和modelform: 1. Models进阶操作 1.1 字段操作 AutoField(Field) - int ...
- [uboot] (第二章)uboot流程——uboot-spl编译流程(转)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ooonebook/article/det ...
- NETCONF
NETCONF协议(Network Configration Protocol) NETCONF是一个基于XML的交换机配置接口,用于替代CLI.SNMP等配置交换机. 本质上来说,NETCONF就是 ...
- 京东供应链模式TC转运流程
TC转运分上门提货和自己送货到网点 上门提货是TC委托第三方货运到商家提货,他们没有装货义务,需要商家自己装货等问题 上门提货简要流程: 采购单创建 商家打单打包出库(自己公司内部建单发货) TC预约 ...
- 【NOIP2016普及组复赛】魔法阵
题目 分析 设xd-xc为i,那么xb-xa=2i, 又因为xb-xa<(xc-xb)/3, 那么c>6i+b. 于是,先枚举i, 再分别枚举xa和xd, 根据之间的关系,用前缀和求出每一 ...
- jvm——参数解释
https://www.oracle.com/technetwork/java/tuning-139912.html#section4.2.5 https://docs.oracle.com/java ...
- linux system函数引发的错误
转: https://my.oschina.net/renhc/blog/54582 先看一下问题 简单封装了一下system()函数: int pox_system(const char *cm ...
- mysql COUNT()函数 语法
mysql COUNT()函数 语法 作用:返回匹配指定条件的行数.博智达直线电机平台 语法:SELECT COUNT(*) FROM table_name mysql COUNT()函数 示例 // ...