首先

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

首先：講一句抱歉,周末俗事纏身,無力更博，只有今日發(fā)了。而且寫博挺消耗精力的，你別看短短了幾千字，需要反復(fù)的斟酌，反復(fù)的修改，如果有錯(cuò)誤與不足的地方，請(qǐng)?jiān)u論指正，謝謝！

前言

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

3.1.1 什么是vue?

如果你還不知道什么Vue是干什么的，請(qǐng)參見什么是vue。

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

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

</pre>

3.1.3 Vue 實(shí)例

新增知識(shí)點(diǎn)

• Vue實(shí)例

步驟

打開 /src/main.js 你會(huì)看到

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)建一個(gè) Vue 的根實(shí)例
  el: '#app', //掛載id,這個(gè)實(shí)例下所有的內(nèi)容都會(huì)在index.html 一個(gè)id為app的div下顯示
  router, // 注入路由配置。
  template: '<App/>', //配置根模板 即打開頁(yè)面顯示那個(gè)組件
  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: [
      {   //把這個(gè)對(duì)象添加在里面
        test: /\.less$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      }
    ]
  }
}

第三步 下載style文件

因?yàn)楸菊n程主要是針對(duì)Vue的實(shí)戰(zhàn)，所以在這里不去講解less的用法，如果感興趣可以去less教程學(xué)習(xí)，也不會(huì)講每個(gè)樣式怎么寫,請(qǐng)下載Style文件,到 src/common/下。

3.1.5 ‘.vue’文件

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

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

• 一個(gè).vue 文件就等于單獨(dú)組件。因?yàn)?code>.vue文件是自定義的，瀏覽器不識(shí)別，所以要對(duì)該文件進(jìn)行解析,在webpack構(gòu)建中，需要安裝vue-loader 對(duì).vue文件進(jìn)行解析。
• template里面最外層必須是只有一個(gè)容器
• script 中的 ** export default {}** 即導(dǎo)出這個(gè)組件，外部可以引用。
• style 中的 lang 指額外表示支持的語(yǔ)言可以讓編輯器識(shí)別,scoped 指這里寫的css只適用于該組件。

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

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

在 src/components/目錄下新建一個(gè)文件 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è)置頁(yè)面跳轉(zhuǎn)時(shí)的路徑設(shè)置,它的工作原理也很簡(jiǎn),將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

新增知識(shí)點(diǎn)(必看):

• vue-router簡(jiǎn)單例子
• 命名路由

第一步:

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

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

Vue.use(Router) //全局注冊(cè)Router組件，它會(huì)綁定到Vue實(shí)例里面。

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

第二步:

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

3.1.8 menu.vue(菜單組件)

新增知識(shí)點(diǎn)(必讀)

• 使用組件
• 局部注冊(cè)組件

第一步:

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

<template>
  <div class="list-todos">  <!--菜單容器-->
      <a class="list-todo activeListClass list" > <!--單個(gè)菜單容器-->
        <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>

第二步:

我們?cè)诨氐?Layouts.vue,并且新增以下打*代碼。

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

<script>
  import menus from './menus'; // * 導(dǎo)入剛才我們創(chuàng)建的 menus組件
  export  default {
    components: { // * 注冊(cè)menus組件，讓其可以在template調(diào)用
      menus
    }
  };
</script>

最后我們的 menu組件就注冊(cè)成功啦，并且引用了它，你做的怎么樣了呢？

3.1.9列表渲染

新增知識(shí)點(diǎn)(必讀)

• 模板語(yǔ)法
• 列表渲染
• 條件渲染
• 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ù)綁定，看模板語(yǔ)法-->
   </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>

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

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

3.1.10 todo.vue （待辦事項(xiàng)詳情組件）

新增知識(shí)點(diǎn)(必讀)

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

第一步:

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

<template>
 <div class="page lists-show"><!--最外層容器-->
   <nav><!--容器上半部分-->
     <div class="nav-group"> <!--移動(dòng)端的菜單圖標(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"> <!-- 新增單個(gè)代辦單項(xiàng)輸入框,監(jiān)聽了回車事件，雙向綁定text值,監(jiān)聽了disabled屬性，在todo.locked為true的情況下無法編輯-->
        <input type="text" v-model="text" placeholder='請(qǐng)輸入'@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: [ //代辦單項(xiàng)列表
       { checked: false, text: '新的一天', isDelete: false },
       { checked: false, text: '新的一天', isDelete: false },
       { checked: false, text: '新的一天', isDelete: false }
     ],
     text: '' //新增代辦單項(xiàng)綁定的值
   }
 },
 methods: {
   onAdd() {
     this.items.push({
       checked: false, text: this.text, isDelete: false
     }); // 當(dāng)用戶點(diǎn)擊回車時(shí)候 ，給items的值新增一個(gè)對(duì)象，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（代辦單項(xiàng)組件）

新增知識(shí)點(diǎn)

• 父子組件通信之Prop

第一步:

在 src/components/ 目錄下新建一個(gè)文件 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='寫點(diǎn)什么。。。'>  <!--綁定item.text-->
    <a class="delete-item"> <!--刪除圖標(biāo)-->
      <span class="icon-trash"></span>
    </a>
  </div>
</template>
<script>
export default {
  props: ['item']  //子組件顯式的用 props 選項(xiàng)聲明它期待獲得的數(shù)據(jù)，
  這里申明 它想要一個(gè)叫做 ’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ì)循環(huán)我們?cè)?`data`函數(shù) 事先定義好的 ’items‘模擬數(shù)據(jù)，循環(huán)后拿到單個(gè)對(duì)象，在通過prop把數(shù)據(jù)傳輸給子組件 item -->
       <item :item="item"></item>
     </div>
   </div>
</template>
 <script>
import item from './item';
 export  default {
   components: {  //新加components對(duì)象
     item  //新加的
   }
 };
</script>

最后

在新增的輸入框里面，輸入點(diǎn)東西，并且回車，看看有沒有達(dá)到效果。

小結(jié)

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