1、传统template写法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="app" v-cloak>
<ele></ele>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript"> Vue.component('ele', { template: ` <div id="element" :class="{show:show}" @click="handleClick"> 文本内容 </div>
`, data: function() { return { show: true } }, methods: { handleClick: function() { console.log("clicked") } } }) var app = new Vue({ el: '#app' }) </script>
</body>
</html>
2、Render写法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Vue</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="app" v-cloak>
<ele></ele>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript"> Vue.component('ele', { render: function(createElement) { return createElement( 'div', { //动态绑定class，同:class
class: { 'show': this.show }, //普通html特性
attrs: { id: 'element' }, //给div绑定click事件
on: { click: this.handleClick } }, '文本内容' ) }, data: function() { return { show: true } }, methods: { handleClick: function() { console.log("clicked") } } }); var app = new Vue({ el: '#app' }) </script>
</body>
</html>
区别：templat的写法可读性强，简洁。所以需要在合适的场景使用Render函数，否则会增加负担。