目錄
復習
"""
1、指令：
v-once: <p v-once>{{ msg }}</p>
v-cloak: 防止頁面加載抖動
v-show：綁定的變量為布爾類型 <p v-show="isShow">{{ msg }}</p>，隱藏時，任然在頁面中通過display:none渲染
v-if|v-else-if|v-else: 前分支成立會屏蔽后分支，else分支不需要條件
v-if="showBox == 'rBox'"
v-for：遍歷
字符串: v-for="(ch, index) in str"
數組：v-for="(ele, index) in arr"
對象：v-for="(value, key, index) in obj"
2、實例成員：
computed: 設置 方法屬性，該方法屬性在頁面渲染后，綁定的方法中任意變量發送改變(都被監聽)，都會回調綁定的方法 - 一個變量依賴多個變量
computed:{
fullName() {
return this.firstName + this.lastName;
}
}
watch: 設置已有屬性的監聽事件，監聽的變量值改變就會回調綁定的方法 - 多個變量依賴一個變量
watch:{
fullName() {
this.firstName = this.fullName.split('')[0];
this.lastName = this.fullName.split('')[1];
}
}
props：聲明組件的自定義屬性
emit：為組件自定義事件發送數據
3、組件
what：html、css、js的集合體
特點：每個組件都是一個vue實例；有根組件、全局組件、局部組件三種；組件都有自己的template(根組件可以省略采用掛載點)；子組件可以復用，所以數據要做局部化處理data(){ return{} }；在哪個組件模板中出現的變量，就由當前組件提供變量對應的值
全局組件：
Vue.component("組件名", {實例成員們})
局部組件：必須在使用該組件的父組件中注冊
let 組件名 = {實例成員們}
new Vue({
el: "#app",
components: {
組件標簽名: 組件名
}
})
組件信息交互
父傳子：提供綁定自定義屬性
子傳父：提供自定義事件攜帶
"""
Vue項目環境搭建
"""
node ~~ python：node是用c++編寫用來運行js代碼的（安裝node自帶安裝npm,而npm是國外的源，所以安裝好node之后就要換國內的淘寶源）
npm(cnpm) ~~ pip：npm是一個終端應用商城，可以換國內源cnpm
vue ~~ django：vue是用來搭建vue前端項目的 （vue是在安裝好的cnpm/npm應用商城中安裝）
1) 安裝node
官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/
2) 換源安裝cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3) 安裝vue項目腳手架
>: cnpm install -g @vue/cli #-g是global全局的意思
注：2或3終端安裝失敗時，可以清空 npm緩存 再重復執行失敗的步驟
npm cache clean --force
"""
命令行命令：
node -v /node --version 查看版本
npm -v /npm --version
cnpm -v /cnpm --version
vue -v / vue --version
Vue項目創建
1) 進入存放項目的目錄
>: cd ***
2) 創建項目r
>: vue create 項目名
了解：
babel：將es6的語法轉換成es5的語法，因為我們寫的通常是es6的語法，而瀏覽器解析的是es5的語法
TypeScript:也是基於es的另外一種ts,學習成本比es高的多
PWA：前端優化
router: 前后端分離，前台的頁面轉跳都是前台自己來完成，所以前台一定要有路由管理
Vuex:倉庫，全局的單例，當頁面沒有刷新的情況下，在任何地方訪問的值大家都是共有的
（cookie自定義過期時間過期失效，session——storage標簽關閉就失效，標簽不失效就不 關閉，local_storage永久生效，Vuex當頁面不刷新的時候就有效，刷新值就消失了）
CSS Pre:css的編譯器(less,sass) （本來css和html是沒有邏輯的，不過可以使用calc（）做 運算，less,sass是有邏輯的，可以定義函數可以定義變量，但是最終都要被解析為 css. 其實就相當於內部有個執行命令，我可以在里面寫些特殊的語法，然后再 執行特殊語法，生成原生的js）如果選中這個選項的話就會提示你安裝less還是 sass,它有環境依賴的
Linter/Formatter: 格式化，這個會生成一個配置文件，配置文件中是由語法的，統一代碼風格
3) 項目初始化
(https://img2018.cnblogs.com/blog/1572538/201910/1572538-20191011082513549-1661606132.png)
pycharm配置並啟動vue項目
1) 用pycharm打開vue項目
2) 添加配置npm啟動(Add Configuration...然后點擊加號進行添加npm)
ctrl+Alt（代碼格式的整理）
vue項目目錄結構分析
├── v-proj
| ├── node_modules // 當前項目所有依賴，一般不可以移植給其他電腦環境
| ├── public
| | ├── favicon.ico // 標簽圖標
| | └── index.html // 當前項目唯一的頁面
| ├── src
| | ├── assets // 靜態資源img、css、js
| | ├── components // 小組件
| | ├── views // 頁面組件
| | ├── App.vue // 根組件
| | ├── main.js // 全局腳本文件（項目的入口）
| | ├── router.js // 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關系）
| | └── store.js // 倉庫腳本文件（vuex插件的配置文件，數據倉庫）
| ├── README.md
└ └── **配置文件
vue組件(.vue文件)
# 1) template：有且只有一個根標簽
# 2) script：必須將組件對象導出 export default {}
# 3) style: style標簽明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)
# 如果將scoped去掉就變成全局的了，然后全局有有每個子組件的樣式就會加載最后子組件的樣式
<template>
<div class="test">
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>
全局腳本文件main.js（項目入口）
import Vue from 'vue' 導入vue環境，就是在node_modules文件夾中隨便導入文件如 （import 隨便起的名字 from ‘node_modules’中文件）
import App from './App.vue'
import router from './router' （本來是router.js和store.js,這里省略了后綴，所以起名不能起相同的名字）
import store from './store'
Vue.config.productionTip = false //頁面提示
new Vue({
router, //自定成員 （導入的路由作為實例成員）
store, //自定義成員， 都可以通過this.router/this.store拿到（導入的倉庫作為實例成員）
render: h => h(App)// 就是main.js是沒有頁面渲染的，將App根組件渲染
}).$mount('#app') //掛載點
可看改寫易於理解
改寫
import Vue from 'vue' // 加載vue環境
import App from './App.vue' // 加載根組件
import router from './router' // 加載路由環境
import store from './store' // 加載數據倉庫環境
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});
vue項目啟動生命周期（重點）
1) 加載mian.js啟動項目
i) import Vue from 'vue' 為項目加載vue環境
ii) import App from './App.vue' 加載根組件用於渲染替換掛載點
iii) import router from './router' 加載路由腳本文件，進入路由相關配置
2) 加載router.js文件，為項目提供路由服務，並加載已配置的路由(鏈接與頁面組件的映射關系)
注：不管當前渲染的是什么路由，頁面渲染的一定是根組件，鏈接匹配到的頁面組件只是替換根組件中的
<router-view></router-view>
3) 如果請求鏈接改變(路由改變)，就會匹配新鏈接對應的頁面組件，新頁面組件會替換渲染router-view標簽，替換掉之前的頁面標簽(就是完成了頁面跳轉)
參與文件
main.js：該文件內容不變
App.vue
<template>
<div id="app">
<!-- url路徑會加載不同的頁面組件
eg：/red => RegPage | /blue => BluePage
來替換router-view標簽，完成頁面的切換
-->
<router-view></router-view>
</div>
</template>
views/RedPage.vue
<template>
<div class="red-page">
<Nav></Nav>
</div>
</template>
<script>
import Nav from '@/components/Nav'
export default {
name: "RedPage",
components: {
Nav
},
}
</script>
<style scoped>
.red-page {
width: 100vw;
height: 100vh;
background-color: red;
}
</style>
views/BluePage.vue
<template>
<div class="blue-page">
<Nav></Nav>
</div>
</template>
<script>
import Nav from '@/components/Nav'
export default {
name: "BluePage",
components: {
Nav
}
}
</script>
<style scoped>
.blue-page {
width: 100vw;
height: 100vh;
background-color: blue;
}
</style>
router.js文件
import Vue from 'vue' //加載vue環境
import Router from 'vue-router' //router環境作為文件被main.js文件加載導入的，而這里vue-router是node_moudles依賴文件中加載的，
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history', //就是來回轉跳
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
全局樣式文件配置
assets/css/global.css
html, body, h1, h2, ul, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
main.js中新增
// 配置全局樣式
import '@/assets/css/global.css'
封裝小組件 - Nav導航欄組件
components/Nav.vue
<template>
<div class="nav">
<!--采用vue-router完成頁面跳轉，不能采用a標簽（會發生頁面刷新，本質就是重新加載了一次項目界面）-->
<ul>
<li>
<!--<a href="/">主頁</a>-->
<router-link to="/">主頁</router-link>
</li>
<li>
<router-link to="/red">紅頁</router-link>
</li>
<li>
<router-link to="/blue">藍頁</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Nav",
}
</script>
<style scoped>
.nav {
width: 100%;
height: 60px;
background-color: orange;
}
.nav li {
float: left;
font: normal 20px/60px '微軟雅黑';
padding: 0 30px;
}
.nav li:hover {
cursor: pointer;
background-color: aquamarine;
}
.nav li.active {
cursor: pointer;
background-color: aquamarine;
}
</style>
views/HomePage.vue：RedPage.vue與BluePage都是添加下方三個步驟代碼
<template>
<div class="home">
<!-- 3）使用Nav組件 -->
<Nav></Nav>
</div>
</template>
<script>
// 1）導入Nav組件
import Nav from '@/components/Nav'
export default {
// 2）注冊Nav組件
components: {
Nav,
}
}
</script>
新增頁面三步驟
1) 在views文件夾中創建視圖組件
2) 在router.js文件中配置路由
3) 設置路由跳轉，在指定路由下渲染該頁面組件(替換根組件中的router-view標簽)
views/TanPage.vue
<template>
<div class="tan-page">
<Nav></Nav>
</div>
</template>
<script>
import Nav from '@/components/Nav'
export default {
name: "TanPage",
components: {
Nav
}
}
</script>
<style scoped>
.tan-page {
width: 100vw;
height: 100vh;
background-color: tan;
}
</style>
router.js
// ...
import TanPage from "./views/TanPage";
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// ...
{
path: '/tan',
name: 'tan',
component: TanPage
}
]
})
components/Nav.vue
...
<li>
<router-link to="/tan">土頁</router-link>
</li>
...
組件生命周期鈎子
# 1）一個組件從創建到銷毀的整個過程，就稱之為組件的生命周期
# 2）在組件創建到銷毀的過程中，會出現眾多關鍵的時間節點，如 組件要創建了、組件創建完畢了、組件數據渲染完畢了、組件要被銷毀了、組件銷毀完畢了 等等時間節點，每一個時間節點，vue都為其提供了一個回調函數(在該組件到達該時間節點時，就會觸發對應的回調函數，在函數中就可以完成該節點需要完成的業務邏輯)
# 3）生命周期鈎子函數就是 vue實例 成員
任何一個組件：在vue組件的script的export default導出字典中直接寫鈎子函數
export default {
// ...
beforeCreate() {
console.log('組件創建了，但數據和方法還未提供');
// console.log(this.$data);
// console.log(this.$options.methods);
console.log(this.title);
console.log(this.alterTitle);
},
// 該鈎子需要掌握，一般該組件請求后台的數據，都是在該鈎子中完成
// 1）請求來的數據可以給頁面變量進行賦值
// 2）該節點還只停留在虛擬DOM范疇，如果數據還需要做二次修改再渲染到頁面，
// 可以在beforeMount、mounted鈎子中添加邏輯處理
created() {
console.log('組件創建了，數據和方法已提供');
// console.log(this.$data);
// console.log(this.$options.methods);
console.log(this.title);
console.log(this.alterTitle);
console.log(this.$options.name);
},
destroyed() {
console.log('組件銷毀完畢')
}
}
根據請求路徑高亮路由標簽案例
"""
1) router-link會被解析為a標簽，用to完成指定路徑跳轉，但是不能添加系統事件(因為是組件標簽)
2) 在js方法中可以用 this.$router.push('路徑') 完成邏輯跳轉
3) 在js方法中可以用 this.$route.path 拿到當前請求的頁面路由
"""
components/Nav.vue
<template>
<div class="nav">
<!--采用vue-router完成頁面跳轉，不能采用a標簽（會發生頁面刷新，本質就是重新加載了一次項目界面）-->
<ul>
<li @click="changePage('/')" :class="{active: currentPage === '/'}">
<!--<a href="/">主頁</a>-->
<!--<router-link to="/">主頁</router-link>-->
主頁
</li>
<li @click="changePage('/red')" :class="{active: currentPage === '/red'}">
<!--<router-link to="/red">紅頁</router-link>-->
紅頁
</li>
<li @click="changePage('/blue')" :class="{active: currentPage === '/blue'}">
<!--<router-link to="/blue">藍頁</router-link>-->
藍頁
</li>
<li @click="changePage('/tan')" :class="{active: currentPage === '/tan'}">
<!--<router-link to="/tan">土頁</router-link>-->
土頁
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Nav",
data() {
return {
// 沒渲染一個頁面，都會出現加載Nav組件，currentPage就會被重置，
// 1）在點擊跳轉事件中，將跳轉的頁面用 數據庫 保存，在鈎子函數中對currentPage進行數據更新
// currentPage: localStorage.currentPage ? localStorage.currentPage: ''
// 2）直接在created鈎子函數中，獲取當前的url路徑，根據路徑更新currentPage
currentPage: ''
}
},
methods: {
changePage(page) {
// console.log(page);
// 當Nav出現渲染，該語句就無意義，因為在data中將currentPage重置為空
// this.currentPage = page;
// 有bug，用戶不通過點擊，直接修改請求路徑完成頁面跳轉，數據庫就不會更新數據
// localStorage.currentPage = page;
// 任何一個標簽的事件中，都可以通過router完成邏輯條件
// console.log(this.$route); // 管理路由數據
// console.log(this.$router); // 管理路由跳轉
this.$router.push(page); // 路由的邏輯跳轉
}
},
// 當前組件加載成功，要根據當前實際所在的路徑，判斷單選激活標簽
created() {
// console.log(this.$route.path);
this.currentPage = this.$route.path;
}
}
</script>
<style scoped>
.nav {
width: 100%;
height: 60px;
background-color: orange;
}
.nav li {
float: left;
font: normal 20px/60px '微軟雅黑';
padding: 0 30px;
}
.nav li:hover {
cursor: pointer;
background-color: aquamarine;
}
.nav li.active {
cursor: pointer;
background-color: aquamarine;
}
</style>