博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
不一样的Vue实战3:布局与组件
阅读量：5093 次
发布时间：2019-06-13

本文共 8356 字，大约阅读时间需要 27 分钟。

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

 发表于 2017-06-05 |  分类于 |  |  阅读次数 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)
  • 项目预览: 
  • 上一章: 
  • 我的Q群:  

首先：讲一句抱歉,周末俗事缠身,无力更博，只有今日发了。而且写博挺消耗精力的，你别看短短了几千字，需要反复的斟酌，反复的修改，如果有错误与不足的地方，请评论指正，谢谢！

前言

本文是结合官方的 ,进行渐进式学习,在实战中熟悉文档,在文档中理解实战。下面的代码中有详细的代码注释，和逻辑讲解,请仔细阅读。

3.1.1 什么是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 实例

新增知识点

步骤

打开 /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的用法，如果感兴趣可以去学习，也不会讲每个样式怎么写,请下载,到 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 在哪里渲染它们。

新增知识点(必看):

第一步:

打开 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 组件所有的内容。
}
]
})

 

第二步:

浏览器打开  你将看到如下的显示，那么这一步你就完成了。

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

新增知识点(必读)

第一步:

回到 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, locked: true }, {
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, 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文件

新加入以下代码。

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（代办单项组件）

新增知识点

  • 第一步:

    在 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>

最后

在新增的输入框里面，输入点东西，并且回车，看看有没有达到效果。

小结

  • 我们知道到了.
  • 理解了
  • 学会了安装less。
  • 知道了 .vue 文件 template script style三个区别分别用些编写html, js, css。
  • 知道了基本的路由的配置,
  • 知道了
  • 必须理解的重点:
 
 
 
 

转载于:https://www.cnblogs.com/bwdblogs/p/11147618.html

你可能感兴趣的文章
android dialog使用自定义布局 设置窗体大小位置
查看>>
ionic2+ 基础
查看>>
互联网模式下我们更加应该“专注”
查看>>
myeclipse集成jdk、tomcat8、maven、svn
查看>>
查询消除重复行
查看>>
Win 10 文件浏览器无法打开
查看>>
[leetcode]Minimum Path Sum
查看>>
内存管理 浅析 内存管理/内存优化技巧
查看>>
【BZOJ 5222】[Lydsy2017省队十连测]怪题
查看>>
Java跟Javac，package与import
查看>>
day-12 python实现简单线性回归和多元线性回归算法
查看>>
Json格式的字符串转换为正常显示的日期格式
查看>>
[转]使用 Razor 进行递归操作
查看>>
[转]Android xxx is not translated in yyy, zzz 的解决方法
查看>>
docker入门
查看>>
Android系统--输入系统（十一）Reader线程_简单处理
查看>>
监督学习模型分类 生成模型vs判别模型 概率模型vs非概率模型 参数模型vs非参数模型...
查看>>
Mobiscroll脚本破解，去除Trial和注册时间限制【转】
查看>>
实验五 Java网络编程及安全
查看>>
32位与64位 兼容编程
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-11-17 00:27:17   当前IP: 18.227.107.59   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我