組件化與模塊化的區別
什么是組件：組件的出現，就是為了拆分Vue實例的代碼量，能夠讓我們以不同的組件，來划分不同的功能模塊
，將來我們需要什么功能，就可以去調用對應的組件即可
組件化與模塊化的不同：
模塊化：是從代碼邏輯的角度進行分析，方便代碼分層開發，保證每個功能模塊的只能單一
組件化：是從UI界面的角度進行划分，前端的組件化，方便UI組件的重用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div class="app">
<!-- 引用組件的名稱 -->
<login></login>
<login2></login2>
<login3></login3>
<hr>
<login6></login6>
</div>
<!-- 注意 這里的id是必須的，不要在實例控制中的divcalss app 中去寫template -->
<template id="login3">
<div>
<h2>我是第三種方式創建出來的</h2>
</div>
</template>
<!-- Vue實例 -->
<script>
// Component 組件的創建
// 注意 template 中的容器 只能有一個父元素，不能包含兩個 你可以用一個div包裹
// 第一種創建全局組件
// extend是注冊組件函數，他返回一個對象
var comobj= Vue.extend({
template:"<h1>我是全局組件</h1>"
})
// component函數提交組件，第一個參數為組件的名稱，第二個參數是一個注冊組件的對象
Vue.component("login",comobj)
// 第二種創建方式
// component 中直接寫上一個模板對象
Vue.component('login2',{template:'<h1>我是第二種v創建出來的組件</h1>'});
// 第三種創建的方式 首先在元素中創建一個template模板
Vue.component('login3',{template:'#login3'})
var vm=new Vue({
el:'.app',
data:{},
// 定義私有組件 和全局差不多 組件名稱和對象，也可以使用template模板來創建
components:{
login6:{template:'#login3'}
}
})
</script>
</body>
</html>
組件的引用可以使用組件的名字直接引用 也可以使用Vue給我們提供的的元素
Vue 提供了component，來展示對應名稱的組件
component是一個占位符，:is屬性可以用來指定要展示的組件名稱
<compnent :is="comName" ></component>
<div class="app"> <login></login> <login2></login2> <!-- 使用component 占位符來展示組件 --> <!-- 注意 :is 是綁定的屬性，需要在實例的data中綁定的 組件的名稱是字符串 --> <!-- 其中 他還提供了 mode屬性來切換動畫的先進先出的問題 --> <component :is="login='login'" mode="out-in"></component>
</div>