Vue学习

最新推荐文章于 2024-04-08 09:35:31 发布

An_1999

最新推荐文章于 2024-04-08 09:35:31 发布

阅读量293

点赞数

分类专栏： Vue学习文章标签： Vue

本文链接：https://blog.csdn.net/An_1999/article/details/102556110

版权

本文介绍了Vue.js中组件的基础知识和事件监听的使用，强调了将重复功能封装为组件以提升开发效率和便利性。文中提到了在data选项中定义posts数组，并探讨了组件的事件交互。

摘要由CSDN通过智能技术生成

Vue学习2019/10/14

（组件基础）
把我们要重复使用的功能封装成组件，可以使开发变得更高效，更方便。

<div id="app">
	<button-counter></button-counter>    
	<button-counter></button-counter>                //组件可复用，互不影响
</div>
<script type="text/javascript">
Vue.component('button-counter', {
   
	
	data: function () {
                       //数据
		return {
   
		  count: 0
		}
	},
	template: '<button v-on:click="count++"> You clicked me {
   {
    count }} times.</button>    //模板内容，按钮被点击count+1
	
	}
})
var vm = new Vue({
   
	el : "#app",
	data : {