Add files via upload

人心思动 · web-flow · commit c0d2aa05fe5f · 2018-08-18T18:43:08.000+08:00
diff --git a/vue2.0学习/Vue.extend.html b/vue2.0学习/Vue.extend.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>定义组件的两种方式</title>
+	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
+</head>
+
+<body>
+	<div id="itany">
+		<hello></hello>
+		<my-world></my-world>
+	</div>
+
+	<script>
+		/**
+		 * 方式1：先创建组件构造器，然后由组件构造器创建组件
+		 */
+		//1.使用Vue.extend()创建一个组件构造器
+		var MyComponent = Vue.extend({
+			template: '<h3>Hello World</h3>'
+		});
+		//2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
+		Vue.component('hello', MyComponent);
+
+		/**
+		 * 方式2：直接创建组件(推荐)
+		 */
+		// Vue.component('world',{
+		Vue.component('my-world', {
+			template: '<h1>你好，世界</h1>'
+		});
+
+		var vm = new Vue({ //这里的vm也是一个组件，称为根组件Root
+			el: '#itany',
+			data: {
+				msg: '前端'
+			}
+		});	
+	</script>
+</body>
+
+</html>
