github代码同步网址

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

组件是vue中比较重要的一个概念,网页结构的构成都要依赖组件,页面的某个组成部分都才可以写成一个组件,然后在其他的页面中调用该组件,组件一般都写在components文件夹中。下面举一些具体的例子进行详细讲述:

1、网页首先进入index.html入口文件,当dom渲染到<div id="app"></div>部分的时候,vue默认机制就跳转到src文件夹中main.js文件,在main.js里面寻找到一个全局组件App.vue,进而跳转到App.vue中进行dom渲染

new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

2、组件都写在<template>标签内,当dom渲染到<router-view/>时,就自动跳转到router中的index.js路由文件中,路由文件定义相应的url进入相应的组件,路由的定义分下面4步

router中的index.js文件

import Vue from 'vue'![微信截图_20180314103850.png](https://upload-images.jianshu.io/upload_images/3810529-fe7323678a38f5a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

import Router from 'vue-router'
//1、 定义组件,从其他文件import进来
import layout from '../components/layout' Vue.use(Router) //2、定义路由对象,每个路由应该映射一个组件
const routes =[
{
path:'/',
component:layout
}
] //3、创建 router 实例,然后转 `routes` 配置
const router = new Router({
mode: 'history',
routes
}) //4、创建和挂载路由,从而让整个应用都有路由功能
export default router

PS:第三步中的mode:'history'是为了去除url中的"#"


3、编写layout.vue组件,这里推荐使用一个前端框架,element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架

import {
Menu,
MenuItem,
} from 'element-ui'
Vue.use(Menu)
Vue.use(MenuItem)
  • 编写layout文件,顾名思义,layout可以作为一个布局文件,在整个layout里面会有标题、菜单等子组件,为了使结构更加清晰,可以将标题栏、菜单等部分都写成组件的形式,然后在layout中调用
<template>
<div>
<side-bar></side-bar>
</div>
</template>
<script>
import sideBar from "./wigdets/side-bar.vue";
export default {
components: {
sideBar
}
}
</script>

4、编写side-bar.vue组件

  • element-ui的组件语法都可以在官网上找到相应的例子,只要按照官网的例子进行编写就可以了

    PS:样式文件安装sass语法cnpm install sass-loader node-sass --save-dev安装这两个依赖包之后就可以用sass语法写样式文件,这种语法的好处是可以定义变量,方便在后面的样式定义可以避免编写重复的变量

<template>
<div id="navBar">
<el-menu class="el-menu-vertical-demo" text-color="#fff" unique-opened router>
<el-menu-item index="1-1">
<span slot="title">User</span>
</el-menu-item>
<el-menu-item index="1-2">
<span slot="title">Service</span>
</el-menu-item>
<el-menu-item index="1-3">
<span slot="title">Source</span>
</el-menu-item>
<el-menu-item index="1-4">
<span slot="title">App</span>
</el-menu-item>
<el-menu-item index="1-5">
<span slot="title">Key</span>
</el-menu-item>
</el-menu>
</div>
</template>
<style lang="scss" scoped>
$sideWidth: 260px;
#navBar {
z-index: 2;
width: $sideWidth;
height: 100%;
background: #3E3E3E;
flex-shrink: 0;
color:#B8B8B8;
span{
color:#B8B8B8;
}
i {
font-size: 20px !important;
padding: 0 10px 0 40px;
display: inline-block;
width: 75px;
color:#B8B8B8;
}
}
$menuHeight:70px;
.el-menu{
border-right: 0;
background: #3E3E3E;
}
.el-menu-item{
height: $menuHeight;
line-height: $menuHeight;
font-size: 16px;
border-bottom: 1px solid rgba(107, 108, 109, 0.19);
padding: 0 10px;
}
#navBar .el-menu-item:hover{
background: #575757 !important;
cursor: pointer;
span{
color: #F36A5A;
}
}
#navBar .el-menu-item.is-active{
background: #f5f5f5 !important;
span{
color: #F36A5A;
}
i{
color: #F36A5A;
}
}
</style>

vue初尝试--组件的更多相关文章

  1. vue初尝试--项目结构

    新建一个项目之后,我们来看一下项目的目录结构 几个主要文件的内容 index.html文件(入口文件,系统进入之后先进入index.html) <!DOCTYPE html> <ht ...

  2. vue初尝试--新建项目

    这是一篇技术贴--如何新建一个基于vue的项目 1.下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了. 安装完成之后可以在cmd命令 ...

  3. VScode开发Vue初尝试(一)

    由于公司近期有新的H5项目开发,而前端的同事也离职了,所以就临时顶缸,研究学习一下Vue框架开发. 本人也是初学,在学习过程中,把一些学习所得分享出来,可能会有很多问题和疏漏,希望大家能够多多指正,共 ...

  4. vuejs和webpack项目(VueComponent)初尝试——瀑布流组件

    碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...

  5. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  6. Vue.js之组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...

  7. vue学习之四组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...

  8. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  9. WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能

    前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...

随机推荐

  1. [LNOI2014] LCA

    题目描述: 网址:http://www.lydsy.com/JudgeOnline/problem.php?id=3626 大意: 给出一个n个节点的有根树(编号为0到n-1,根节点为0). 一个点的 ...

  2. 关系型数据库工作原理-SQL重写(翻译自Coding-Geek文章)

    本文翻译自Coding-Geek文章:< How does a relational database work>.原文链接:http://coding-geek.com/how-data ...

  3. JavaScript:['1','2','3'].map(parseInt)问题解析

    最近碰到了['1','2','3'].map(parseInt)这种看似不起眼陷阱却极大的问题. 这乍一看,感觉应该会输出[1,2,3].但是,实际上并不是我们想的这样.你可以现在打开console, ...

  4. 使用外置无线网卡来切换mac地址

    mac地址被別人過濾了!小樣,既然內置網卡不能修改mac,那我就用外置usb無線網卡,你以為你很厲害嗎,看我怎麼破解了你.

  5. 软件测试第二周作业 WordCount

    本人github地址:  https://github.com/wenthehandsome23 psp阶段 预估耗时 (分钟) 实际耗时 (分钟) 计划 30 10 估计这个任务需要多少时间 20 ...

  6. firemonkey ListView DynamicAppearance

    Go Up to FireMonkey Application Design Contents [hide]  1 Customizing the List View Appearance Prope ...

  7. canvas小球

      小球碰撞效果是采用面向对象的方式写的,在小球的构造器里包含了小球的属性值,大小,移动速度,半径大小以及颜色. 在小球的原型方法里,添加了小球运动的方法,当小球碰撞到屏幕边界的时候进行反弹. 小球是 ...

  8. canvas---HTML5新特性

    画圆及填充文字<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  9. c++ --> extern "C" {}详解

    extern "C" {}详解 extern "C"的真实目的是实现类C和C++的混合编程.在C++源文件中的语句前面加上extern "C" ...

  10. MSIL实用指南-装箱拆箱

    本篇讲述怎样装箱拆箱.装箱和拆箱都是针对值类型而言的,装箱的性能开销远比拆箱的性能开销大. 装箱装箱指令是Box.使用格式是 ILGenerator.Emit(OpCodes.Box,<值类型& ...