復習
"""
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{} }；在哪個組件模板（template）中出現的變量，就由當前組件提供變量對應的值
全局組件：
Vue.component("組件名", {實例成員們})
局部組件：必須在使用該組件的父組件中注冊
let 組件名 = {實例成員們}
new Vue({
el: "#app",
components: {
組件標簽名: 組件名
}
})
組件信息交互
父傳子：提供綁定自定義屬性
子傳父：提供自定義事件攜帶
"""
Vue項目環境搭建
"""
node ~~ python：node是用c++編寫用來運行js代碼的
npm(cnpm) ~~ pip：npm是一個終端應用商城，可以換國內源cnpm
vue ~~ django：vue是用來搭建vue前端項目的
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
注：2或3終端安裝失敗時，可以清空 npm緩存 再重復執行失敗的步驟
npm cache clean --force
"""
Vue項目創建
1) 進入存放項目的目錄
>: cd ***
2) 創建項目
>: vue create 項目名
3) 項目初始化
1.
3.
4.
5，6.都選第一個
最后一個選n
pycharm配置並啟動vue項目
1) 用pycharm打開vue項目
2) 添加配置npm啟動
app.vue跟組件缺少插件不正常顯示
終端啟動：
vue項目目錄結構分析
頁面組件是由小組件組成的
router：配置路由 url鏈接 與 頁面組件的映射關系
vue組件分析(.vue文件)
# 1) template：中有且只有一個根標簽
# 2) export：必須將組件對象導出，在頁面組件views中導入！ export default {}
# 3) scoped: style標簽明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)
<template>
<div class="test">
</div>
</template>
<script>//#必須將組件對象導出，在頁面組件views中導入！
export default {
name: "Test"
}
</script>
<style scoped> // #style標簽明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)
</style>
小組件components想在頁面組件views中使用，必須在頁面組件導入（import），
# 注意點：import HelloWorld from "../components/HelloWorld"，import后面的名字可以隨便起，因為導入的是小組件中到處的東西！
# 關於export導出,在about中也導入helloword試試看
# vue中導入可以不寫后綴，全局不區分大小寫
<template>
<div class="about">
<h1>This is an about page</h1>
<HelloWorld></HelloWorld>
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld";# 在這里導入的
export default {
components:{
HelloWorld
}
}
</script>
導入的邏輯寫在script里面
全局腳本文件main.js（項目入口）
如果要導入bootscript等都是在這里配置！
app.vue是跟組件，無論如何都會被渲染
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(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：根組件
所有大型項目中，app根組件就寫這五句話！！！！
// 所有大型項目中，app根組件就寫這五句話！！！！
<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
組件要過來：compenent，首先要導入import，
形成頁面跳轉，要在根組件中將內容替換為
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import RedPage from "./views/RedPage";
import BluePage from "./views/BluePage";
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/red',
name: 'red',
component: RedPage
},
{
path: '/blue',
name: 'blue',
component: BluePage
}
]
})
全局樣式文件配置:將全局比如外邊距、列表樣式取消
文件位置：/src/assets/css/global.css，
注意：所有的環境都在main加！！
html, body, h1, h2, ul, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
main.js中新增
所有的環境都在main加！！
// 配置全局樣式
import '@/assets/css/global.css'。注意，不能省略后綴
封裝小組件 - Nav導航欄組件
導入三部曲
位置：components/Nav.vue
頁面跳轉：router-link標簽
<template>
<div class="nav">
<!--采用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文件夾中創建視圖組件。視圖組件也有可能導入小組件components
2) 在router.js文件中配置路由。
3) 設置路由跳轉，在指定路由下渲染該頁面組件(替換根組件（app.vue）中的router-view標簽).
1.views/TanPage.vue（Tan為新增的頁面）
<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>
2.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
}
]
})
3.components/Nav.vue。設置跳轉
...
<li>
<router-link to="/tan">土頁</router-link>
</li>
...
組件生命周期鈎子(官網API)
# 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);title為數據屬性
console.log(this.alterTitle);alterTitle為方法屬性
console.log(this.$options.name);option包含所有成員
},
destroyed() {
console.log('組件銷毀完畢')
}
}
根據請求路徑高亮路由標簽案例
"""
1) router-link會被解析為a標簽，用to完成指定路徑跳轉，但是不能添加系統事件(因為是組件標簽)
<router-link to="/red">紅頁</router-link>
2) 在js方法中可以用 this.$router.push('路徑') 完成邏輯跳轉
3) 在js方法中可以用 this.$route.path 拿到當前請求的頁面路由
"""
邏輯跳轉
用途：通過@cilck=“changePage（‘/blue’）”事件進行跳轉，不通過a鏈接或router-link標簽
methods: {
changePage(page) {
this.$router.push(page);
}
}
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>