Vue組件化編程
一、組件與組件化
1 組件的定義：
實現應用中局部功能代碼和資源的集合（html/css/js/image....)
2 為什么要使用組件：
一個界面的功能很復雜
3 使用組件的作用是什么：
復用編碼，簡化項目編程，提高運行效率
4 什么是組件化：
當應用中的功能是多組件來編寫的，那這個應用就是一個組件化的應用。
5 使用組件方式編寫應用：
二、使用組件的三大步驟
為了方便學習和理解，以下代碼是在html文件中實現功能為：定義了School組件，然后對School組件進行注冊
<script type="text/javascript">
// 定義組件
// Vue.extend()可省略，即使不寫，Vue也會執行Vue.extend()函數
const School = Vue.extend({
# 使用name屬性配置指定組件在開發者中呈現的名字
name:'School',
# 使用template配置組件結構
template:`
<div>
<h2>學校名稱：{{name}}</h2>
<h2>學校地址：{{address}}</h2>
</div>
`,
# data必須寫成函數
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})
# 全局注冊（全局注冊和局部注冊，只會二選一）
Vue.component('School',School)
new Vue({
el:'#root',
data:{
msg:'歡迎學習Vue!'
},
# 局部注冊
components:{
# 同名時可以把 School:School 簡寫成 School
School:School
}
})
</script>
2.1 定義組件
使用Vue.extend(options)創建，其中options和new Vue(options)時傳入的那個options幾乎一樣，但也有區別，區別如下：
a. el不要寫，為什么？
最終所有的組件都要經過一個vm的管理，由vm中el決定服務哪個容器。
b. data必須寫成函數，為什么？
避免組件被復用時，數據存在引用關系。
另外，定義組件時，補充三點：
（1）使用template可以配置組件結構
（2）組件的命名官方推薦方法：使用大駝峰標識（前提是腳手架項目中）
（3）定義組件是可以使用簡寫的方法（見如下示例代碼）
consts School = Vue.extend(options) 可簡寫成 consts School = options
但是，必須要強調一點，雖然沒有寫Vue.extend(),但是程序實際上是調用了Vue.extend()
g. 組件的嵌套 （用的不多，這里就略過了）
2.2 注冊組件
a. 局部注冊：new Vue的時候傳入components選項
new Vue({ el:'#root', data:{ msg:'歡迎學習Vue!' }, components:{School} })
b. 全局注冊：Vue.component( '組件名' , 組件)
Vue.component('School',School)
2.3 使用組件
<School/>
三、單文件組件
在vs-code里面編寫vue組件的時候，建議先安裝一個插件：Vetur
3.1 一個.vue文件的組成由3個部分組成，模版頁面如下：
<template> <!-- 組件的結構 --> </template> <script> // 組件交互相關的代碼（數據，方法等等）
</script> <style> /* 組件的樣式 */ </style>
以School組件為示例，創建一個School.vue文件，里面編寫內容：
# template標簽不參與結構編譯，即編譯后會被去掉
<template> <div class="backgroud"> <h2>學校名稱：{{name}}</h2> <h2>學校地址：{{address}}</h2> <button @click="showName">點我提示學校名</button> </div> </template> <script> export default { name:'School', data(){ return { name:'尚硅谷', address:'北京昌平' } }, methods: { showName(){ alert(this.name) } } } </script> <style> .backgroud { background-color: orange; } </style>
補充一些知識點：export暴露 (es模塊化的知識點) 的三種方式：
分別暴露
export const School = Vue.extend({ data() { return { name: "尚硅谷", address: "北京昌平" } }, methods: { showName() { alert(this.name) } } })
統一暴露
const School = Vue.extend({ data() { return { name: "尚硅谷", address: "北京昌平" } }, methods: { showName() { alert(this.name) } } }) export {School}
默認暴露，一般會使用默認暴露，因為默認暴露時，引入會比較簡單
const School = Vue.extend({ data() { return { name: "尚硅谷", address: "北京昌平" } }, methods: { showName() { alert(this.name) } } })
export default School
可簡寫為：
export default {
name: 'School',
data() {
return {
name: "尚硅谷",
address: "北京昌平"
}
},
methods: {
showName() {
alert(this.name)
}
}
}
分別暴露和統一暴露時的引入方式
import {School} from ./components/School
默認暴露的引入方式
import School from ./components/School
3.2 引入組件
Vue中有一個非常重要的組件 —— App.vue，它的作用是匯總所有組件（說明一點：Student.vue組件和School.vue組件類似）
<template> <div> <School></School> <Student></Student> </div> </template> <script> //引入組件，.vue可省略，這種引入方式是es6的知識點 import School from './components/School.vue' import Student from './components/Student.vue' export default { name:'App',
// 局部注冊 components:{
// School:School可簡寫成School
School: School,
Student: School
} } </script>
3.3 映射成標簽
import School from './components/School' import Student from './components/Student' export default { name:'App', components:{School,Student} }
3.4 使用組件標簽
在template標簽下，必須有div標簽，也就是根元素，否則編譯會不通過
<template> <div> <School></School> <Student></Student> </div> </template>
補充一個知識點：
Vue插件
功能：用于增強vue
export default {
install(Vue,x,y,z){
console.log(x,y,z)
//全局過濾器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定義全局指令
Vue.directive('fbind',{
//指令與元素成功綁定時（一上來）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入頁面時
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析時
update(element,binding){
element.value = binding.value
}
})
//定義混入
Vue.mixin({
data() {
return {
x:100,
y:200
}
},
})
//給Vue原型上添加一個方法（vm和vc就都能用了）
Vue.prototype.hello = ()=>{alert('你好啊')}
}
}
引入和使用插件
//引入插件 import plugins from './plugins' //使用插件 Vue.use(plugins,1,2,3)
浙公網安備 33010602011771號