不一样的 vue 实战 (3): 布局与组件

内容简介：不一样的 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 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></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"> <!-- 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 实战Vue组件和Mixins
• Go 设计模式实战之并发组件
• iOS 组件化实战篇（私有库）
• Android组件化方案及组件消息总线modular-event实战
• Vue实战—评价组件的设计与实现（6）
• 「小程序JAVA实战」小程序开源搜索组件（52）

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。