VUE的组件使用

最新推荐文章于 2023-06-05 16:02:56 发布

qq_39201210

最新推荐文章于 2023-06-05 16:02:56 发布

阅读量92

点赞数

分类专栏： HTML5 js vue

本文链接：https://blog.csdn.net/qq_39201210/article/details/84390130

版权

js 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML5

6 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

<body>
	<div class="box1">
		<!-- 调用组件，直接用标签，组件名 -->
		<cp1></cp1>
	</div>
	<div class="box2">
		<cp1></cp1>
	</div>
</body>

	// 初始化组件 
	// Vue.component('组件名',{
	// 		template:'',html模板，template里只能有一个根标签
	// 		data:function(){
	// 			return {  data需要用return返回，让对象有自身的data。而不会影响其他对象
	// 				name:'张三'
	// 			} 
	// 		},
	// 		methods:function(){}		
	// })

Vue.component('cp1',{
		// template:'<p>我是模板上的p,名叫{{name}}</p>', //可以直接使用data中的数据、方法
		// 可以用es6的语法 `<p></p>写多行标签代码，可以换行`
		template:`
					<p>
						我是模板上的p,名叫{{name}}
						<button @click='changeName'>点我改名</button>
					</p>
				 `, 
		data : function(){
			return {
				name:'哈哈哈'
			}
		},
		methods:{
			changeName:function(){
				this.name = '我改名了';
			}
		}
	})
	var myData = new Vue({
		el:'.box1',
		data:{
		
		},
		methods:{
		
		}
	})
	var myData = new Vue({
		el:'.box2',
		data:{
		
		},
		methods:{
		
		}
	})