1.組件的出現是爲了拆分Vue實例的代碼量的，能夠讓我們以不同的組件來規劃不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件即可
2.組件化和模塊化的不同
模塊化：是從代碼邏輯的角度進行劃分的，方便代碼分層開發，保證每個功能模塊的職能單一
組件化：是從UI界面的角度進行劃分的，前端的組件化方便UI組件的重用
一:創建組件:
1.方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/animate.css">
<style>
</style>
</head>
<body>
<div id="app">
<!-- 如果要使用組件,直接把組件的名稱以HTML標籤的形式,引入到頁面中即可 名字不能寫駝峯,如果命名的時候是駝峯就在這改成- -->
<my-com1></my-com1>
</div>
</div>
<script>
/*方法一:
//1.1使用Vue.extend來創建全局的Vue組件
var com1 = Vue.extend({
template: '<h3>這是使用Vue.extend創建的組件</h3>' //通過template屬性制定了組件要展示的HTML結構
})
//1.2使用Vue.component('組件的名稱',創建出來的組件模板對象)
// 如果使用Vue.component定義全局組件的時候,組件名稱使用了駝峯命名,則在引用組件的時候,需要把駝峯改成小寫的字母,
// 同時兩個單詞之間使用-連接,如果不使用駝峯,名字直接拿來用就行
Vue.component('myCom1', com1)
*/
/* 方法一的簡寫:
Vue.component('myCom1', Vue.extend({
template: '<h3>這是使用Vue.extend創建的組件</h3>'
}))*/
// 再簡寫
// 注意:不論是哪種方式創建出來的組件,組件的template屬性指向的模板內容,必須有且只能有
// 唯一一個根元素,比如h3和span就會報錯,同級元素,但是可以用一個div包起來
Vue.component('myCom1', {
template: '<div><h3>這是使用Vue.extend創建的組件</h3><span>這是span</span></div>'
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>
2.方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 標籤形式 -->
<mycom></mycom>
</div>
<div id="app2">
<mycom></mycom>
</div>
<!-- 在被控制的#app外面,使用template元素,定義組件的HTML模板結構 -->
<template id="tmp">
<div>
<!-- 同級元素同樣不能在一起,用更大的div包一起 -->
<h1>這是通過template元素,在外部定義的組件結構,這個方式有代碼的智能提示和高亮</h1>
<h4>h4標籤</h4>
</div>
</template>
<script>
Vue.component('mycom', {
template: '#tmp'
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
var vm2 = new Vue({
el: "#app2",
data: {},
methods: {}
})
</script>
</body>
</html>
3.私有組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<div id="app2">
<login></login>
</div>
<template id="tmp">
<h1>這是一個私有組件</h1>
</template>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
var vm2 = new Vue({
el: "#app2",
data: {},
methods: {},
components: {
//定義實例內部私有組件 只能在vm2控制的區域用
login: {
template: '#tmp'
}
}
})
</script>
</body>
</html>
二:組件中的data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app"><mycom></mycom></div>
<script>
// 組件可以有自己的data數據,組件的data和實例的data不一樣,實例的data可以爲一個對象,但是組件中的必須是一個方法
//組件中的data除了必須爲一個方法之外,這個方法內部還必須返回一個對象
//組件中的data數據使用方式和實例中的data使用方式完全一樣
Vue.component('mycom',{
template:'<h1>這是全局組件----{{msg}}</h1>',
data:function(){
return {
msg:'這是組件中的data定義的數據'
}
}
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>
1.爲什麼組件的data必須是一個function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmp">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</template>
<script>
//設置一個計數器組件,每當點擊按鈕 讓data中的count值+1
// var dataObj = {
// count: 0
// }
Vue.component('counter', {
template: '#tmp',
data: function () {
//在上面定義了dataObj 這種方式點擊一個+1的按鈕 其他的都跟着加,
//如果是每次經歷一個data裏面的function 這樣就會重新有個數據,說明data必須是個function
// return dataObj
return { count: 0}
},
methods:{
increment(){
this.count++
}
}
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>