首先

• 首發(fā)博客: 我的博客
• 項目源碼: 源碼(喜歡請star)
• 項目預(yù)覽: 預(yù)覽
• 上一章: 《學(xué)習(xí)不一樣的vue(2)實戰(zhàn):項目分析》
• 我的Q群: meteor高手群 vue學(xué)習(xí)交流群

首先：講一句抱歉,周末俗事纏身,無力更博驮宴，只有今日發(fā)了。而且寫博挺消耗精力的狸涌，你別看短短了幾千字烘跺，需要反復(fù)的斟酌项玛，反復(fù)的修改妙色，如果有錯誤與不足的地方拌夏，請評論指正推穷，謝謝！

前言

本文是結(jié)合官方的 api文檔,進行漸進式學(xué)習(xí),在實戰(zhàn)中熟悉文檔,在文檔中理解實戰(zhàn)类咧。下面的代碼中有詳細(xì)的代碼注釋馒铃，和邏輯講解,請仔細(xì)閱讀。

3.1.1 什么是vue?

如果你還不知道什么Vue是干什么的痕惋，請參見什么是vue区宇。

3.1.2 項目結(jié)構(gòu)

參考以下的目錄結(jié)構(gòu)，新建文件夾值戳，下面打‘ * ’的為新建文件夾
<pre>
├── build // 構(gòu)建服務(wù)和webpack配置
├── config // 項目不同環(huán)境的配置
├── dist // 項目build目錄
├── index.html // 項目入口文件
├── package.json // 項目配置文件
├── src // 生產(chǎn)目錄
│ ├── assets // 圖片資源
│ ├── common * // 公共的css js 資源
│ ├── components // 各種組件
│ ├── moke * // 本地靜態(tài)數(shù)據(jù)管理文件
│ ├── App.vue // 主頁面
│ ├── vuex * // vuex狀態(tài)管理器
│ ├── router // 路由配置器
│ └── main.js // Webpack 預(yù)編譯入口

</pre>

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 // 關(guān)閉生產(chǎn)模式下給出的提示

new Vue({  // 創(chuàng)建一個 Vue 的根實例
  el: '#app', //掛載id,這個實例下所有的內(nèi)容都會在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的實戰(zhàn)，所以在這里不去講解less的用法堕虹，如果感興趣可以去less教程學(xué)習(xí)卧晓，也不會講每個樣式怎么寫,請下載Style文件,到 src/common/下。

3.1.5 ‘.vue’文件

• Vue自定義了一種后綴名名字為.vue文件,它將html, js, css 整合成一個文件,和里面 template script style三個區(qū)別分別依次對應(yīng)赴捞。

<template>
<!--這里寫 html -->
<template/>
<script>
 export default {};
 // 這里寫js
</script>
<style lang = "less" scoped>
 <!--這里寫css-->
</style>

• 一個.vue 文件就等于單獨組件逼裆。因為.vue文件是自定義的，瀏覽器不識別赦政，所以要對該文件進行解析,在webpack構(gòu)建中胜宇，需要安裝vue-loader 對.vue文件進行解析。
• template里面最外層必須是只有一個容器
• script 中的 ** export default {}** 即導(dǎo)出這個組件恢着，外部可以引用桐愉。
• style 中的 lang 指額外表示支持的語言可以讓編輯器識別,scoped 指這里寫的css只適用于該組件。

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

在學(xué)習(xí)了上一小節(jié),我們知道了 .vue文件是做什么用掰派，下面我們就嘗試一下从诲。

在 src/components/目錄下新建一個文件 layouts.vue,并且復(fù)制以下代碼。

<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有什么用?

它的作用在于路由設(shè)置碗淌，用于設(shè)置頁面跳轉(zhuǎn)時的路徑設(shè)置,它的工作原理也很簡,將組件(components)映射到路由(routes)盏求，然后告訴 vue-router 在哪里渲染它們抖锥。

新增知識點(必看):

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

第一步:

打開 src/router/index.js 文件
復(fù)制以下代碼,替換老的代碼。

import Vue from 'vue' // 導(dǎo)入Vue
import Router from 'vue-router' // 導(dǎo)入vue-router 庫
import Layouts from '@/components/layouts' // 導(dǎo)入layouts.vue 組件

Vue.use(Router) //全局注冊Router組件碎罚，它會綁定到Vue實例里面磅废。

export default new Router({ // 創(chuàng)建 router 實例，然后傳 `routes` 配置
  routes: [
    {
      path: '/',  //訪問路徑
      name: 'Layouts', // 路徑名
      component: Layouts //訪問的組件,即訪問‘/’,它會加載 Layouts 組件所有的內(nèi)容荆烈。
    }
  ]
})

第二步:

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

3.1.8 menu.vue(菜單組件)

新增知識點(必讀)

• 使用組件
• 局部注冊組件

第一步:

在 src/components/目錄下新建一個文件 menu.vue,并且復(fù)制以下代碼

<template>
  <div class="list-todos">  <!--菜單容器-->
      <a class="list-todo activeListClass list" > <!--單個菜單容器-->
        <span class="icon-lock" ></span>  <!--鎖的圖標(biāo)-->
        <span class="count-list">1</span><!--數(shù)字-->
        星期一 <!--菜單內(nèi)容-->
      </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'; // * 導(dǎo)入剛才我們創(chuàng)建的 menus組件
  export  default {
    components: { // * 注冊menus組件宫峦，讓其可以在template調(diào)用
      menus
    }
  };
</script>

最后我們的 menu組件就注冊成功啦，并且引用了它玫鸟，你做的怎么樣了呢导绷？

3.1.9列表渲染

新增知識點(必讀)

• 模板語法
• 列表渲染
• 條件渲染
• data函數(shù)

第一步:

回到 src/components/menu.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}}   <!-- 數(shù)據(jù)綁定妥曲，看模板語法-->
   </a>
</template>
<script>
export default {
 data() { //data函數(shù)
   return {
     items: [{ title: '星期一', count: 1, locked: true }, //菜單的模擬數(shù)據(jù)
       { title: '星期二', count: 2, locked: true }, {
       title: '星期三', count: 3, locked: false
     }]
   };
 }
};
</script>

完成后你將會看到以下內(nèi)容。

現(xiàn)在整個頁面我們已經(jīng)左邊的菜單部分钦购，下面就是完成右邊的詳情部分檐盟。

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

新增知識點(必讀)

• 表單控件綁定
• 自定義事件
• 事件處理器

第一步:

在 src/components/ 目錄下新建一個文件 todo.vue,復(fù)制以下代碼。

<template>
 <div class="page lists-show"><!--最外層容器-->
   <nav><!--容器上半部分-->
     <div class="nav-group"> <!--移動端的菜單圖標(biāo)-->
       <a class="nav-item">
         <span class="icon-list-unordered">
         </span>
       </a>
     </div>
     <h1 class="title-page">
       <span class="title-wrapper">{{todo.title}}</span> <!-- 標(biāo)題-->
       <span class="count-list">{{todo.count}}</span><!-- 數(shù)目-->
     </h1>
     <div class="nav-group right"><!-- 右邊的刪除押桃，鎖定圖標(biāo)容器-->
       <div class="options-web"> 
         <a class=" nav-item"> <!-- 鎖定圖標(biāo)-->
           <span class="icon-lock" v-if="todo.locked"></span>
           <span class="icon-unlock" v-else>
           </span>
         </a>
         <a class=" nav-item"><!-- 刪除圖標(biāo)-->
           <span class="icon-trash">
           </span>
         </a>
       </div>
     </div>
 
     <div class=" form todo-new input-symbol"> <!-- 新增單個代辦單項輸入框,監(jiān)聽了回車事件葵萎，雙向綁定text值,監(jiān)聽了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: { //詳情內(nèi)容
       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
     }); // 當(dāng)用戶點擊回車時候 唱凯，給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,復(fù)制以下代碼壳坪。

<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"> <!--刪除圖標(biāo)-->
      <span class="icon-trash"></span>
    </a>
  </div>
</template>
<script>
export default {
  props: ['item']  //子組件顯式的用 props 選項聲明它期待獲得的數(shù)據(jù)，
  這里申明 它想要一個叫做 ’item‘的數(shù)據(jù)纫骑。
};
</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`會循環(huán)我們在 `data`函數(shù) 事先定義好的 ’items‘模擬數(shù)據(jù)蝎亚，循環(huán)后拿到單個對象，在通過prop把數(shù)據(jù)傳輸給子組件 item -->
       <item :item="item"></item>
     </div>
   </div>
</template>
 <script>
import item from './item';
 export  default {
   components: {  //新加components對象
     item  //新加的
   }
 };
</script>

最后

在新增的輸入框里面先馆，輸入點東西发框，并且回車，看看有沒有達到效果煤墙。

小結(jié)

• 我們知道到了什么是vue.
• 理解了Vue實例
• 學(xué)會了安裝less梅惯。
• 知道了 .vue 文件 template script style三個區(qū)別分別用些編寫html, js, css宪拥。
• 知道了基本的路由的配置,vue-router簡單例子
• 知道了什么是組件？
• 必須理解的重點:
• 模板語法
• 列表渲染
• 條件渲染
• data函數(shù)
• 表單控件綁定
• 自定義事件
• 事件處理器
• 父子組件通信之Prop