day69:Vue:元件化開發&Vue-Router&Vue-client
目錄
元件化開發
1.什麼是元件？
2.區域性元件
3.全域性元件
4.父元件向子元件傳值
5.子元件往父元件傳值
6.平行元件傳值
Vue-Router的使用
Vue自動化工具:Vue-Client
元件化開發
1.什麼是元件？
1.元件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重複的，而且很多不同的網站之間，也存在同樣的功能。
2.而在網頁中實現一個功能，需要使用html定義功能的內容結構，使用css宣告功能的外觀樣式，還要使用js來定義功能的特效，因此就產生了把一個功能相關的[HTML、css和javascript]程式碼封裝在一起組成一個整體的程式碼塊封裝模式，我們稱之為“元件”。
3.所以，元件就是一個html網頁中的功能，一般就是一個標籤，標籤中有自己的html內容結構，css樣式和js特效。
4.這樣，前端人員就可以在開發時，只需要書寫一次程式碼，隨處引入即可使用。
5.我們在進行vue開發的時候，還記得我們自己建立的vm物件嗎，這個vm物件我們稱為一個大元件，根元件(頁面上叫Root)，在一個網頁的開發中，根據網頁上的功能區域我們又可以細分成其他元件，或稱為子元件
2.區域性元件
區域性元件三步走:聲子、掛子、用子,即宣告子元件、掛載子元件、使用子元件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>html</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<div class="header">
這是頭部{{ appmsg }}
</div>
<Sonapp/> <!-- 3.使用子元件 -->
</div>
</body>
<script src="vue.js"></script>
<script>
let Sonapp = {
data(){ // 注意:元件中必須寫成函式形式
return {
'sonappmsg':'hello Sonapp!'
}
},
template:`
<div class="content">
內容部分{{sonappmsg}}
</div>
`
};
let vm = new Vue({
el:'#app',
data(){
return{
'appmsg':'hello app!',
}
},
components:{
Sonapp, // 2.掛載子元件
}
})
</script>
</html>3.全域性元件
區域性元件使用時需要掛載，全域性元件使用時不需要掛載。
區域性元件就在某個區域性使用的時候，全域性元件是大家公用的，或者說每個頁面都有這麼一個功能的時候，在哪裡可能都會用到的時候。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>html</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<Addnum></Addnum> <!-- 使用全域性元件 -->
</div>
</body>
<script src="vue.js"></script>
<script>
Vue.component("Addnum",{
data(){
return{
num:1
}
},
template:`
<div><input type="text" v-model="num"><button @click="num+=1">點選</button></div>
`
})
let vm =new Vue({
el:'#app',
data:{
// 全域性元件不需要掛載
}
})
</script>
</html>4.父元件向子元件傳值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>html</title>
<meta charset="UTF-8">
</head>
<body>
<div id="show">
<h1>hello !</h1>
<Father></Father>
</div>
</body>
<script src="vue.js"></script>
<script>
let Son = {
data(){
return{
sonmsg:'這是子元件資訊'
}
},
template:`
<div class="Son">
<h1>{{sonmsg}}</h1>
<h2>子元件Template</h2>
<h2>{{ xx }}</h2>
</div>
`,
props:['xx'] // 1.在子元件中使用prop屬性宣告
};
let Father ={
data(){
return{
msg:'這是father元件',
num:100,
}
},
template:`
<div class="nav">
<h1 style="color:blue;">{{Msg}}---{{num}}</h1>
<!--
<Naver xx="xiaobei"></Naver> 靜態傳值
<Naver :xx="num"></Naver> 動態傳值
-->
<Son :xx="num"></Son>
</div>
`,
components:{
Son,
}
};
let vm = new Vue({
el:'#show',
data(){
return{
}
},
components: {
Father,
}
})
</script>
</html>
父元件向子元件傳值，其實大致可以分為兩步：
1.首先我們在子元件需要定義prop屬性
聲明瞭prop屬性有xx之後，在子元件就可以使用xx了
let Son = {
data(){
return{
sonmsg:'這是子元件資訊'
}
},
template:`
<div class="Son">
<h1>{{sonMsg}}</h1>
<h2>子元件Template</h2>
<h2>{{ xx }}</h2>
</div>
`,
props:['xx'] // 1.在子元件中使用prop屬性宣告
2.父元件要定義自定義的屬性
let father ={
data(){
return{
msg:'這是father元件',
num:100,
}
},
template:`
<div class="nav">
<h1 style="color:blue;">{{Msg}}---{{num}}</h1>
<Son xx="xiaobei"></Son> // 靜態傳值
<Son :xx="num"></Son> // 動態傳值
</div>
`
}
5.子元件往父元件傳值
子元件往父元件傳值，分三步。
第一步：既然是子元件往父元件傳值，肯定是在父元件想使用子元件的值
所以第一步就是在父元件使用子元件的地方加上自定義事件
第二步：在父元件中定義自定義事件對應的方法。方法需要寫引數，用來接收子元件傳遞過來的引數
第三步：子元件中呼叫方法來實現傳值動作emit(父元件自定義事件名稱,資料)
step1.就是在父元件使用子元件的地方加上自定義事件
let App = {
......
//1. 父元件使用子元件的地方加上自定事件
// <Naver @fatherHandler="fuckSon"></Naver>
template:
`
<div class="nav">
<h1 style="color:blue;">{{Msg}}---子元件的num為:{{xx}}</h1>
<Naver @fatherHandler="fuckSon"></Naver>
</div>
`,
......
step2.在父元件中定義自定義事件對應的方法
let App = {
......
// 2 在父元件中定義自定義事件對應的方法,方法需要寫引數,用來接收子元件傳遞過來的資料
fuckSon(val){
this.xx = val;
}
......
}
};
step3.子元件中呼叫方法來實現傳值動作emit
let Naver = {
......
methods:{
zouni(){
//
console.log(this);
// 3 子元件中呼叫$emit方法,來實現傳值動作 $emit(父元件自定義事件名稱,資料)
this.$emit('fatherHandler',this.sonNum);
......
}
}
};
所有程式碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>你好</h1>
<App></App>
</div>
</body>
<script src="vue.js"></script>
<script>
// 1 宣告子元件 聲子
let Naver = {
data(){
return {
navMsg:'這是頂部導航欄',
sonNum:80,
}
},
template:
`
<div class="Naver">
<h1>{{navMsg}}</h1>
<button @click="zouni">走你</button>
</div>
`,
methods:{
zouni(){
//
console.log(this);
// 3 子元件中呼叫$emit方法,來實現傳值動作 $emit(父元件自定義事件名稱,資料)
this.$emit('fatherHandler',this.sonNum);
}
}
};
let App = {
data(){
return {
Msg:'這是App元件',
num:100,
xx:'',
}
},
//1. 父元件使用子元件的地方加上自定事件
// <Naver @fatherHandler="fuckSon"></Naver>
template:
`
<div class="nav">
<h1 style="color:blue;">{{Msg}}---子元件的num為:{{xx}}</h1>
<Naver @fatherHandler="fuckSon"></Naver>
</div>
`,
components:{
Naver,
},
methods:{
// 2 在父元件中定義自定義事件對應的方法,方法需要寫引數,用來接收子元件傳遞過來的資料
fuckSon(val){
this.xx = val;
}
}
};
let vm = new Vue({
el:'#app',
data(){
return {
}
},
// 2 掛載子元件 掛子
components:{
// 掛載元件的簡寫形式
App,
// Naver,
}
})
</script>
</html>
6.平行元件傳值
平行元件傳值，需要在最外層宣告一個公交車bus，通過上車和下車的動作來進行平行元件的傳值功能。
平行元件傳值，大致分為三步:
第一步：宣告一個bus的Vue物件
第二步：假設是T1元件往T2元件傳值，那麼在T1的method中需要執行一個bus.$emit('name',this.t1num)
第三步:在T2元件中需要執行一個bus.$on('name',(val))=>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>你好</h1>
<App></App>
<div class="t1"></div>
</div>
</body>
<script src="vue.js"></script>
<script>
// 1.宣告公交車物件
let bus = new Vue();
Vue.component('T1',{
data(){
return {
t1Msg:'我是t1元件',
t1Num:120,
}
},
template:`
<div class="t1">
<h3>{{t1Msg}}</h3>
<button @click="zouni">走你</button>
</div>
`,
methods:{
zouni(){
// 2.通過公交車將t1的值傳送出去
bus.$emit('kkk',this.t1Num);
}
}
});
Vue.component('T2',{
data(){
return {
t2Msg:'我是t2元件',
t2Num:130,
t1msg:'',
}
},
template:`
<div class="t1">
<h3>{{t2Msg}}</h3>
<h3>t1元件傳遞過來的資料:{{t1msg}}</h3>
</div>
`,
created(){
// 3.通過公交車將t1傳送的值接收過來
bus.$on('kkk', (val) => {
console.log(this);
this.t1msg = val;
});
},
});
let App = {
data(){
return {
Msg:'這是App元件',
num:100,
xx:'',
}
},
template:
`
<div class="nav">
<h1 style="color:blue;">{{Msg}}---子元件的num為:{{xx}}</h1>
<T1></T1>
<T2></T2>
</div>
`,
methods:{
}
}
};
let vm = new Vue({
el:'#app',
data(){
return {
}
},
components:{
App,
}
});
console.log(vm);
</script>
</html>
Vue-Router的使用
1.Vue-Router的介紹
vue就是我們前面學習的vue基礎，vue + vue-router 主要用來做SPA(Single Page Application)，單頁面應用
為什麼要使用單頁面應用呢？因為傳統的路由跳轉，如果後端資源過多，會導致頁面出現'白屏現象'，所以我們希望讓前端來做路由，
在某個生命週期的鉤子函式中，傳送ajax來請求資料，進行資料驅動，之前比如我們用django的MTV模式，我們是將後端的資料全部渲染給了模板，然後模板再發送給前端進行瀏覽器頁面的渲染，一下將所有的資料都給了頁面，
而我們現在使用vue，我可以在元件的鉤子函式中傳送對應的ajax請求去獲取對應的資料，而不是一下子就把資料都放到頁面上了，單頁面應用給我們提供了很多的便利。
這樣的網站我們通過django是可以來完成頁面的渲染的，模板渲染嘛，但是這個論壇的資料資源有很多，我們通過django的MTV模式是一下子就將資料全部放到頁面裡面了，那麼頁面通過瀏覽器渲染的時候，瀏覽器可能沒有那麼快渲染出來，會出現幾秒鐘的白屏現象，也就是說幾秒鐘之後使用者才看到頁面的內容，這樣體驗起來就不好，為了使用者體驗好，就用到了我們說的單頁面應用，django模板渲染做大型應用的時候，也就是頁面很複雜，資料量很大的頁面的時候，是不太合適的，當然如果你夠nb，你也可以優化，但是一般它比較適合一些頁面資料比較小的應用。
那麼解釋一下什麼是單頁應用，看下圖：(react、angular也都是做單頁面應用，很多大型的網站像網易雲音樂，豆瓣等都是react寫的單頁面應用)
2.Vue-Router的簡單操作
一共分四步
1.定義 (路由) 元件。
2.定義路由
3. 建立 router 例項，然後傳 `routes` 配置
4.建立和掛載根例項。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>你好</h1>
<App></App>
</div>
</body>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 1.定義兩個路由元件
let Home = {
data(){
return {
msg:'這是home頁面'
}
},
template:`
<div class="home">
<h1>{{msg}}</h1>
</div>
`
};
let Course = {
data(){
return {
msg:'這是Course頁面'
}
},
template:`
<div class="course">
<h1>{{msg}}</h1>
</div>
`
};
let App = {
data(){
return {
Msg:'這是App元件',
num:100,
xx:'',
}
},
//1. 父元件使用子元件的地方加上自定事件
// <Naver @fatherHandler="fuckSon"></Naver>
template:
`
<div class="nav">
<router-link to="/home">首頁</router-link>
<router-link to="/course">課程頁</router-link>
<router-view></router-view>
</div>
`,
methods:{
// 2 在父元件中定義自定義事件對應的方法,方法需要寫引數,用來接收子元件傳遞過來的資料
fuckSon(val){
this.xx = val;
}
}
};
// 2.定義路由
const routes = [
{path:'/home', component:Home},
{path:'/course', component:Course},
];
// 3.建 router 例項，然後傳 `routes` 配置
let router = new VueRouter({
routes,
})
let vm = new Vue({
el:'#app',
router, // 4.掛載router
data(){
return {
}
},
components:{
App,
}
});
console.log(vm);
</script>
</html>
Vue自動化工具:Vue-Client
。。。先留個坑。到時候再詳細補