不一樣的vue實戰(3): 佈局與元件

首先

• 首發部落格: 我的部落格
• 專案原始碼: 原始碼(喜歡請star)
• 專案預覽: 預覽
• 上一章: 《學習不一樣的vue(2)實戰:專案分析》
• 我的Q群: meteor高手群 vue學習交流群

首先：講一句抱歉,週末俗事纏身,無力更博，只有今日發了。而且寫博挺消耗精力的，你別看短短了幾千字，需要反覆的斟酌，反覆的修改，如果有錯誤與不足的地方，請評論指正，謝謝！

前言

本文是結合官方的 api文件,進行漸進式學習,在實戰中熟悉文件,在文件中理解實戰。下面的程式碼中有詳細的程式碼註釋，和邏輯講解,請仔細閱讀。

3.1.1 什麼是vue?

如果你還不知道什麼Vue是幹什麼的，請參見什麼是vue。

3.1.2 專案結構

參考以下的目錄結構，新建資料夾，下面打‘ * ’的為新建資料夾

├── build              // 構建服務和webpack配置
├── config             // 專案不同環境的配置
├── dist               // 專案build目錄
├── index.html         // 專案入口檔案
├── package.json       // 專案配置檔案
├── src                // 生產目錄
│   ├── assets         // 圖片資源
│   ├── common *          // 公共的css js 資源
│   ├── components     // 各種元件 
│   ├── moke *           // 本地靜態資料管理檔案
│   ├── App.vue         // 主頁面
│   ├── vuex *           // vuex狀態管理器
│   ├── router    // 路由配置器
│   └── main.js        // Webpack 預編譯入口

3.1.3 Vue 例項

新增知識點

• Vue例項

步驟

開啟 /src/main.js 你會看到

import Vue from 'vue'   //引入vue模組
import App from './App'  //引入vue元件
import router from './router' // 引入路由配置檔案

Vue.config.productionTip = false // 關閉生產模式下給出的提示

new Vue({  // 建立一個 Vue 的根例項
  el: '#app', //掛載id,這個例項下所有的內容都會在index.html 一個id為app的div下顯示
  router, // 注入路由配置。
  template: '<App/>', //配置根模板 即開啟頁面顯示那個元件
  components: { App } // 注入元件
})複製程式碼

3.1.4 Style

第一步 安裝less

在終端上輸入

npm install --save-dev less-loader style-loader less複製程式碼

第二步 配置less

在 /build/webpack.base.conf.js 加上

module.exports = {
  module: {
    rules: [
      {   //把這個物件新增在裡面
        test: /\.less$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      }
    ]
  }
}複製程式碼

第三步 下載style檔案

因為本課程主要是針對Vue的實戰，所以在這裡不去講解less的用法，如果感興趣可以去less教程學習，也不會講每個樣式怎麼寫,請下載Style檔案,到 src/common/下。

3.1.5 ‘.vue’檔案

• Vue自定義了一種字尾名名字為.vue檔案,它將html, js, css 整合成一個檔案,和裡面 template script style三個區別分別依次對應。

  <template>
  <!--這裡寫 html -->
  <template/>
  <script>
  export default {};
  // 這裡寫js
  </script>
  <style lang = "less" scoped>
  <!--這裡寫css-->
  </style>複製程式碼

• 一個.vue 檔案就等於單獨元件。因為.vue檔案是自定義的，瀏覽器不識別，所以要對該檔案進行解析,在webpack構建中，需要安裝vue-loader 對.vue檔案進行解析。
• template裡面最外層必須是隻有一個容器
• script 中的 export default {} 即匯出這個元件，外部可以引用。
• style 中的 lang 指額外表示支援的語言可以讓編輯器識別,scoped 指這裡寫的css只適用於該元件。

3.1.6 新增layouts.vue(佈局元件)

在學習了上一小節,我們知道了 .vue檔案是做什麼用，下面我們就嘗試一下。

在 src/components/目錄下新建一個檔案 layouts.vue,並且複製以下程式碼。

<template>
  <section class="container" > <!--最外層容器-->
    <section class="menu"> <!--左邊的容器-->
    </section>
    <section class="content-container"><!--右邊的容器-->
    </section>
  </section>
</template>
<script>
  export  default {};
</script>

<style lang="less">
@import '../common/style/layouts.less';
</style>複製程式碼

3.1.7 修改router(路由)

vue-router有什麼用?

它的作用在於路由設定，用於設定頁面跳轉時的路徑設定,它的工作原理也很簡,將元件(components)對映到路由(routes)，然後告訴 vue-router 在哪裡渲染它們。

新增知識點(必看):

• vue-router簡單例子
• 命名路由

第一步:

開啟 src/router/index.js 檔案
複製以下程式碼,替換老的程式碼。

import Vue from 'vue' // 匯入Vue
import Router from 'vue-router' // 匯入vue-router 庫
import Layouts from '@/components/layouts' // 匯入layouts.vue 元件

Vue.use(Router) //全域性註冊Router元件，它會繫結到Vue例項裡面。

export default new Router({ // 建立 router 例項，然後傳 `routes` 配置
  routes: [
    {
      path: '/',  //訪問路徑
      name: 'Layouts', // 路徑名
      component: Layouts //訪問的元件,即訪問‘/’,它會載入 Layouts 元件所有的內容。
    }
  ]
})複製程式碼

第二步:

瀏覽器開啟 http://localhost:8080/ 你將看到如下的顯示，那麼這一步你就完成了。

3.1.8 menus.vue(選單元件)

新增知識點(必讀)

• 使用元件
• 區域性註冊元件

第一步:

在 src/components/目錄下新建一個檔案 menus.vue,並且複製以下程式碼

<template>
  <div class="list-todos">  <!--選單容器-->
      <a class="list-todo activeListClass list" > <!--單個選單容器-->
        <span class="icon-lock" ></span>  <!--鎖的圖示-->
        <span class="count-list">1</span><!--數字-->
        星期一 <!--選單內容-->
      </a>
    <a class=" link-list-new" > <!--新增選單-->
      <span class="icon-plus">
      </span>
      新增
    </a>
  </div>
</template>
<script>
  export default {};
</script>

<style lang="less">
@import '../common/style/menu.less';
</style>複製程式碼

第二步:

我們在回到 Layouts.vue,並且新增以下打*程式碼。

<template>
    <section class="menu"> <!--左邊的容器 裡面加上元件 menus-->
     <menus></menus> <!-- * -->
    </section>
</template>

<script>
  import menus from './menus'; // * 匯入剛才我們建立的 menus元件
  export  default {
    components: { // * 註冊menus元件，讓其可以在template呼叫
      menus
    }
  };
</script>複製程式碼

最後我們的 menu元件就註冊成功啦，並且引用了它，你做的怎麼樣了呢？

3.1.9列表渲染

新增知識點(必讀)

• 模板語法
• 列表渲染
• 條件渲染
• data函式

第一步:

回到 src/components/menus.vue，新增以下程式碼。

 <template>
    <a class="list-todo list activeListClass" v-for="item in items"> <!-- v-for 列表渲染-->
      <span class="icon-lock" v-if="item.locked"></span> <!-- v-if 條件渲染-->
      <span class="count-list" v-if="item.count > 
      0">{{item.count}}</span>
      {{item.title}}   <!-- 資料繫結，看模板語法-->
    </a>
</template>
<script>
export default {
  data() { //data函式
    return {
      items: [{ title: '星期一', count: 1, locked: true }, //選單的模擬資料
        { title: '星期二', count: 2, locked: true }, {
        title: '星期三', count: 3, locked: false
      }]
    };
  }
};
</script>複製程式碼

完成後你將會看到以下內容。

現在整個頁面我們已經左邊的選單部分，下面就是完成右邊的詳情部分。

3.1.10 todo.vue （待辦事項詳情元件）

新增知識點(必讀)

• 表單控制元件繫結
• 自定義事件
• 事件處理器

第一步:

在 src/components/ 目錄下新建一個檔案 todo.vue,複製以下程式碼。

 <template>
  <div class="page lists-show"><!--最外層容器-->
    <nav><!--容器上半部分-->
      <div class="nav-group"> <!--移動端的選單圖示-->
        <a class="nav-item">
          <span class="icon-list-unordered">
          </span>
        </a>
      </div>
      <h1 class="title-page">
        <span class="title-wrapper">{{todo.title}}</span> <!-- 標題-->
        <span class="count-list">{{todo.count}}</span><!-- 數目-->
      </h1>
      <div class="nav-group right"><!-- 右邊的刪除，鎖定圖示容器-->
        <div class="options-web"> 
          <a class=" nav-item"> <!-- 鎖定圖示-->
            <span class="icon-lock" v-if="todo.locked"></span>
            <span class="icon-unlock" v-else>
            </span>
          </a>
          <a class=" nav-item"><!-- 刪除圖示-->
            <span class="icon-trash">
            </span>
          </a>
        </div>
      </div>

      <div class=" form todo-new input-symbol"> <!-- 新增單個代辦單項輸入框,監聽了回車事件，雙向繫結text值,監聽了disabled屬性，在todo.locked為true的情況下無法編輯-->
         <input type="text" v-model="text" placeholder='請輸入'@keyup.enter="onAdd" :disabled="todo.locked" />
        <span class="icon-add"></span>
      </div>
    </nav>
    <div class="content-scrollable list-items">
      <!--容器下半部分-->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      todo: { //詳情內容
        title: '星期一',
        count: 12,
        locked: false
      },
      items: [ //代辦單項列表
        { checked: false, text: '新的一天', isDelete: false },
        { checked: false, text: '新的一天', isDelete: false },
        { checked: false, text: '新的一天', isDelete: false }
      ],
      text: '' //新增代辦單項繫結的值
    }
  },
  methods: {
    onAdd() {
      this.items.push({
        checked: false, text: this.text, isDelete: false
      }); // 當使用者點選回車時候 ，給items的值新增一個物件，this.text 即輸入框繫結的值
      this.text = ''; //初始化輸入框的值。
    }
  }
}
</script>
<style lang = "less">
@import '../common/style/nav.less';
@import '../common/style/form.less';
@import '../common/style/todo.less';
</style>複製程式碼

第二步

開啟 src/components/layouts.vue檔案
新加入以下程式碼。

 <template>
    <section class="content-container"><!--右邊的容器-->
    <todo></todo>
    </section>
 </template>
  <script>
   import todo from './todo';
  export  default {
    components: {
      todo  //新加的
    }
  };
</script>複製程式碼

最後:

3.1.11 item.vue（代辦單項元件）

新增知識點

• 父子元件通訊之Prop

  第一步:

  在 src/components/ 目錄下新建一個檔案 item.vue,複製以下程式碼。

  <template>
  <div class="list-item editingClass editing"> <!-- 最外層容器-->
   <label class="checkbox"> <!--自定義的多選框-->
     <input type="checkbox" v-model="item.checked"> <!--item.checked-->
     <span class="checkbox-custom"></span>
   </label>
   <input type="text" v-model="item.text" placeholder='寫點什麼。。。'>  <!--繫結item.text-->
   <a class="delete-item"> <!--刪除圖示-->
     <span class="icon-trash"></span>
   </a>
  </div>
  </template>
  <script>
  export default {
  props: ['item']  //子元件顯式的用 props 選項宣告它期待獲得的資料，
  這裡申明 它想要一個叫做 ’item‘的資料。
  };
  </script>
  <style lang="less">
  @import '../common/style/list-items.less';
  </style>複製程式碼

  第二步:

  開啟 src/components/todo.vue檔案
  新加入以下程式碼

  <template>
   <div class="content-scrollable list-items">
      <div v-for="item in items"> <!-- 這裡`v-for`會迴圈我們在 `data`函式 事先定義好的 ’items‘模擬資料，迴圈後拿到單個物件，在通過prop把資料傳輸給子元件 item -->
       <item :item="item"></item>
     </div>
   </div>
  </template>
  <script>
  import item from './item';
  export  default {
   components: {  //新加components物件
     item  //新加的
   }
  };
  </script>複製程式碼

最後

在新增的輸入框裡面，輸入點東西，並且回車，看看有沒有達到效果。

小結

• 我們知道到了什麼是vue.
• 理解了Vue例項
• 學會了安裝less。
• 知道了 .vue 檔案 template script style三個區別分別用些編寫html, js, css。
• 知道了基本的路由的配置,vue-router簡單例子
• 知道了什麼是元件？
• 必須理解的重點:
  • 模板語法
  • 列表渲染
  • 條件渲染
  • data函式
  • 表單控制元件繫結
  • 自定義事件
  • 事件處理器
  • 父子元件通訊之Prop