vue-12-渲染函数 & JSX
render()
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(//VNode,虚拟dom
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
<anchored-heading :level="">Hello world!</anchored-heading>
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,或者一个返回值类型为 String/Object 的函数,必要参数
'div', {
// {Object}
// 一个包含模板相关属性的数据对象
// 这样,您可以在 template 中使用这些属性。可选参数。
}, // {String | Array}
// 子节点 (VNodes),由 `createElement()` 构建而成,
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
组件树中的所有 VNodes 必须是唯一的,如果需要重复
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: }).map(function () {
return createElement('p', 'hi')
})
)
}
render中 不能用模板中可以使用的v-for,v-if,v-model而是用原生JS实现
v-model在render中的实现:
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.value = event.target.value
self.$emit('input', event.target.value)
}
}
})
}
事件修饰符
Modifier(s) | Prefix |
.passive | & |
.capture | ! |
.once | ~ |
.capture.once | ~! |
.once.capture | ~! |
对于其他的修饰符,前缀不是很重要,因为你可以在事件处理函数中使用事件方法:
Modifier(s) | Equivalent in Handler |
---|---|
.stop |
event.stopPropagation() |
.prevent |
event.preventDefault() |
.self |
if (event.target !== event.currentTarget) return |
Keys:.enter , .13 |
if (event.keyCode !== 13) return (change 13 to another key code for other key modifiers) |
Modifiers Keys:.ctrl , .alt , .shift , .meta |
if (!event.ctrlKey) return (change ctrlKey to altKey , shiftKey , or metaKey , respectively) |
插槽
render: function (createElement) {
// `<div><slot></slot></div>`
return createElement('div', this.$slots.default)//静态内容
}
render: function (createElement) {
// `<div><slot :text="msg"></slot></div>`
return createElement('div', [
this.$scopedSlots.default({//用作函数
text: this.msg
})
])
}
向子组件传递
render (createElement) {
return createElement('div', [
createElement('child', {
// pass `scopedSlots` in the data object
// in the form of { name: props => VNode | Array<VNode> }
scopedSlots: {
default: function (props) {
return createElement('span', props.text)
}
}
})
])
}
jsx:
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {//将h
作为createElement
的别名
return (
<AnchoredHeading level={}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
函数式组件:标记组件为 functional
,这意味它是无状态 (没有 data
),无实例
Vue.component('my-component', {
functional: true,
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// ...
},
// Props 可选
props: {
// ...
}
})
函数式组件需要的一切都是通过上下文传递,包括:
props:提供 props 的对象
children: VNode 子节点的数组
slots: slots 对象
data:传递给组件的 data 对象
parent:对父组件的引用
listeners: (2.3.+) 一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性this.$slots.default
更新为context.children
,之后this.level
更新为context.props.level
vue-12-渲染函数 & JSX的更多相关文章
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- vue从入门到进阶:渲染函数 & JSX(八)
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- vue 渲染函数&jsx
前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多, 所把要js和html混写. vue 的动态js操作 html 方法:reader函数: vue ...
- Vue.js 渲染函数, JSX(未掌握,未学完)
渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...
- vue渲染函数&JSX
Vue推荐在绝大多数情况下使用template来创建你的HTML.然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器. 虚 ...
- 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 ...
- Render渲染函数和JSX
1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...
- Vue躬行记(7)——渲染函数和JSX
除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分 ...
随机推荐
- Python + Selenium WebDriver Api 知识回顾
一直再用 Selenium WebDriver 但是用的都比较零散,也没有做过总结,今天借此机会,整理一下,方便大家使用时查阅 webDriver 的属性 ['CONTEXT_CHROME', 'C ...
- lua --- __newindex 的使用规则
1.如果 __newindex 是一个函数,在给 table 不存在的字段赋值的时候,会调用这个函数2.如果 __newindex 是一个table,在给 table 不存在的字段赋值的时候,会直接给 ...
- 20180518VSTO多簿单表汇总外接程序按钮
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsof ...
- 04 flask 项目整体构建
本文主要的目标是创建flask基本的项目架构,总体架构: 详细的项目目录结构: Flask 项目创建的过程 一.项目(students)创建初始化工作 1. 创建项目的虚拟环境 mkvirtualen ...
- linux基础知识(1)
1.date man date :查看帮助 1. date [OPTION]... [+FORMAT]:显示时间 ,format表示格式符号 例如: date :Sun Dec 23 21:45:34 ...
- Vue.js总结 [2017.6.5]
<head> <script src="https://unpkg.com/vue/dist/vue.js"></script> </he ...
- RFBnet论文笔记
论文:Receptive Field Block Net for Accurate and Fast Object Detection 论文链接:https://arxiv.org/abs/1711. ...
- linux网络配置命令(一)——ifconfig
linux网络配置命令(一)——ifconfig ifconfig 查看.配置网卡信息.已过时,推荐使用ip命令 格式: ifconfig [interface] ...
- python面向对象之 类
内容梗概: 1. 类的成员 2. 类的成员-变量 3. 类的成员-方法 4. 类的成员-属性 5. 私有 1.类的成员class 类名: 方法 def __init__(self, 参数1, 参数2. ...
- Android(二)——frida安装教程
pc端下载:pip install frida 之后就是在手机端或者模拟器下载对应版本的server 在手机或者模拟器上查看cpu版本型号,就根据这个来下载server system/build.pr ...