vue初尝试--组件
组件 (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框架
- 安装(推荐使用npm的方式安装,它能更好的和webpack打包工具配合使用)
cnpm install --seve element-ui
加上--save命令,在package.json里就会自动加入,下次拉取项目直接install就可以直接安装
- 引入element-ui(element-ui可以完整引入,也可以按需引入,http://element.eleme.io/#/zh-CN/component/quickstart),为了达到减少项目体积的目的,建议按需引入,比如要用element-ui中的菜单组件,就在main.js文件中:
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初尝试--组件的更多相关文章
- vue初尝试--项目结构
新建一个项目之后,我们来看一下项目的目录结构 几个主要文件的内容 index.html文件(入口文件,系统进入之后先进入index.html) <!DOCTYPE html> <ht ...
- vue初尝试--新建项目
这是一篇技术贴--如何新建一个基于vue的项目 1.下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了. 安装完成之后可以在cmd命令 ...
- VScode开发Vue初尝试(一)
由于公司近期有新的H5项目开发,而前端的同事也离职了,所以就临时顶缸,研究学习一下Vue框架开发. 本人也是初学,在学习过程中,把一些学习所得分享出来,可能会有很多问题和疏漏,希望大家能够多多指正,共 ...
- vuejs和webpack项目(VueComponent)初尝试——瀑布流组件
碎碎念: 好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
- vue学习之四组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
随机推荐
- 使用非直接缓冲区与直接缓冲区进行文件的复制(基于Channel)
一.利用通道完成文件的复制(非直接缓冲区) long start = System.currentTimeMillis(); FileInputStream fis = new FileInp ...
- 【noip模拟】2048
Time limit: 1000ms Memory limits: 256MB Description 2048曾经是一款风靡全球的小游戏.今天,我们换一种方式来玩这个小游戏.现在, ...
- MSIL实用指南-加载null、string、long、float、double等值
本篇讲述怎么加载null.string值.long值.float值.double值. 加载null不需要参数值,只要 Emit ldnull 其它几个命令要 Emit <指令> <值 ...
- link 标签
link标签 主要是引用外部文件 rel属性 规定当前文档与被链接文档之间的关系 alternate,author,help,icon,licence,next,pingback,prefetch,p ...
- yum执行时Another app is currently holding the yum lock; waiting for it to exit... The other application is: yum
可能是系统自动升级正在运行,yum在锁定状态中. 已经有一个yum进程在运行了,使用kill干掉它: # # ps aux|grep yum root pts/ S+ : : grep yum roo ...
- 8086的分段寻址技术学习总结(Segmented Addressing)
计算机最小粒度的数据单位是bit,但是为每个bit都分配地址不仅浪费资源,同时存取效率低.因此转而用8bits(也就是1个字节,1byte)来占用一个地址. 那么16位的地址线能够访问的地址空间大小为 ...
- selenium webdriver 使用Chrome 浏览器
首先需要有ChromeDriver驱动来协助.ChromeDriver是实现WebDriver有线协议的一个单独的服务.ChromeDriver通过chrome的自动代理框架控制浏览器,ChromeD ...
- Windows Server 2019 预览版介绍
在Windows server 2012.Windows server 2016还未完全普及的情况下,昨天Windows Server团队宣布Windows Server 2019将在2018年的下半 ...
- 💒 es6 + canvas 开源 盖楼小游戏 完整代码注释 从零教你做游戏(一)
盖楼游戏 一个基于 Canvas 的盖楼游戏 Demo 预览 在线预览地址 (Demo Link) 手机设备可以扫描下方二维码 github https://github.com/bmqb/tower ...
- python 中的 args,*args,**kwargs的区别
一.*args的使用方法 *args 用来将参数打包成tuple给函数体调用 例子一:def function(*args): print(args, type(args))function ...