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函數，否則會增加負擔。