Vue+Element实战项目笔记（三）（持续更新中）

张张碎碎念
280 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

在项目笔记之前的这一部分是狂神老师讲解的 Vue，狂神Vue视频链接，讲解的非常细致，在此感谢！

为什么要使用Vue.js

  • 轻量级，体积小，vue.js压缩后只有20多kb(Angular56kb+,React44kb+)
  • 移动优先，更适合移动端，比如移动端的touch事件
  • 吸收了Angular(模块化)和React(虚拟Dom)的长处，并拥有自己独特的功能，如，计算属性
  • 开源
  • 渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性

组件

1.什么是组件

组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板

2.使用props组件传递参数

注意:默认规则下props属性里的值不能为大写

  • v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
  • v-bind:panh="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items中遍历的item项的值
<div id="app">
<!--组件：传递给组件中的值：props-->
<babe v-for="item in items" v-bind:ba="item"></babe>

</div>
<!--导入vue.js-->
<script src="https://v2.vuejs.org/js/vue.min.js"></script>

<script>
    // 定义一个Vue组件compoment
    Vue.component("babe",{
        props:['ba'],
        template: "<li>{{ba}}</li>"
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ['java','web','ui' ]
        },
    });
</script>

Axios异步通信

1.什么是Axios异步通信

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API【JS中链式编程】
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)
2.为什么要使用Axios异步通信

由于vue.js是一个视图层框架，严格遵守Soc(关注度分离原则)，所以vue.js并不包含Ajax的通信功能，因为jQuery操作DOM太频繁，所以要避免使用jQuery

vue项目实战（是【vue项目实战教程】这位博主的，非常感谢），简单的记录一下学习的过程。

路由跳转

在views文件夹里创建home,user文件夹，里面分别创建index.vue文件，在router=>index.js里配置路由跳转

import Vue from "vue";
import VueRouter from "vue-router";
// import hHome from "../views/hHome.vue"
Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: "Main",
        component: () => import('../views/Main.vue'),
        children: [
            {
                path: '/home',
                name:'home',
                component: () => import('../views/home'),
            },
            {
                path: '/user',
                name: 'User',
                component: () => import('../views/user')
            }
        ]
    },
    
]
const router = new VueRouter({
    mode: 'history',
    routes

})

export default router

在Components文件夹里创建CommenHeader.vue

<template>
  <!-- element 中container部分代码 -->
  <el-container style="height: 100%">
    <el-aside width="auto">
        <commen-aside></commen-aside>
    </el-aside>
    <el-container>
      <el-header>
        <commen-header></commen-header>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import CommenAside from '@/components/CommenAside.vue';
import CommenHeader from '@/components/CommenHeader.vue';
export default {
  components: { CommenAside ,CommenHeader},
  name: "hHome",

  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.el-header {
  background-color: #333;
}
.el-main {
  padding-top: 0;
}
</style>

<template>
  <header>
    <div class="l-content">
      <el-button @click="handleMenu" plain icon="el-icon-menu" size="mini"></el-button>
      <h3 style="color: #fff">首页</h3>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="mini">
        <span>
          <img class="user" :src="userImg"> 
        </span>
         <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>
<script>
export default {
  name: "CommenHeader",
  data() {
    return {
      userImg: require("../assets/images/user.png"),
    }
  },
  methods:{
    handleMenu(){
        this.$store.commit('CollapesMenu')
    }
  }
}
</script>
<style lang="less" scoped>
header{
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}
.l-content{
    display: flex;
    align-items: center;
    .el-button{
        margin-right: 20px;
    }
}
.r-content {
    .user{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}
</style>

接下来，我们使用Vuex将header部分按钮和左侧侧边栏联动起来，首先，下载安装Vuexnpm install vuex --save

创建store文件夹，在此文件夹中创建index.js,tab.js

在store中引入tab

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
       tab
    }
})

实现点击按钮侧边栏缩放的效果

export default {
    state:{
        isCollapse:false
    },
    mutations:{
        CollapesMenu(state){
            state.isCollapse = !state.isCollapse
        }
    }
}

修改CommenAside.vue

<template>
  .....
  <h3>{{isCollapse ? '后台':'通用后台管理系统'}}</h3>
    <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
      <i :class="'el-icon-' + item.icon" ></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>
   .......
  methods: {
    ......
    clickMenu(item){
        this.$router.push({
          name:item.name
        })

    }
  },
  computed:{
   ....
    isCollapse(){
      return this.$store.state.tab.isCollapse
    }
  }
};
</script>

栅格布局（Grid Layout）

首页内容我们采用栅格布局,也称为网格布局，接下来细说一下栅格布局

  1. web页面中，共有三种布局方式
  • table布局
  • div+css布局
  • boot的栅格
  1. 栅格的优势

简单、容易控制、语义正确、渲染效率高、支持响应式

  1. 栅格布局是一种较为特殊的弹性布局，是一种自适应布局，能根据不同的终端自动伸缩容器的宽高

Layout布局

通过基础的24分栏，迅速简便的创建布局

avatar
文章
阅读
粉丝