VUE组件化开发思想

xi_weina

于 2024-01-03 15:22:20 发布

阅读量430

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xi_weina/article/details/135364921

版权

1、类似于手机进行一块块组件化

包含标准、分治、重合、组合

实现样例如下，点击按钮自动➕2

<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
		<script src="js/vue.js"></script>
		<script>
			Vue.component('button-counter',{
				data: function() {
					return {
						count:0
					}
				},
				template:'<button @click="handle">点击了{{count}}次</button>',
				methods: {
					handle:function(){
						this.count +=2;
					}
				}
			})
			var vm = new Vue({
				el: '#app',
				data: {

				}
			})
		</script>
	</body>
</html>