vue.js(3)
5. 組件化開發
5.1 組件[component]
組件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重復的，而且很多不同的頁面之間，也存在同樣的功能。
而在網頁中實現一個功能，需要使用html定義功能的內容結構，使用css聲明功能的外觀樣式，還要使用js來定義功能的特效，因此就產生了把一個功能相關的[HTML、css和javascript]代碼封裝在一起組成一個整體的代碼塊封裝模式，我們稱之為“組件”。
所以，組件就是一個html網頁中的功能，一般就是一個標簽，標簽中有自己的html內容結構，css樣式和js特效。
這樣，前端人員就可以在組件化開發時，只需要書寫一次代碼，隨處引入即可使用。
vue的組件有兩種：默認組件[全局組件] 和 單文件組件
5.1.1 默認組件
<div id="app">
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
</div>
<script>
Vue.component("addnum",{
template:'<div><input type="text" v-model="num"><button @click="num+=1">點擊</button></div>',
data: function(){
// 寫在這里的數據只有當前組件可以使用
return {
num:1,
}
}
});
var vm = new Vue({
el:"#app",
// 這里寫的數據是全局公用的，整個文件共享
data:{
}
})
</script>
6. Vue自動化工具（Vue-cli）
前面學習了普通組件以后，接下來我們繼續學習單文件組件則需要提前先安裝準備一些組件開發工具。否則無法使用和學習單文件組件。
一般情況下，單文件組件，我們運行在 自動化工具vue-CLI中，可以幫我們編譯單文件組件。所以我們需要在系統中先搭建vue-CLI工具，
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。
nvm工具的下載和安裝： https://www.jianshu.com/p/d0e0935b150a
? https://www.jianshu.com/p/622ad36ee020
安裝記錄:
打開:https://github.com/coreybutler/nvm-windows/releases
安裝完成以后,先查看環境變量是否設置好了.
常用的nvm命令
nvm list # 列出目前在nvm里面安裝的所有node版本
nvm install node版本號 # 安裝指定版本的node.js
nvm uninstall node版本號 # 卸載指定版本的node.js
nvm use node版本號 # 切換當前使用的node.js版本
如果使用nvm工具，則直接可以不用自己手動下載，如果使用nvm下載安裝 node的npm比較慢的時候，可以修改nvm的配置文件(在安裝根目錄下)
# settings.txt
root: C:\tool\nvm [這里的目錄地址是安裝nvm時自己設置的地址,要根據實際修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
6.1 安裝node.js
Node.js是一個新的后端(后臺)語言，它的語法和JavaScript類似，所以可以說它是屬于前端的后端語言，后端語言和前端語言的區別：
- 運行環境：后端語言一般運行在服務器端，前端語言運行在客戶端的瀏覽器上
- 功能：后端語言可以操作文件，可以讀寫數據庫，前端語言不能操作文件，不能讀寫數據庫。
我們一般安裝LTS(長線支持版本 Long-Time Support)：
下載地址：https://nodejs.org/en/download/【上面已經安裝了nvm，那么這里不用手動安裝了】
node.js的版本有兩大分支：
官方發布的node.js版本：0.xx.xx 這種版本號就是官方發布的版本
社區發布的node.js版本：xx.xx.x 就是社區開發的版本
Node.js如果安裝成功，可以查看Node.js的版本,在終端輸入如下命令：
node -v
6.2 npm
在安裝node.js完成后，在node.js中會同時幫我們安裝一個npm包管理器npm。我們可以借助npm命令來安裝node.js的包。這個工具相當于python的pip管理器。
npm install -g 包名 # 安裝模塊 -g表示全局安裝，如果沒有-g，則表示在當前項目安裝
npm list # 查看當前目錄下已安裝的node包
npm view 包名 engines # 查看包所依賴的Node的版本
npm outdated # 檢查包是否已經過時，命令會列出所有已過時的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸載node包
npm 命令 -h # 查看指定命令的幫助文檔
6.3 安裝Vue-cli
npm install -g vue-cli
如果安裝速度過慢，一直超時，可以考慮切換npm鏡像源：http://npm.taobao.org/
6.4 使用Vue-CLI初始化創建前端項目
6.4.1 生成項目目錄
使用vue自動化工具可以快速搭建單頁應用項目目錄。
該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可創建并啟動一個帶熱重載、保存時靜態檢查以及可用于生產環境的構建配置的項目：
// 生成一個基于 webpack 模板的新項目
vue init webpack 項目目錄名
例如：
vue init webpack myproject
// 啟動開發服務器 ctrl+c 停止服務
cd myproject
npm run dev # 運行這個命令就可以啟動node提供的測試http服務器
運行了上面代碼以后,終端下會出現以下效果提示：
6.4.2 項目目錄結構
src 主開發目錄，要開發的單文件組件全部在這個目錄下的components目錄下
static 靜態資源目錄，所有的css，js文件放在這個文件夾
dist項目打包發布文件夾，最后要上線單文件項目文件都在這個文件夾中[后面打包項目,讓項目中的vue組件經過編譯變成js 代碼以后,dist就出現了]
node_modules目錄是node的包目錄，
config是配置目錄，
build是項目打包時依賴的目錄
src/router 路由,后面需要我們在使用Router路由的時候,自己聲明.
6.4.3 項目執行流程圖
整個項目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導入頂級單文件組件App.vue,App.vue中會通過組件嵌套或者路由來引用components文件夾中的其他單文件組件。
7. 單文件組件的使用
組件有兩種：普通組件、單文件組件
普通組件的缺點：
- html代碼是作為js的字符串進行編寫，所以組裝和開發的時候不易理解，而且沒有高亮效果。
- 普通組件用在小項目中非常合適，但是復雜的大項目中，如果把更多的組件放在html文件中，那么維護成本就會變得非常昂貴。
- 普通組件只是整合了js和html，但是css代碼被剝離出去了。使用的時候的時候不好處理。
將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，相當于一個組件具有了結構、表現和行為的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名為“.vue”，比如："Home.vue"。
-
創建組件
在組件中編輯三個標簽，編寫視圖、vm對象和css樣式代碼。
7.1 template 編寫html代碼的地方
<template>
<div id="Home">
<span @click="num--" class="sub">-</span>
<input type="text" size="1" v-model="num">
<span @click="num++" class="add">+</span>
</div>
</template>
7.2 script編寫vue.js代碼
<script>
export default {
name:"Home",
data: function(){
return {
num:0,
}
}
}
</script>
7.3 style編寫當前組件的樣式代碼
<style scoped>
.sub,.add{
border: 1px solid red;
padding: 4px 7px;
}
</style>
7.4 完成案例-點擊加減數字
創建Homes.vue
<template>
<div class="add_num">
<span @click="num++">+</span>
<input type="text" size="2" v-model="num">
<span @click="num--">-</span>
</div>
</template>
<script>
export default{
name:"AddNum",
data: function(){
return {
num: 0,
}
}
}
</script>
<style scoped>
.add_num{
font-size: 32px;
}
</style>
在App.vue組件中調用上面的組件
<template>
<div id="Home">
<span @click="num--" class="sub">-</span>
<input type="text" size="1" v-model="num">
<span @click="num++" class="add">+</span>
</div>
</template>
<script>
export default {
name:"Home",
data: function(){
return {
num:0,
}
}
}
</script>
<style scoped>
.sub,.add{
border: 1px solid red;
padding: 4px 7px;
}
</style>
在開發vue項目之前，需要手動把 App.vue的HelloWorld組件代碼以及默認的css樣式，清楚。
上面的代碼效果：
7.4 組件的嵌套
有時候開發vue項目時,頁面也可以算是一個大組件,同時頁面也可以分成多個子組件.
因為,產生了父組件調用子組件的情況.
例如,我們可以聲明一個組件,作為父組件
在components/創建一個保存子組件的目錄HomeSon
在HomeSon目錄下,可以創建當前頁面的子組件,例如,是Menu.vue
// 組件中代碼必須寫在同一個標簽中
<template>
<div id="menu">
<span>{{msg}}</span>
<div>hello</div>
</div>
</template>
<script>
export default {
name:"Menu",
data: function(){
return {
msg:"這是Menu組件里面的菜單",
}
}
}
</script>
然后，在父組件中調用上面聲明的子組件。
最后,父組件被App.vue調用.就可以看到頁面效果.
效果:
7.5 傳遞數據
父組件的數據傳遞給子組件
例如,我們希望把父組件的數據傳遞給子組件.
可以通過props屬性來進行數據傳遞.
傳遞數據三個步驟：
-
在父組件中，調用子組件的組件標簽處，使用屬性值的方式往下傳遞數據
<Menu :mynum="num" title="home里面寫的數據"/> # 上面表示在父組件調用Menu子組件的時候傳遞了2個數據： 如果要傳遞變量[變量可以各種類型的數據]，屬性名左邊必須加上冒號:，同時，屬性名是自定義的，會在子組件中使用。 如果要傳遞普通字符串數據，則不需要加上冒號: -
在子組件中接受上面父組件傳遞的數據，需要在vm組件對象中，使用props屬性類接受。
<script> export default { name:"Menu", props:["mynum","title"], data: function(){ return { msg:"這是Menu組件里面的菜單", } } } </script> // 上面 props屬性中表示接受了兩個數據。 -
在子組件中的template中使用父組件傳遞過來的數據.
<template> <div id="menu"> <span>{{msg}}，{{title}}</span> <div>hello，{{mynum}}</div> </div> </template>
效果：
步驟流程:
使用父組件傳遞數據給子組件時, 注意一下幾點:
-
傳遞數據是變量,則需要在屬性左邊添加冒號.
傳遞數據是變量,這種數據稱之為"動態數據傳遞"
傳遞數據不是變量,這種數據稱之為"靜態數據傳遞"
-
父組件中修改了數據,在子組件中會被同步修改,但是,子組件中的數據修改了,是不是影響到父組件中的數據.
這種情況,在開發時,也被稱為"單向數據流"
子組件傳遞數據給父組件
-
在子組件中，通過
this.$emit()來調用父組件中定義的事件.<template> <div> <p>Post的子組件</p> <h2>{{fnum}}</h2> <p>data={{data}}</p> <p>fnum={{fnum}}</p> <div><input type="text" v-model="fnum"></div> </div> </template> <script> export default { name: "PostSon", // 父組件傳遞數據給子組件: 1. 在父組件中調用子組件的組件名稱標簽上面聲明屬性和傳遞值，2. 在子組件中通過props進行接收 props:["data","fnum"], // 接受父組件中傳遞過來的數據 // 子組件傳遞數據給父組件[事件的方式進行傳遞]： watch:{ fnum(){ console.log(this.fnum); // this.$emit("父元素的自定義事件","要傳遞的數據"); // 通過this.$emit()方法，子組件可以把數據傳遞給父組件 this.$emit("postparentdata",this.fnum); } } } </script> <style scoped> </style> -
父組件中聲明一個和子組件中
this.$emit("自定義事件名稱")對應的事件屬性。<template> <div> <h1>num={{num}}</h1> <Son data="我是付組件里面的內容" :fnum="num" @postparentdata="getsondata"></Son> </div> </template> -
父組件中，聲明一個自定義方法，在事件被調用時，執行的。
<script> import Son from "./PostSon" export default { name: "Post", data(){ return { num: 100, } }, components:{ Son:Son, }, methods:{ getsondata(message){ console.log("父組件"+message); this.num = message; } } } </script>
8. 在組件中使用axios獲取數據
默認情況下，我們的項目中并沒有對axios包的支持，所以我們需要下載安裝。
在項目根目錄中使用 npm安裝包
npm install axios
接著在main.js文件中，導入axios并把axios對象 掛載到vue屬性中作為一個子對象，這樣我們才能在組件中使用。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 這里表示從別的目錄下導入 單文件組件
import axios from 'axios'; // 從node_modules目錄中導入包
Vue.config.productionTip = false
Vue.prototype.$axios = axios; // 把對象掛載vue中
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
8.1 在組建中使用axios獲取數據
<script>
export default{
。。。
methods:{
get_data:function(){
// 使用axios請求數據
this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then((response)=>{
console.log(response);
}).catch(error=>{
console.log(error);
})
}
}
}
</script>
效果:
使用的時候，因為本質上來說，我們還是原來的axios，所以也會收到同源策略的影響。
作業：
- 使用組件化開發，完成之前的選項卡練習功能
- 使用組件化開發，完成之前的todolist功能
- 使用組件化開發，完成table表格的增刪查改作業
浙公網安備 33010602011771號