vue 简单实验自定义组件局部注册

原创于 2023-08-25 10:22:34 发布 · 831 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #简单实验

前端专栏收录该内容

104 篇文章

订阅专栏

本文展示了如何在HTML中使用Vue.js创建一个简单的计数器应用，通过组件化开发并利用数据绑定实现counter变量的实时更新。

1.概要

2.代码

<html>
</html>
<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<body>
	<div id="counter">
  		<component-a></component-a>
	</div>
</body>
<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  },
  template:`
    <div>
  		Counter: {{ counter }}
	</div>`
}
const app = Vue.createApp({
  components: {
    'component-a': Counter
  }
})
app.mount('#counter')
</script>

3.实验结果