十、徒手撸一个vue下拉左侧二级导航

  1. 先附上最终效果图:

  2. vue代码:

    <div
    class="dropdown-menu-explore"
    v-on:mouseover="addDropdownContent(this)"
    v-on:mouseout="removeDropdownContent(this)"
    >
    <span class="dropdown-menu">探索</span>
    <span class="dropdown-menu-arrow"></span>
    <div class="dropdown-content" v-bind:style="{display:activeDisplay}">
    <div class="dropdown-menu-content" id="dropdown-menu-content">
    <ul>
    <li
    v-for="(list,index) in lists"
    v-bind:key="index"
    v-on:mouseover="addListContent(index)"
    v-on:mouseout="removeListContent(this)"
    >
    <router-link to>{{list.message}}</router-link>
    <ul class="dropdown-menu-content-list" v-show="index===isShow">
    <li v-for="(item,index) in list.childs" v-bind:key="index">
    <router-link to>{{item.subTitle}}</router-link>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
  3. 事件:

    methods: {
    handleSelect: function() {},
    //鼠标覆盖显示下拉内容
    addDropdownContent: function() {
    this.activeDisplay = "block";
    return this.activeDisplay;
    },
    //鼠标移出隐藏内容
    removeDropdownContent: function() {
    this.activeDisplay = "none";
    return this.activeDisplay;
    },
    addListContent: function(index) {
    this.isShow = index;
    },
    removeListContent: function() {
    this.isShow = !this.isShow;
    }
    },
    mounted: function() {
    this.isShow = -1;
    }
  4. 数据

    activeDisplay: "none",
    isShow: 0,
    lists: [
    {
    id: 1,
    message: "理学",
    childs: [{ subTitle: "1", subMessage: "这是子菜单信息" }]
    },
    {
    id: 2,
    message: "工学",
    childs: [{ subTitle: "2", subMessage: "这是子菜单信息" }]
    },
    { id: 3, message: "计算机" },
    { id: 4, message: "管理" },
    { id: 5, message: "经济学" },
    { id: 6, message: "外语" },
    { id: 7, message: "四六级" },
    { id: 8, message: "期末冲刺" },
    { id: 9, message: "考研" },
    { id: 10, message: "更多" }
    ]

十一、引入基于vue的支持markdown语法的编辑器---mavon-editor

  1. 基于mavon-editor的丝滑和简洁,我选择引入它作为我项目的一部分,先附上官网地址:https://www.zhystar.com/

  2. 接下来一步步将其引入我的项目中:

    1. 首先通过npm安装:

      npm install mavon-editor --save
    2. 全局注册:

十二、错误总结(二)

  1. 当我将mavon-editor引入组件中后,出现了一个莫名其妙的错误:

    经过排查,是因为我将组件name值与import引入的组件重名了,只需要对name值做出修改即可:

十三、与后端的第一次数据交互测试

  1. 登录页面基本完成后,开始进行前后端数据交互测试,项目中使用了axios,后端用了PHP,前端发出请求后,后端返回数据,一度报错,原因是内有解析json数据,解析了json数据后,成功解决问题。

  2. 当我在测试时,我有这样一个需求,即通过element的el-input当Enter键按下时,可以触发事件,但是没有任何效果,原因是el-input是封装好的组件,在它外层还有一层div包裹着,所以必须使用.native修饰符,来监听根元素的原生事件,即做出以下修改:

    改为:

从无到有构建vue实战项目(六)的更多相关文章

  1. 从无到有构建vue实战项目(四)

    六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...

  2. 从无到有构建vue实战项目(一)

    vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 ...

  3. 从无到有构建vue实战项目(二)

    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...

  4. 从无到有构建vue实战项目(八)

    十六.vue-lazyload的使用 首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图 ...

  5. 从无到有构建vue实战项目(三)

    四.响应式布局的实现 elemnt-ui参考bootatrap提供了响应式布局,附上地址:https://element.eleme.cn/#/zh-CN/component/layout 以下是我的 ...

  6. 从无到有构建vue实战项目(五)

    八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vu ...

  7. 从无到有构建vue实战项目(七)

    十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...

  8. Vue 实战项目: 硅谷外卖(1)

    第 1 章: 准备 1.1. 项目描述 1) 此项目为外卖 WebApp(SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新 ...

  9. Vue 实战项目开发流程

    一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...

随机推荐

  1. C#高性能大容量SOCKET并发(九):断点续传

    原文:C#高性能大容量SOCKET并发(九):断点续传 上传断点续传 断点续传主要是用在上传或下载文件,一般做法是开始上传的时候,服务器返回上次已经上传的大小,如果上传完成,则返回-1:下载开始的时候 ...

  2. 修改Android Studio默认的API Level(SDK版本)

    原文:修改Android Studio默认的API Level(SDK版本) Android Studio(2.1.2)新建工程的时候只会让你选择最低支持的SDK版本,默认的目标编译SDK版本会以系统 ...

  3. UWP中String 转为Path Data

    定义方法: Geometry PathMarkupToGeometry(string pathMarkup) { string xaml = "<Path " + " ...

  4. NPOI 超简单的导出导入

      首先说说,第一次遇到过匿名导出的那个时候是在我在北京第一家公司,简单的声明一个对象就可以导出,那时候感觉高大上,自己也想研究研究,但是因为头将代码后来加密了根本看不到.好吧,研究了研究放弃了,后来 ...

  5. 创建服务消费者(Feign)

    概述 Feign 是一个声明式的伪 Http 客户端,它使得写 Http 客户端变得更简单.使用 Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用 Feign 注解和 JAX-RS ...

  6. shell多线程(2)之基于管道实现并发

    在shell脚本里批量执行程序是比较常见的方式,如果程序很多,每个执行时间比较长,则顺序执行需要花费大量的时间. 此时并发就成为我们考虑的方向. 上篇<shell多线程>中我们已经简单实现 ...

  7. 关于web系统整体优化提速总结

    关于web系统整体优化提速总结 一.背景 随着公司业务的拓展,随之而来就是各种系统横向和纵向的增加,PV.UV也都随之增加,原有的系统架构和模式慢慢遇上了瓶颈,需要逐步的对系统从整体上进行改造升级,通 ...

  8. OpenProj打开不了或者提示”Failed to load Java VM Library”的错误的解决方案

    一.双击打开OpenProj.exe没反应的解决方案: 1) 修改OpenProj1.4.0.ini,将Maximum Version=any改为Maximum Version=1.7,保存. 2)这 ...

  9. surging 微服务引擎 2.0 会有多少惊喜?

    surging 微服务引擎从2017年6月至今已经有两年的时间,这两年时间有多家公司使用surging 服务引擎,并且有公司搭建了CI/CD,并且使用了k8s 集群,这里我可以说下几家公司的服务搭建情 ...

  10. Scala 学习之路(十二)—— 类型参数

    一.泛型 Scala支持类型参数化,使得我们能够编写泛型程序. 1.1 泛型类 Java中使用<>符号来包含定义的类型参数,Scala则使用[]. class Pair[T, S](val ...