自定义组件时，template模板的替代方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染函数</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<test></test>
</div>
<script>
//模板组件
// Vue.component('test', {
//
// template: '<div id="test" v-on:click="onclick">组件</div>',
//
// data: function() {
//
// return {
//
// show: true
// }
// },
//
// methods: {
//
// onclick: function() {
//
// console.log('clicked!');
// }
// }
// })
//渲染组件
Vue.component('test',{
render:function(createElement){
return createElement('div',{ attrs:{ id:'test'},on:{click:this.onclick} },'组件');
},
data: function(){
return{
show: true
}
},
methods:{
onclick:function()
{
console.log('clicked!');
}
}
})
new Vue({ el:'#app' });
</script>
</body>
</html>
网友评论