VUE学习-渲染函数
渲染函数
x-template
引入外面组件文件写法
<template>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else>
<slot></slot>
</h4>
</template>
<script>
exports default{
props: {
level: {type: Number}
}
}
</script>
<anchored-heading :level="2">自定义标题</anchored-heading> <script>
import anchoredHeading from '@/components/anchoredHeading'
components: { anchoredHeading },
</script>
html 页面内组件写法, 属性 id 方便取到组件内容
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else>
<slot></slot>
</h4>
</script>
<anchored-heading :level="2">自定义标题</anchored-heading> <script>
components: {
'anchoredHeading': {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
},
},
</script>
渲染函数渲染类似组件
<anchored-heading :level="2">自定义标题</anchored-heading> <script>
components: {
'anchoredHeading': {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
},
},
</script>
createElement()
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象,或者 resolve 了上述任何一种的一个 async 函数。必填项。
'div',
// {Object}
// 一个与模板中 attribute 对应的数据对象。可选。
{
// 与 `v-bind:class` 的 API 相同,
// 接受一个字符串、对象或字符串和对象组成的数组
class': {
foo: true,
bar: false
},
// 与 `v-bind:style` 的 API 相同,
// 接受一个字符串、对象,或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML attribute
attrs: { id: 'foo' },
// 组件 prop
props: { myProp: 'bar' },
// DOM property
domProps: { innerHTML: 'baz' },
// 事件监听器在 `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',
// 其它特殊顶层 property
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
},
// {String | Array}
// 子级虚拟节点 (VNodes),由 `createElement()` 构建而成, 也可以使用字符串来生成“文本虚拟节点”。可选。
// this.$slots.default 可以直接加入使用组件时插入插槽的组件
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: { someProp: 'foobar' }
})
]
)
VUE学习-渲染函数的更多相关文章
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- Vue.js 渲染函数, JSX(未掌握,未学完)
渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...
- vue 学习 渲染、v-指令
vue渲染 在组件中data是一个方法里面的值要是一个对象return出去 export default { name: "HelloWorld", data() { return ...
- Vue基础-渲染函数-插槽
Vue 测试版本:Vue.js v2.5.13 先看个插槽的例子: <div id="app"> <child > <span slot-scope= ...
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- Vue学习笔记:编译过程
碰到是否有template选项时,会询问是否要对template进行编译: 在template编译(渲染成UI)有一个过程.模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据生成 ...
- Render渲染函数和JSX
1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...
- Vue:模板&渲染函数学习
模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...
- 【js】vue 2.5.1 源码学习 (十一) 模板编译compileToFunctions渲染函数
大体思路(九) 本节内容: 1. compileToFunctions定位 1. compileToFunctions定位 ==> createCompiler = createCompiler ...
- 【js】 vue 2.5.1 源码学习(六) initProxy initLifeCycle 渲染函数的作用域代理
大体思路 (五) 1. initProxy 渲染函数的作用域代理 ==> es6 如果支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty() prox ...
随机推荐
- 用python爬取网络文章----滴天髓
用python爬取网络文章真的很简单.主要分以下几个步骤 1.安装并导入相关模块. 这里我们要用到两个模块,分别是reqesets和lxml 安装命令pip install requests和pip ...
- Linux 查找某一线程是否已运行,并启动的方法
参考资料:(3条消息) [Linux]守护线程自动重启某个程序的3种常用办法_L7256的博客-CSDN博客_守护进程 自动重启 方法一:使用编写一个监控APP的脚本 start.sh脚本如下:exp ...
- 统一返回对象封装和统一异常捕获封装springboot starter
好久没有更新文章了,高龄开发没什么技术,去了外包公司后没怎么更新文章了.今天分享下统一处理starter,相信开发web系统的时候都是会涉及到前后端的交互,而后端返回数据的时候一般都会统一封装一个返回 ...
- vs2019 内核驱动编译失败:网络共享盘问题
怀念2008 我以为这个年代了,中文路径问题应该解决了,记得vs 2008写c的时候曾因中文路径的问题导致编译不通过,从2015版本开始发现有时候项目名称和路径里包含中文也可以编译通过了,习惯之后后面 ...
- 低版本客户端连接高版本数据库报错ORA-28040、ORA-01017
测试环境: 客户端:Oracle 11.2.0.1 服务端:Oracle 19.16 测试过程: 1.低版本客户端连接高版本数据库报错ORA-28040 2.低版本客户端连接高版本数据库报错ORA-0 ...
- pycham debug 专辑
遇到大量代码的项目时怎么迅猛的调代码今天将交给大家几个方法 配置环境: 环境的统一是一切的基础,因为不同的版本不同步之间会造成很多各式各样的报错 然后选择现有环境进行配置 上面的路径进行默认环境变量的 ...
- KingbaseES恢复被删除数据
KingbaseES恢复被删除数据 生产环境操作请先备份整个data目录或cp 当前数据目录/home/kingbase/pg_data到新的data目录,然后在备份的data目录进行恢复被删除数据操 ...
- C#Autofac依赖注入批量注入 (目前版本.netcore3.0)
上一文:C#依赖注入一看就会系列 链接:C#依赖注入(直白明了)讲解 一看就会系列 - 22222220 - 博客园 (cnblogs.com) 上一次我们知道了 为什么要依赖注入,这次我们就用使用人 ...
- Vue31 消息订阅和发布
1 简介 组件之间的通信除了使用事件总线之外,还可以使用一些插件来通过消息的订阅和发布来实现.pubsub-js就是一个不错的选择. 2 使用 2.1 安装 npm i pubsub-js # 或 y ...
- Vue 26 plugins
1 简介 它是用来增强vue的.它是包含install方法的一个对象,install的第一个参数是Vue,第二个以后参数是插件使用者传入的参数 插件里面可以配置全局过滤器.全局指令.混入.Vue原型上 ...