不一样的Vue实战3:布局与组件

概述不一样的Vue实战3:布局与组件  发表于 2017-06-05 |  分类于 web前端 |  |  阅读次数 11534 http://yangyi1024.com/2017/06/05/%E4%B8%8D%E4%B8%80%E6%A0%B7%E7%9A%84Vue%E5%AE%9E%E6%88%983-%E5%B8%83%E5%B1%80%E4%B8%8E%E7%BB%84%E4%BB%B6 不一样的Vue实战3:布局与组件  发表于 2017-06-05 |  分类于 web前端 |  |  阅读次数 11534 http://yangyi1024.com/2017/06/05/%E4%B8%8D%E4%B8%80%E6%A0%B7%E7%9A%84Vue%E5%AE%9E%E6%88%983-%E5%B8%83%E5%B1%80%E4%B8%8E%E7%BB%84%E4%BB%B6/ 首先 首发博客: 我的博客 项目源码: 源码(喜欢请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 你会看到

1 2 3 4 5 6 7 8 9 10 11 12

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

在终端上输入

1	npm install --save-dev less-loader style-loader less

 

第二步 配置less

在 /build/webpack.base.conf.Js 加上

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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三个区别分别依次对应。

1 2 3 4 5 6 7 8 9 10

<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,并且复制以下代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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 文件
复制以下代码,替换老的代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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,并且复制以下代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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,并且新增以下打*代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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/menus.vue，新增以下代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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,{ Title: ‘星期三‘,count: 3,locked: false }] }; } }; </script>

 

完成后你将会看到以下内容。

现在整个页面我们已经左边的菜单部分，下面就是完成右边的详情部分。

3.1.10 todo.vue （待办事项详情组件） 新增知识点(必读) 表单控件绑定 自定义事件 事件处理器 第一步:

在 src/components/ 目录下新建一个文件 todo.vue,复制以下代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

<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,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文件
新加入以下代码。

1 2 3 4 5 6 7 8 9 10 11 12 13

<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,复制以下代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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文件
新加入以下代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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, CSS。 知道了基本的路由的配置,vue-router简单例子 知道了什么是组件？ 必须理解的重点: 模板语法 列表渲染 条件渲染 data函数 表单控件绑定 自定义事件 事件处理器 父子组件通信之Prop       # vue  # 学 总结

以上是内存溢出为你收集整理的不一样的Vue实战3:布局与组件全部内容，希望文章能够帮你解决不一样的Vue实战3:布局与组件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。