Vue计数器案例
模板中创建变量,因为计数器是能变化的,需要一个变量
Vue.createApp({
template: '<div>{{counter}}</div>'
}).mount("#app")现在我们只是在模板创建了 counter 这个变量,但是没有声明,声明这个变量需要在 data( ) 函数中,具体代码如下.
data() {
return {
counter: 1
}
},也许你现在还不能完全明白这段代码的意思，这不要紧，前几节课你只要跟着敲.得到结果就好。写到这里，你可以双击文件打开，在浏览器中看一下效果。
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data(){
return{
counter:1
}
},
mounted(){//页面一加载完就自动运行（刷新）(钩子函数)
// console.log('111111111111')
setInterval(()=>{
// this.counter+=1
this.$data.counter+=1
},1000)
},
template:'<div>{{counter}}</div>'
}).mount("#app")
</script>
