Vue 元件元件巢狀動態元件快取元件 vue-cli腳手架

阿新 • • 發佈：2020-11-20

vue-day04

1-元件

1.1-什麼是元件

元件就是組成頁面的常用功能模組的封裝(元件就是組成完整頁面的零部件)

1.1.1-元件的組成部分

檢視(html)
樣式(css)
邏輯(js)

1.1.2-使用元件的好處

提高開發效率(提高程式碼的複用率)
提高程式碼的可維護性

1.2-全域性元件

可以在全域性範圍內(所有的vue例項)使用

1.2.2-定義

Vue.component('myheader',{
    template:`<div>全域性元件</div>`
});

1.2.3-呼叫

當做自定義標籤去呼叫即可(雙標籤)
```
<myheader></myheader>
 
```

1.2.4-元件命名規範

1-全部小寫: 定義的地方和呼叫的地方保持一致即可
```
Vue.component('myheader', myHeader);
```
```
<myheader></myheader>
```
2-小駝峰: 呼叫的地方需要將小駝峰改寫成-連結的方式
```
Vue.component('myHeader', myHeader);
```
```
<my-header></my-header>
```
3-大駝峰: 呼叫的地方需要將大駝峰改寫成-連結的方式(第一個單詞首字母可改可不改)
```
Vue.component('MyHeader', myHeader);
 
```
```
<my-header></my-header>
<My-header></My-header>
```

  

### 1.3-私有元件

- 私有隻能在當前`vue`例項或元件中使用

#### 1.3.1-定義

```js
new Vue({
    el:'#app',
    // 私有元件(區域性元件)
    components:{
        myFooter:{
            template:'<h1>頁面底部</h1>',
            data(){
                return {}
            },
            methods:{
                
            }
        }
    }
});

1.3.2-呼叫

<my-footer></my-footer>

2-元件巢狀

 // 首頁
    const Home={
        template:`
        <div>
            <h1>{{title}}</h1>
            <hr>
            <navbar></navbar>
        </div>
        `,
        data(){
            return {
                title:'網站首頁'
            }
        }
    }
    // 導航條
    const navbar={
        template:`
        <div>
            <h1>{{title}}</h1>
        </div>
        `,
        data(){
            return {
                title:'導航條'
            }
        }
    }
    // 註冊元件
    Vue.component('Home',Home);
    Vue.component('navbar',navbar);

    new  Vue({
        el:'#app'
    });

3-動態元件component

component: 系統內建的元件
作用: 可以快速實現切換元件的功能
is屬性: 接收需要展示的元件名稱, 一般需要動態設定(v-bind)

用法

<!-- is:接收需要展示的元件名稱 -->
<component v-bind:is="page"></component>

4-快取元件keep-alive

keep-alive: 系統內建元件
作用: 實現元件快取(避免重複建立和銷燬元件), 從而提升頁面效能

用法: 將需要快取的元件進行包裹

<keep-alive>
    <home></home>
</keep-alive>

4.1-特殊的生命週期鉤子函式

activated,deactivated只在keep-alive包裹的元件中生效, 普通元件中沒有這兩個生命週期鉤子函式
activated: 在啟用元件中觸發
deactivated: 在失活元件中觸發

5-vue-cli腳手架

cli: command line interface(命令列介面)
基於node平臺的

5.1-安裝

npm install vue-cli -g
// 或者
// 安裝cnpm
npm install cnpm -g
// 使用cnpm安裝vue-cli腳手架
cnpm install vue-cli -g

5.2-檢查是否安裝成功

在命令列下執行如下命令, 如果能夠看到一個版本號, 說明安裝成功

// 2.9.6
vue -V

5.3-初始化專案

vue init webpack 專案名稱

5.5-啟動開發伺服器

開發伺服器預設監聽埠: 8080
開發伺服器訪問地址: http://localhost:8080

npm run dev
// 或者
npm run start
npm start

5.6-專案目錄結構介紹

5.7-vscode輔助插值

Vetur:
- 高亮顯示.vue檔案的程式碼
- 並且會提供語法輔助功能

5.8-禁用eslint語法校驗功能

開啟配置檔案build/webpack.base.conf.js, 注入如下配置節點

  module: {
    rules: [
      // 禁用eslint語法校驗功能; 大概在43行左右
      // ...(config.dev.useEslint ? [createLintingRule()] : []),

重啟開發伺服器
```
npm run dev
```

6-後臺管理系統頁面結構搭建

佈局元件核心程式碼

/pages/Layout.vue

<template>
  <div class="container">
    <div class="left">
      <ul class="navbar">
        <li :class="page==='Main'?'active':''" @click="changePage('Main')">管理中心</li>
        <li :class="page==='Goods'?'active':''" @click="changePage('Goods')">商品管理</li>
        <li :class="page==='User'?'active':''" @click="changePage('User')">會員管理</li>
        <li :class="page==='Order'?'active':''" @click="changePage('Order')">訂單管理</li>
      </ul>
    </div>
    <div class="right">
      <!-- 頭部 -->
      <Header></Header>
      <div class="content">
        <component :is="page"></component>
      </div>
      <!-- 底部 -->
      <Footer />
    </div>
  </div>
</template>

<script>
// 1-匯入頁元件
import Main from "./Main";
import Goods from "./Goods";
import Order from "./Order";
import User from "./User";
// 匯入功能元件
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  // 2-註冊元件
  components: {
    Main,
    Goods,
    Order,
    User,
    Header,
    Footer
  },
  data() {
    return {
      // 頁面元件名稱
      page: "Order"
    };
  },
  methods: {
    // 切換頁面
    changePage(page) {
      this.page = page;
    }
  }
};
</script>

<style>
.container {
  background-color: #ddd;
  /* vh:相對單位; 100vh=螢幕的高度  1vh==1/100螢幕高度; viewport height */
  height: 100vh;
  display: flex;
}
/* 左側導航欄 */
.container .left {
  width: 226px;
  background: #00152a;
}
.left .navbar li {
  list-style: none;
  line-height: 50px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.left .navbar li:hover {
  background: #0077b8;
}
.left .navbar li.active {
  background: #0077b8;
}
/* 右側主體區域 */ 
.container .right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.right .header {
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #fff;
}
.right .content {
  margin: 10px;
  background: #fff;
  height: 300px;
  text-align: center;
  flex: 1;
}
.right .footer {
  line-height: 60px;
  text-align: center;
  background: #fff;
}
</style>