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= ...
随机推荐
- 008-zabbix监控nginx
(1)agent端配置 1)nginx编译安装需要加上该选项--with-http_stub_status_module 2)修改nginx配置文件 #vim /usr/local/nginx/con ...
- TCP那些事儿
TCP 的那些事儿(上) TCP 的那些事儿(下)
- enums应用详解
枚举类: 获取枚举相关值:
- 「prufer」
prufer数列,可以用来解一些关于无根树计数的问题. prufer数列是一种无根树的编码表示,对于一棵n个节点带编号的无根树,对应唯一一串长度为n-1的prufer编码. (1)无根树转化为pruf ...
- ps制作雾的效果
制作雾的效果 方法一: 新建图层,将前景色设置为白色,背景色为黑色(因为雾的颜色是根据前景色决定的,也可根据这个原理制作火焰效果) 选择滤镜->渲染->云彩(也可选择其他效果的云彩) (选 ...
- Vue给子组件传值为空
在项目中会遇到的情况.给子组件传值. 子组件页面可以把数据展现出来.可在方法中却获取不到 解决方法: 父组件添加判断,让页面执行完.再把值带过去.
- electron-vue 更新 使用electron-update的版本
electron-vue使用的electron版本比较老,用最新的electron-update会报错 我用这个版本成功 "electron-updater": "^3. ...
- 6. ClustrixDB 备份恢复
ClustrixDB备份恢复: 一.传统MySQL的备份/恢复 shell> mysqldump -u user -h clustrix host --single-transaction ...
- ROM和RAM的内存详细说明
1.首先是ROM 的读取是需要提前两个地址的读取,所以要想读取0地址的数据,你需要给地址是2 2.关于宽度,深度的计算 假设我们要存取如下取模的数据,该模的设置口语描述为:这是显示的2个字节,其中一个 ...
- CDOJ 1061 C - 秋实大哥与战争 STL set 迭代器
题目链接: C - 秋实大哥与战争 Time Limit:1000MS Memory Limit:65535KB 64bit IO Format:%lld & %llu Sub ...