Render函数在Vue多页面应用中的应用
标签
Vue、apiCloud、HTML
写在前面
背景介绍
因一些历史遗留问题，需要维护一款借助apiCloud开发的项目，需要实现公共组件抽离
通过此分享你将
- 了解apiCloud多页面项目中引入Vue开发
- 如何在浏览器中调试apiCloud项目
- 借助render函数实现组件的封装和引用
- render函数中值得注意的点
在apiCloud多页面项目中引入Vue开发
新建一个标准的apiCloud模板
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
</head>
<body>
</body>
<script type="text/javascript">
apiready = function(){
};
</script>
</html>
引入vue，初始化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
</head>
<body>
******************************************
<section id="app">
{{message}}
</section>
***************************************
</body>
<script src="./../script/vue.2.5.1.min.js"></script>
<script type="text/javascript">
******************************************
function create () {
var app = new Vue({
el: '#app',
data () {
return {
message: 'this'
}
}
})
}
apiready = function(){
create();
};
***********************************************
</script>
</html>
此时已初始化完成，***区域为修改区域，为了节省空间，接下来只展示主要代码
如何在浏览器中调试apiCloud项目
// js
function create () {
var app = new Vue({
el: '#app',
data () {
return {
message: 'this'
}
}
})
}
********************************
window.onload = function(){
create();
};
**************************
将apiready改为window.onload即可在浏览器中调试
借助render函数实现组件的封装和引用
普通方式封装组件
html:
********************************
<section id="app">
<child :message="message"></child>
</section>
<template id="child">
<div>
{{message}}
</div>
</template>
********************************
js:
function create () {
var app = new Vue({
el: '#app',
***********************
components: {
child: {
template: '#child',
props: ['message']
}
},
********************************
data () {
return {
message: 'this'
}
}
})
}
window.onload = function(){
create();
};
可以看到，这种形式封装的组件，因为需要template模板的缘故几乎无法抽离
render形式封装
html:
***************
<section id="app">
<child :message="message"></child>
</section>
****************
js:
function create () {
var app = new Vue({
el: '#app',
********************************
components: {
child: {
render: function (g) {
return g('div', {
domProps: {
innerHTML: this.message
}
})
},
props: ['message']
}
},
*******************************
data () {
return {
message: 'this'
}
}
})
}
window.onload = function(){
create();
};
可以看到，这种形式的封装，可以将child对应的值抽离出一个对象，从而从外部引入
组件抽离与引入
新建index.js，抽离组件
var child = {
render: function (h) {
return h('div', {
domProps: {
innerHTML: this.message
}
})
},
props: ['message']
}
引入组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
</head>
<body>
<section id="app">
<child :message="message"></child>
</section>
</body>
<script src="./../script/vue.2.5.1.min.js"></script>
**********************
<script src="./index.js"></script>
**********************
<script type="text/javascript">
function create () {
var app = new Vue({
el: '#app',
components: {
************************
child: child
***********************
},
data () {
return {
message: 'this'
}
}
})
}
window.onload = function(){
create();
};
</script>
</html>
此时已经实现了Vue组件在多页面应用中的抽离，接下来我们来研究一下render函数
render函数中值得注意的点
createElement
createElement接收三个参数，我们经常以h来作为它的别名
- 第一个参数是你要渲染的标签名 {String | Object | Function}
- 第二个参数是你当前标签上的属性和方法 {Object}
- 第三个参数是当前标签下的子标签，接收createElement实例作为数组中的每一项 {Array}
接下来对第二个参数进行说明
{
// 和`v-bind:class`一样的 API
// 接收一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
// 接收一个字符串、对象或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz' // innerHTML必须写对
},
// 事件监听器基于 `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 }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中向多个元素都应用了相同的 ref 名，
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
}
这里官网有详细的说明，请自行参考
https://cn.vuejs.org/v2/guide/render-function.html
v-show在render函数中的实现
var child = {
render: function (h) {
return h('div', {
*****************
style: {
display: this.visible ? undefined : 'none'
},
***************
domProps: {
innerHTML: this.message
}
})
},
**************
props: ['message', 'visible']
***************
}
v-for在render函数中的实现
html:
<ul>
<li v-for="item in items">{{ item.name }}</li>
</ul>
js:
var child = {
render: function (h) {
*********************
return h('ul', this.items.map(function (item) {
return h('li', item.name)
}))
*******************
},
*****************
props: ['items']
*****************
}
v-model在render函数中的实现
html:
<input type="text" v-model="value">
js:
var child = {
render: function (h) {
var self = this;
return h('input', {
on: {
input: function (even) {
self.value = even.target.value
}
}
})
},
data () {
return {
value: ''
}
},
props: ['items']
}