元件化與子產品化的差別
什麼是元件：元件的出現，就是為了拆分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> ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)