<div id="app">
<ele></ele>
</div>
<script>
Vue.component('ele',{
template:`<div id="element" :class="{show:show}" @click="handleClick">文本内容</div>`,
data(){
return{
show:true
}
},
methods:{
handleClick(){
console.log("clicked")
}
}
});
var app = new Vue({
el:"#app"
})使用render修改后：
<div id="app">
<ele></ele>
</div>
<script>
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(){
return{
show:true
}
},
methods:{
handleClick(){
console.log("clicked")
}
}
})