不一樣的 vue 實戰 (3): 布局與組件

01-24

首先

首發博客: 我的博客
項目源碼: 源碼(喜歡請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><template/><script>export default {};// 這裡寫js</script><style lang = "less" scoped></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" // 導入Vueimport 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 menu.vue(菜單組件)

新增知識點(必讀)

使用組件局部註冊組件

第一步:

在 src/components/目錄下新建一個文件 menu.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>  </section></template><script> import menus from "./menus"; // * 導入剛才我們創建的 menus組件 export default { components: { // * 註冊menus組件，讓其可以在template調用 menus } };</script>

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

3.1.9列表渲染

新增知識點(必讀)

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

第一步:

回到 src/components/menu.vue，新增以下代碼。

<template> <a class="list-todo list activeListClass" v-for="item in items">  <span class="icon-lock" v-if="item.locked"></span>  <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">  <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">  <span class="checkbox-custom"></span> </label> <input type="text" v-model="item.text" placeholder="寫點什麼。。。">  <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">  <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

不一樣的 vue 實戰 (3): 布局與組件

首先

前言

3.1.1 什麼是vue?

3.1.2 項目結構

3.1.3 Vue 實例

新增知識點

步驟

3.1.4 Style

第一步 安裝less

第二步 配置less

第三步 下載style文件

3.1.5 『.vue』文件

3.1.6 新增layouts.vue(布局組件)

3.1.7 修改router(路由)

vue-router有什麼用?

新增知識點(必看):

第一步:

第二步:

3.1.8 menu.vue(菜單組件)

新增知識點(必讀)

第一步:

第二步:

3.1.9列表渲染

新增知識點(必讀)

第一步:

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

新增知識點(必讀)

第一步:

第二步

最後:

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

新增知識點

第一步:

第二步:

最後

小結

第一步安裝less

第二步配置less

第三步下載style文件