使用 vue.js 组件计算一个数据值
Use vue.js component to count up a data value
我正在使用 vue.js 并尝试重新创建 "Listening to Events" 示例。他们使用以下代码:
HTML
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
JS
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
我想做同样的事情,但由于它是我经常做的事情,我想创建一个组件:
HTML
<div id="example-1">
<counterButton></counterButton>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
JS
Vue.component('counterButton', {
template: '<button v-on:click="counter += 1">Add 1</button>'
})
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
这似乎不起作用,同时我收到以下警告:
[Vue warn]: Property or method "nextPage" is not defined on the
instance but referenced during render. Make sure to declare reactive
data properties in the data option.
因为我太不习惯javascript,所以我根本无法理解错误。我想我必须以某种方式 "link" 我的组件的 data
值?
我正在使用 vue.js 并尝试重新创建 "Listening to Events" 示例。他们使用以下代码:
HTML
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
JS
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
我想做同样的事情,但由于它是我经常做的事情,我想创建一个组件:
HTML
<div id="example-1">
<counterButton></counterButton>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
JS
Vue.component('counterButton', {
template: '<button v-on:click="counter += 1">Add 1</button>'
})
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
这似乎不起作用,同时我收到以下警告:
[Vue warn]: Property or method "nextPage" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
因为我太不习惯javascript,所以我根本无法理解错误。我想我必须以某种方式 "link" 我的组件的 data
值?