更新

tianyucoder · tianyucoder · commit 785446390e79 · 2021-01-16T10:13:07.000+08:00
diff --git a/17_插件/atguigu.js b/17_插件/atguigu.js
@@ -0,0 +1,24 @@
+const atguigu = {}
+
+atguigu.install = function(Vue,options){
+	
+	//添加两个全局指令
+	Vue.directive('upper-text',function(el,bingding){
+		el.innerText = bingding.value.toUpperCase()
+	})
+	Vue.directive('lower-text',function(el,bingding){
+		el.innerText = bingding.value.toLowerCase()
+	})
+
+	//给Vue自身添加属性
+	Vue.projectName = '学生管理系统'
+	Vue.MyVersion = 'V1.0.1'
+	Vue.showINfo = function(){
+		console.log('我是一些信息')
+	}
+
+	//给Vue原型上添加数据，供vm使用
+	Vue.prototype.$random = function(min,max){
+		return Math.floor(Math.random()*(max-min) + min)
+	}
+}
diff --git a/17_插件/自定义插件.html b/17_插件/自定义插件.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>自定义插件</title>
+		<script type="text/javascript" src="../js/vue.js"></script>
+		<script type="text/javascript" src="./atguigu.js"></script>
+	</head>
+	<body>
+		<!-- 准备好一个容器-->
+		<div id="root">
+			<h2 v-upper-text="name"></h2>
+			<h2 v-lower-text="name"></h2>
+			<h2>{{$random(2,8)}}</h2>
+		</div>
+
+		<script type="text/javascript" >
+			/* 
+				插件的定义：是一个包含install方法的对象
+			*/
+			Vue.config.productionTip = false //关闭生产提示
+
+			//Vue会帮我们去调用atguigu这个插件里的install方法
+			Vue.use(atguigu)
+
+			console.log(Vue.projectName)
+			console.log(Vue.MyVersion)
+			Vue.showINfo()
+
+			const vm = new Vue({
+				el:'#root',
+				data:{
+					name:'atGuiGu'
+				}
+			})
+
+		</script>
+	</body>
+</html>
