vue初尝试--组件

时间：2023-12-11 21:25:14

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语法写样式文件，这种语法的好处是可以定义变量，方便在后面的样式定义可以避免编写重复的变量

    vue初尝试--组件 
<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初尝试--组件

相关文章