<script>
Vue.component("A-button", {
props: {
type: {
type: String,
default: 'default'
},
text: {
type: String,
default: '按钮'
}
},
computed: {
tag() {
switch(this.type) {
case'success':
return1;
case'danger':
return2;
case'warning':
return3;
default:
return1;
}
}
},
render(h) {
returnh('div', {
class: {
btn: true,
'btn-success': this.type==='success',
'btn-danger': this.type==='danger',
'btn-warning': this.type==='warning'
},
domProps: {
//innerText: this.text,
},
on: {
click: this.handleClick
}
},
this.$slots.default
);
},
methods: {
handleClick() {
console.log('-----------------------');
console.log('li');
}
}
}) letvm=newVue({
el: "#app"
})
</script>
template与render函数对比
template—-html的方式做渲染
render—-js的方式做渲染
render（提供）是一种编译方式
render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。
h就是createElement()方法：createElement(标签名称,属性配置,children)
template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。
区别：
1、render渲染方式可以让我们将js发挥到极致，因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强，适合复杂的组件封装。
2、template是类似于html一样的模板来进行组件的封装。
3、render的性能比template的性能好很多
4、render函数优先级大于template
案例一：template和render的方式渲染标题标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h-title level="1">标题</h-title>
<h-title level="2">标题</h-title>
<h-title level="3">标题</h-title>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
