今天哥给了我一个页面,让做出类似的。

<h2>就直接说下页面用到的知识点吧</h2>

首先说下该页面使用的是vue2+less  直接写

导入模块时就只导入了cnpm i  less@3  less-loader@5 -S

然后就是布局+样式书写

里面有几个功能,大概就是一个搜索框,书写内容按下enter键会出现一个文本框,里面会有一些信息。

文本框旁边有一个收藏键,按下就会存储自己搜的话。

那就先从全局的enter按键开始吧!

这个需要有全局事件,键盘的键下弹起,弹起就让隐藏盒子v-show=“true”

因此我们先在生命周期created(){}里面进行全局键盘键下设置:

 data(){
return {
othershow:false,
},
created(){
var _self = this;
document.onkeydown = function(){
var key = window.event.keyCode;
if(key == 13){
_self.othershow=true;
}
}
}

就是用原生的那个document.onkeydown = function(){}   获取键值就使用window.event.keyCode

enter键所对应的code值是13    。

<hr>

这样咱的小功能就成了。

接下来就是收藏存储。

收藏键是使用svg图标写的。上面绑定点击事件。

点击时,就读取input框中的内容(这里使用双向数据绑定v-model="text")

然后存储到本地中

存储使用localStorage

具体步骤就是   localStorage.setItem("collect",this.text)

之后读取直接localStorage。getItem("collect"),直接就可以读取this.text了。

O(∩_∩)O哈哈~,初步就是这些,虽然简单,但不能小视。

最后就是放在哥说的仓库了。

哈哈哈哈,这部分花了我好久时间。

之前练习都是使用gitee上传文件的。这回用的是Gitlab   不过总的来说步骤都是一样的。

就是中间遇到的一个问题:上传要关闭某种http敏感连接,搜了搜使用这种方法搞得:

git config --global http.sslVerify false

运行之后确实是能上传了,就是会报一些警告之类的提示。

<hr>

另外说一下,上传仓库一定要记得有群组,当ta把你拉进群组之后,你就能上传某个上传不了的地址了。

是时候开始写总结了-今日总结-vue单页面制作的更多相关文章

  1. 刚写完的商城erp + 这个商城前台,新鲜出炉。自己1个人写, 包括php框架和前端html页面.

    刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面.

  2. webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js

    今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,但是这个contentBase ...

  3. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

  4. 【Part1】用JS写一个Blog(node + vue + mongoDB)

    学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...

  5. upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量

    upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...

  6. 写给后端同学的vue

    安装环境 安装vue-cli 脚手架 1. 安装nodejs环境 下载地址: (nodejs)[https://nodejs.org/zh-cn/download/] 安装(略) 2. 安装vue-c ...

  7. 手写一个超简单的Vue

    基本结构 这里我根据自己的理解模仿了Vue的单文件写法,通过给Vue.createApp传入参数再挂载元素来实现页面与数据的互动. 其中理解不免有错,希望大佬轻喷. 收集数据 这里将Vue.creat ...

  8. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

  9. Ajax写分页查询(实现不刷新页面)

    获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

  10. 写给自己看的vue

    学习过程:自学(个人demo驱动),论坛,qq群多少听到vue,react(很抱歉只弄了hello world demo 虚拟dom 也是概念 到目前也没弄清楚)这类框架(工作经历前后端都折腾,老板指 ...

随机推荐

  1. VisionPro学习笔记(1)——软件介绍和基本使用

    前言 自己使用visionPro已经有段时间了,最近也一直在研究其算子的理论,为了加深印象,计划将自己的学习笔记整理在博客园,当然其官方文档对如何使用及其各种算子都有详细的介绍,所以这里的笔记仅仅为个 ...

  2. vue @click的stop和prevent

    @click.stop 阻止事件冒泡 @click.prevent 阻止事件的默认行为 联合饿了吗UI使用的时候,el-table(主表)包含一个或多个子表时(el-tabs),点击右侧的编辑.删除时 ...

  3. boot-repair

    sudo add-apt-repository ppa:yannubuntu/boot-repair && sudo apt-get update sudo apt-get insta ...

  4. EPICS Archiver Appliance在Debian11下安装文档

    本文很想标注转发,可是要转发链接,只好标注原创. 首先声明:本文档是合肥光源控制组孙晓康博士踩坑后整理的.我尝试过在Debian11和Rocky下安装,碰到坎过不去,这段时间各种事就没继续了,请教晓康 ...

  5. 跳板攻击之:CS代理转发

    跳板攻击之:CS代理转发 目录 跳板攻击之:CS代理转发 1 环境准备 1.1 环境拓扑 1.2 前提 2 配置 Socks 代理 3 配置转发监听器(正向连接) 4 配置转发上线(反向连接) 1 环 ...

  6. 自己从零写操作系统GrapeOS系列教程——4.GrapeOS开发环境介绍

    1. 开发环境简介 为了减少开发过程中不必要的麻烦,希望大家的开发环境尽量与我的保持一致. 我的开发环境如下: Windows10电脑一台 Visual Studio Code(最好是最新版) Vir ...

  7. 一个厂区宿舍管理后台密码爆破 - selenium版

    title: 某厂区宿舍管理后台密码爆破-selenium测试 author: 杨晓东 permalink: 某厂区宿舍管理后台密码爆破-selenium测试 date: 2021-10-02 11: ...

  8. 使用Telnet伪造邮件发送

    注意:手抖就会败北,敲错就会白给,输入错误只能rset重新输入命令. 1.打开Telnet服务 搜索"程序和功能"->启用或关闭Windows功能->点选Telnet客 ...

  9. nightwatch入门教程

    Nightwatch.js 是一个用来测试web应用和网站的自动化测试框架,它是由NodeJs编写的,使用了W3C WebDriver API(之前是Selenium WebDriver) 所以我们首 ...

  10. django源码剖析(steup、runserver、生命周期)

    工作上会经常用到不熟悉的第三方模块,大多数时候会选择看文档.百度谷歌.看源码等形式去把它用起来.几年工作经验下来源码看的不少了,但当面试被问到django的生命周期时,只能浅谈根据wsgi协议会走ap ...