vue组件常用声明方式

一.前言

这是自己重新写的一个，感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂

二.代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件练习</title>
		<!-- 引入vue.js -->
		<script src="../vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- {{msg}} -->
			<!-- 全局组件 -->
			<my-div></my-div>
			<!-- 局部组件 -->
			<my-div2></my-div2>
			<!-- //templata 注册全局组件 -->
			<clj></clj>
　　　　　　　　　　　　　　<!-- //templata 注册局部组件 -->
			<clj2></clj2>
		</div>
		<!-- //templata 注册全局组件 -->
		<template id="my-template">
			<div>
				我是template全局组件
			</div>
		</template>
　　　　　　　　　　<!-- //templata 注册全局组件 -->
		<template id="my-template2">
			<div>
				我是template局部组件
			</div>
		</template>
		<script>
			// 全局组件
			Vue.component('clj',{template:"#my-template"})
			Vue.component("my-div",{template:`<div>我是全局组件</div>`})
			new Vue({
				el:'#app',
				data(){
					return{
						msg:'我不爱大海和森林'
					}
				},
			//局部组件
				components:{
					'my-div2':{template:`<div>我是局部组件</div>`},
					'clj2':{template:"#my-template2"}
				}
			})
		</script>
	</body>
</html>

 

posted @ 2019-11-28 11:07  程小杰呀  阅读(2259)  评论(0)    收藏  举报