vue v-html调用函数,说说如何利用 Render 函数来实现 Vue.js 的内置指令

因为在 Render 函数中无法使用 Vue 内置指令，比如 v-if 等，但我们可以在 Render 函数中，利用原生的 JavaScript 来实现这些指令。

1 v-if/v-else

html：

切换

js：

Vue.component('e', {

render: function (createElement) {

if (this.isShow) {

return createElement('p', 'isShow 为 true');

} else {

return createElement('p', 'isShow 为 false');

}

},

props: {

isShow: {

type: Boolean,

default: false

}

}

});

var app = new Vue({

el: '#app',

data: {

isShow: false

}

});

效果：

2 v-for

可以使用 for 循环来实现 v-for 指令。

html：

js：

Vue.component('e2', {

render: function (createElement) {

var nodes = [];

for (var i = 0; i < this.list.length; i++) {

nodes.push(createElement('p', this.list[i]));

}

return createElement('div', nodes);

},

props: {

list: {

type: Array

}

}

});

var app2 = new Vue({

el: '#app2',

data: {

list: [

'人民心理学，实践出真知',

'氢能源上游解析',

'能救命的可穿戴设备都长什么样？'

]

}

});

渲染结果：

createElement 用于创建 DOM 节点，可以把它当作 JavaScript 的函数来理解。

3 v-if 加 v-for 综合示例

下面是综合利用 JavaScript 的 if 、else 和数组的 map 方法来渲染列表的示例。

html：

显示

js：

Vue.component('e3', {

render: function (createElement) {

if (this.list.length) {

return createElement('ul', this.list.map(function (item) {

return createElement('li', item);

}));

} else {

return createElement('p', '无数据');

}

},

props: {

list: {

type: Array,

default: function () {

return [];

}

}

}

});

var app3 = new Vue({

el: '#app3',

data: {

list: []

},

methods: {

click: function () {

this.list = [

'人民心理学，实践出真知',

'氢能源上游解析',

'能救命的可穿戴设备都长什么样？'

];

}

}

});

这里我们使用了 map() 方法，该方法会对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。

效果：

上述 Render 函数所对应的 template 编码方式为：

• {{item}}

无数据

4 v-model

html：

js：

Vue.component('e4', {

render: function (createElement) {

var that = this;

return createElement('div', [

createElement('input', {

domProps: {

value: this.value

},

on: {

input: function (event) {

that.value = event.target.value;

}

}

}),

createElement('p', '绑定值：' + this.value)

])

},

data: function () {

return {

value: ''

}

}

});

var app4 = new Vue({

el: '#app4'

});

效果：

这个 Render 函数所对应的 template 编码方式为：

绑定值：{{value}}

5 事件与按键修饰符

事件与按键修饰符也可以自行实现：

修饰符

语句

.stop

event.stopPropagation()

.prevent

event.preventDefault()

.self

if(event.target !== event.currentTarget) return;

.enter 或 .13

if(event.keyCode !== 13) return;

.ctrl

if(event.ctrlKey) return;

.alt

if(event.altKey) return;

.shift

if(event.shiftKey) return;

.meta

if(event.metaKey) return;

有的事件修饰符， Vue.js 还提供了特殊前缀：

修饰符

前缀

.capture

!

.once

~

.capture.once 或 .once.capture

~!

假设我们希望实现一个留言上墙的功能，即在输入框中输入内容，内容会放在留言列表中。

html：

js：

Vue.component('e5', {

render: function (createElement) {

var that = this;

//渲染列表

if (this.list.length) {

var listNode = createElement('ul', this.list.map(function (item) {

return createElement('li', item);

}));

} else {

var listNode = createElement('p', '无内容');

}

return createElement('div', [

listNode,

createElement('input', {

attrs: {

placeholder: '想说的话……'

},

style: {

width: '200px'

},

on: {

keyup: function (event) {

//如果不是回车键，直接返回

if (event.keyCode !== 13) {

return;

}

//把输入的内容新增到聊天列表

that.list.push(event.target.value);

//清空输入框

event.target.value='';

}

}

})

])

},

data:function () {

return {

value:'',

list:[]

}

}

});

var app5 = new Vue({

el: '#app5'

});

效果：

6 未定义 slot 内容的默认值

slot 内容的默认值可以通过 this.$slots.default 来判定 ——

html：

5亿年前的地球，磁场几乎全消失了，科学家：因祸得福

js：

Vue.component('e6', {

render: function (createElement) {

if (this.$slots.default === undefined) {

return createElement('div', '无消息');

} else {

return createElement('div', this.$slots.default);

}

}

});

var app6 = new Vue({

el: '#app6'

});

效果：