不同的vue實戰(3): 佈局與組件

時間  2019-11-24
標籤 不同 vue 實戰 佈局 組件 简体版
原文   原文鏈接

首先

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

前言

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

3.1.1 什麼是vue?

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

3.1.2 項目結構

參考如下的目錄結構，新建文件夾，下面打‘ * ’的爲新建文件夾vue

├── 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 實例

新增知識點

步驟

打開 /src/main.js 你會看到java

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

在終端上輸入webpack

npm install --save-dev less-loader style-loader less複製代碼

第二步 配置less

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

module.exports = {
  module: {
    rules: [
      {   //把這個對象添加在裏面
        test: /\.less$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      }
    ]
  }
}複製代碼

第三步 下載style文件

由於本課程主要是針對Vue的實戰，因此在這裏不去講解less的用法，若是感興趣能夠去less教程學習，也不會講每一個樣式怎麼寫,請下載Style文件,到 src/common/下。github

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文件是作什麼用，下面咱們就嘗試一下。web

在 src/components/目錄下新建一個文件 layouts.vue,而且複製如下代碼。vue-router

<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 在哪裏渲染它們。

新增知識點(必看):

第一步:

打開 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列表渲染

新增知識點(必讀)

第一步:

回到 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>複製代碼

最後

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

小結

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程