目錄
項目的過程
- vue項目的請求生命周期：main.js完成環境的加載與根組件的渲染；router的index.js完成路由映射
- 項目啟動：加載main.js：index.html、new Vue()、Vue、router、store、完成App.vue的掛載
- 請求：請求路徑 => router路由 => 頁面組件(小組件) => 替換
<router-view />完成頁面渲染 => <router-link>（this.$router.push()）完成請求路徑的切換
vue內的文件
public下面的index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 適配移動端 疏放程度是1倍-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 圖標-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 標題，這個可以自己進行修改-->
<!-- <title>b-proj</title>-->
<title>vue項目</title>
</head>
<body>
<!--當瀏覽器不支持js 的時候，會打印下面的這段話-->
<!--現在都支持,所以可以不需要-->
<noscript>
<strong>We're sorry but b-proj doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<!--下面的掛采點-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
修改后
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue項目</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.vue
style中寫入的全局配置，這個可以進行刪除
<style>
/*全局配置*/
#app {
/*瀏覽器配置*/
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
app.vue修改后保留
<script src="main.js"></script>
<template>
<div id="app">
<!--提供一個視圖組件占位符，占位符被哪個views下的視圖組件替換，瀏覽器就顯示哪個頁面組件-->
<router-view/>
</div>
</template>
main.js
1.入口文件：加載vue、router、store等配置 以及 加載自定義配置(自己的js、css，第三方的js、css)
2.創建項目唯一根組件，渲染App.vue，掛載到index.html中的掛載點 => 項目頁面顯示的就是 App.vue 組件
3.在App.vue中設置頁面組件占位符
4.瀏覽器帶着指定 url鏈接 訪問vue項目服務器，router組件就會根據 請求路徑 匹配 映射組件，去替換App.vue中設置頁面組件占位符
eg: 請求路徑 /user => 要渲染的組件 User.vue => 替換App.vue中的 <router-view/>
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' // 加載路由環境 vue-router
import store from './store' // 加載倉庫環境 vuex
Vue.config.productionTip = false; // Tip提示
new Vue({
el: '#app',//掛載點
router: router,//路由
store,
render: function (read_root_vue) {//read_root_vue任意的一個函數,和h相同
return read_root_vue(App)
}
});
store下的index.js
前端的瀏覽器存儲
- cookie:可以設置過期時間
- sessionStore:關閉瀏覽器消失
- localStore:永久存儲
- store創庫：刷新消失
store
store是全局的單列
- 在任何一個組件邏輯中：this.$store.state.car 訪問或是修改
- 在任何一個組件模板中：$store.state.car 訪問或是修改
- 頁面重新加載，數據就重置（面向移動端開發）
存儲
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
//在store廠庫的內部，一般在state內寫要存入的數據
state: {
//car: {
//name: '默認',
//price: 0
//}
},
mutations: {},
actions: {},
modules: {}
})
存儲
//this代表的是vue對象
//this.$store.state.car = car;
export default {
name: "Car",
props: ['car'],
methods: {
goDetail(car) {
// 先將要顯示的汽車對象存儲到倉庫，詳情頁加載后，自己去倉庫中獲取
// console.log(this.$store.state);
this.$store.state.car = car;
this.$router.push('/car/detail')
}
}
}
取出,一般使用，創建的時候create
//this.car = this.$store.state.car;
export default {
name: "CarDetail",
data() {
return {
car: {}
}
},
created() {
// console.log(this.$store.state.car);
// this.car = {name: '五菱宏光', price: 120}
this.car = this.$store.state.car;
}
}
組件的使用規則
- .vue文件就是一個組件：html、css、js
- html由template標簽提供：有且只有一個根標簽
- css由style標簽管理：style標簽添加scope屬性，保證樣式只在該組件內部起作用(樣式組件化)
- js由script標簽管理：內部書寫的就是組件{}語法，但是一定要導出 export default
導出：
export default {
name: 'home',
components: {
},
data() {
return {
}
}
}
導入：
import Home from '../views/Home.vue
注冊
export default {
name: 'home',
// 2、注冊要使用的小組件
components: {
Nav,
Footer,
Book,
},
data() {
return {
books
}
}
}
使用
在<template></template>內部使用
<template>
<div class="home">
<!--vue項目環境下，模板也受vue環境控制，使用標簽支持大小寫-->
<!--3、使用導入的小組件-->
<Nav></Nav>
<div class="main">
<!-- key屬性是為標簽建立緩存的標識，不能重復，且在循環組件下，必須設置 -->
<Book v-for="book in books" :book="book" :key="book.title" />
</div>
<Footer></Footer>
</div>
</template>
在components文件夾下的組件路由跳轉的方式
- router-link會別解析為a標簽，但是不能直接寫a，因為a跳轉回刷新頁面
方式1
<router-link :to="'/book/detail/' + book.id">{{ book.title }}</router-link>
方式2
<router-link :to="{name: 'book-detail', params: {pk: book.id}}">{{ book.title }}</router-link>
方式3
this.$router.push(`/book/detail/${id}`);
方式4
this.$router.push({
name: 'book-detail',
params: {pk: id},
});
方式5
this.$router.go(-1)//向后跳轉1頁
this.$router.go(-2)//向后跳轉2頁
this.$router.go(1)//向前跳轉1頁
this.$router.go(2)//向前跳轉2頁
在roter下的index.js路由配置的方式
- 路由規則表：注冊頁面組件，與url路徑形成映射關系
- 首先都需要將所需要的組件導入到本文件夾下，如：
import Home from '../views/Home.vue'
方式1：默認鏈接
{
path: '/',
name: 'home',
component: Home
},
方式2：重定向
{
path: '/index',
redirect: '/'
},
方式3：新鏈接
{
path: '/user',
name: 'user',
component: User
},
方式4：有名分組
{
path: '/book/detail/:pk',
name: 'book-detail',
component: BookDetail
},
方式5：另外一種鏈接
另外一種導入方式
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')等同於component: () => import( '../views/About.vue')等同於import About from '../views/About.vue
{
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')
}
src文件下靜態資源如何加載
- 當組件自己使用的時候，靜態資源的加載可以使用相對路徑
'../assets/img/西游記.jpg' - 前台自己提供的靜態資源，在傳輸后再使用(組件間交互)，要才有require函數來加載資源
let img1 = require('../assets/img/西游記.jpg');就是require(資源的相對路徑)
vue的配置問題
配置全局css樣式
//import '@/assets/css/global.css' 方法1
require('@/assets/css/global.css');
配置全局settings.js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;//原生的配置，在調用的時候可以方便使用
//settings.js
//導出
export default {
base_url: 'http://localhost:8000',
}
使用
this.$settings.base_url
Vue之v-for循環中key屬性注意事項
當Vue用 v-for 正在更新已渲染過的元素列表是，它默認用“就地復用”策略。如果數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的改變，而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。
為了給Vue一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。key屬性的類型只能為 string或者number類型。