我想使用 Vue.js Render 函数在 javascript 中制作组件。现在我可以制作一个 HTML 结构,一个 SPAN 和一个按钮。当我点击按钮时,我希望它在控制台中输出,但它只是不起作用。这是我的代码:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<counter></counter>
</div>
<script>
var a = {
data () {
return {count: 1}
},
methods: {
inc () {console.log(this.count)}
},
render:function(h){
var self = this
var buttonAttrs ={
on:{click:self.inc}
}
var span = h('span',this.count.toString(),{},[])
var button = h('button','+',buttonAttrs,[])
return h('div'
,{},
[
span,
button
])
}
}
new Vue({
el:'#app',
components:{
counter : a
}}
)
</script>
Run Code Online (Sandbox Code Playgroud)
或在codepen 上欢迎任何回复,谢谢。