目錄
Vue組件文件微微細剖
組件在view
文件中創建 如果需要用到其他小組件可以 在 component文件中創建並導入
view文件下:
<template>
<div class="home">
<Nav /> <!--從component中導入的小組件-->
<h1>主頁</h1>
</div>
</template>
<!--template標簽負責組件的html結構：有且只有一個根標簽-->
export default
// script標簽負責組件的js邏輯：邏輯固定導出 export default {組件內容}（外界才可以導入）
import Nav from '../components/Nav' // 導入 組件 並且注冊
export default {
data(){ // 組件化
return {
back_data: ''
}
},
methods: {},
components: {
Nav, // 注冊
},}
scoped
<!--style標簽負責組件的css樣式：scoped保證樣式的組件化 - 樣式只在該組件內部起作用-->
<style scoped>
pass
</style>
Vue組件生命周期鈎子
* 1）一個組件從創建到銷毀的眾多時間節點回調的方法
* 2）這些方法都是vue組件實例的成員
* 3）生命周期鈎子的作用就是滿足在不同時間節點需要完成的事
例子:
// 直接寫在export default 里面
beforeCreate() {
console.log('Home組件要創建了');
console.log(this.back_data);
},
created() { // 重要方法：在該鈎子中完成后台數據的請求 *****
console.log('Home組件創建成功了');
// 前后台開發時，是從后台請求數據
console.log(this.back_data);
},
beforeMount() {
console.log('Home組件准備加載')
},
mounted() { // 特別耗時的數據請求，可以延后到組件初步加載成功后，再慢慢請求
console.log('Home組件加載完成')
},
destroyed() {
console.log('Home組件銷毀成功了')
}
Vue路由
1.touter下的index.js
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
例如我們想要添加一條路由指向一個子組件 那么我們就可以 1.導入 2.寫入 案例:
import Course from '../views/Course' // 導入組件
const routes = [
path:'/course',
name:'course',
component:Course // 路由/course指向Course
]
2.路由重定向
{
path: '/home',
redirect: '/', // 路由的重定向
},
3.路由傳參數
{
// 第一種路由傳參
path: '/course/:pk/detail',
name: 'course-detail',
component: CourseDetail
}
// 第二種路由傳參 拼接參數
<router-link :to="`/course/detail?pk=${course.id}`"> </router-link>
補充:全局樣式導入
require
// 前台邏輯中加載靜態資源采用require!!!!!!!!!!
// 補充:導入的注意事項
// 配置全局樣式：@就代表src文件夾的絕對路徑，官方提倡require加載靜態文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css');
img: require('@/assets/img/002.jpg'),
// 同時 只要是導入都適用@為絕對路徑
路由跳轉
1. router-view標簽
<!--App.vue中 適用router-view實現了不同頁面的渲染跳轉-->
<template>
<div id="app">
<!--頁面組件占位符-->
<router-view></router-view>
</div>
</template>
2. router-link標簽
<!--可以用 <router-link to="/user">用戶頁</router-link>完成標簽跳轉-->
<router-link to="/">主頁</router-link>
<!--或者使用name來指定 router中寫的name-->
<router-link :to="{name: 'course'}">課程頁</router-link>
3.邏輯跳轉
this.$router 控制路由跳轉
this.$router.push('/'); // 往下再跳轉一頁
this.$router.push({name:"router中起的name"}); // 解析router中的name並跳轉
攜帶參數:
this.$router.push({name: '路由名', query: {xxx:'xxx'}}); // 添加 ?xxx=xxx參數
this.$router.push({name: '路由名', params: {xxx:'xxx'}}); // 添加 分組傳參
this.$router.go(2); // go是歷史記錄前進后退，正為前進，負為后退，數字為步數
this.$route 控制路由數據
this.$route.path; // 獲取當前路徑
this.$route.query; // 獲取?xxx=xxx后攜帶的參數
/course/detail?pk=2
this.$route.params; // 獲取分組后的參數
/course/:pk/detail