从无到有构建vue实战项目(六)
十、徒手撸一个vue下拉左侧二级导航
先附上最终效果图:
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>
事件:
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;
}
数据
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
基于mavon-editor的丝滑和简洁,我选择引入它作为我项目的一部分,先附上官网地址:https://www.zhystar.com/
接下来一步步将其引入我的项目中:
首先通过npm安装:
npm install mavon-editor --save
全局注册:
十二、错误总结(二)
当我将mavon-editor引入组件中后,出现了一个莫名其妙的错误:
经过排查,是因为我将组件name值与import引入的组件重名了,只需要对name值做出修改即可:
十三、与后端的第一次数据交互测试
登录页面基本完成后,开始进行前后端数据交互测试,项目中使用了axios,后端用了PHP,前端发出请求后,后端返回数据,一度报错,原因是内有解析json数据,解析了json数据后,成功解决问题。
当我在测试时,我有这样一个需求,即通过element的el-input当Enter键按下时,可以触发事件,但是没有任何效果,原因是el-input是封装好的组件,在它外层还有一层div包裹着,所以必须使用.native修饰符,来监听根元素的原生事件,即做出以下修改:
改为:
从无到有构建vue实战项目(六)的更多相关文章
- 从无到有构建vue实战项目(四)
六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...
- 从无到有构建vue实战项目(一)
vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 ...
- 从无到有构建vue实战项目(二)
二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...
- 从无到有构建vue实战项目(八)
十六.vue-lazyload的使用 首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图 ...
- 从无到有构建vue实战项目(三)
四.响应式布局的实现 elemnt-ui参考bootatrap提供了响应式布局,附上地址:https://element.eleme.cn/#/zh-CN/component/layout 以下是我的 ...
- 从无到有构建vue实战项目(五)
八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vu ...
- 从无到有构建vue实战项目(七)
十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...
- Vue 实战项目: 硅谷外卖(1)
第 1 章: 准备 1.1. 项目描述 1) 此项目为外卖 WebApp(SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新 ...
- Vue 实战项目开发流程
一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...
随机推荐
- 条款09:绝不在构造和析构过程中调用virtual函数
不该在构造函数和析构函数期间调用virtual函数,这一点是C++与jave/C#不同的地方之一. 假设有一个class继承体系,用来模拟股市交易如买进.卖出的订单等等.这样的交易一定要经过审计,所以 ...
- dedecms自学
[dedecms笔记] index.htm 主页模板head.htm 列表头部模板footer.htm ...
- 系列教程 之 Android开发之旅
工作室持续推出Android开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢Android的朋友们学习进步: 1. Android开发之旅(1) 之 Android 开发环境搭建 代码之间工作 ...
- gitlab安装笔记三_Centos7安装GitLab
系统版本是CentOS-7-x86_64-Everything-1804.iso,很多软件默认都有了,不需要安装 https://about.gitlab.com/install/#centos-7 ...
- Web框架之Django重要组件(Django中间件、csrf跨站请求伪造)
Web框架之Django_09 重要组件(Django中间件.csrf跨站请求伪造) 摘要 Django中间件 csrf跨站请求伪造 一.Django中间件: 什么是中间件? 官方的说法:中间件是 ...
- SQL Server 2012链接服务器
第一步,在服务器对象,链接服务器那里新建链接服务器:输入要链接服务器的IP地址. 第二步,安全性输入连接数据的用户名和密码. 第三步,验证是不可以打开链接服务器库的表名,视图等数据. 第四步,如果要查 ...
- Hadoop 学习之路(八)—— 基于ZooKeeper搭建Hadoop高可用集群
一.高可用简介 Hadoop 高可用 (High Availability) 分为 HDFS 高可用和 YARN 高可用,两者的实现基本类似,但 HDFS NameNode 对数据存储及其一致性的要求 ...
- 什么是 VxLAN?
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. VLAN 和 ...
- 模拟实现 Tomcat 的核心模块:NIO,HTTP,容器和集群
如果你想看 Tomcat 源码但又无从入手,不妨从这个项目开始,代码量不多,但包含了 Tomcat 的核心处理流程,并且源码中有相当丰富的注释.相信通过此项目你能了解: NIO 基本编程.HTTP 协 ...
- CentOS7使用firewalld防火墙
firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status fir ...