vue項目建立與使用
目錄css
複習
"""
一、指令：
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"
二、實例成員：
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：爲組件自定義事件發送數據
三、組件
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)html
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中新增vue
// 配置全局樣式 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>
相關文章
- 1. Vue 使用Vue-CLI4 建立Vue項目
- 2. 使用vue-cli4建立vue項目
- 3. 使用Vue-CLI建立Vue項目
- 4. 使用vue-cli建立Vue項目
- 5. 前端vue:使用vue-cli3建立項目Vue+TypeScript 項目
- 6. 用vue ui 建立項目
- 7. mac下使用IDEA建立VUE項目
- 8. 使用vue ui建立項目報錯
- 9. windows下使用IDEA建立VUE項目
- 10. 使用idea建立VUE項目
- 更多相關文章...
- • Maven 構建 Java 項目 - Maven教程
- • Maven 構建 & 項目測試 - Maven教程
- • Composer 安裝與使用
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
