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

<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. gitlabApi如何获取项目文件夹的commitId

      在我们做配置管理系统和gitlab系统集成的时候,有一个常见的场景,就是要获取某个文件的commitId,来记录本次配置文件提交的版本.这个通过gitlabApi很容易实现: GET /proje ...

  2. CodeSmith 简单使用和常用模板

    1.简介 CodeSmith 是一种基于模板的代码生成工具,它使用类似于 ASP.NET的语法来生成任意类型的代码或文本. 2.软件布局 整体布局和visual studio系列相似,用过VS开发对此 ...

  3. IDEA新手使用教程【详解】

    IDEA是一款功能强悍.非常好用的Java开发工具,近几年编程开发人员对IDEA情有独钟. Intellij Idea使用技巧总结 1.如何设置通过鼠标滑轮改变编辑器字体大小 2.如何设置自动导包功能 ...

  4. 让你VS Code的通过插件扩展,拥有了三头六臂

    VS Code 有一个很强大的功能就是支持插件扩展,让你的编辑器仿佛拥有了三头六臂. 安装 VS Code 插件 提醒:当完成了vscode这些配置后,当我们换一台电脑时,不会还得重新配置吧?放心,我 ...

  5. 一个更适合Java初学者的轻量级开发工具:BlueJ

    Java是世界上最流行的编程语言之一,它被广泛用于从Web开发到移动应用的各种应用程序.大部分Java工程师主要是用IDEA.Eclipse为主,这两个开发工具由于有强大的能力,所以复杂度上就更高一些 ...

  6. IDEA插件Apifox,一键自动生成接口文档!

    有关Apifox软件之前写过一篇文章: 接口测试神器Apifox,亲测好用! 如何一键自动生成数据库文档之前也写过一篇文章: 数据库界的Swagger:一键生成数据库文档! 一.Apifox插件的优势 ...

  7. 推荐系统[八]算法实践总结V2:排序学习框架(特征提取标签获取方式)以及京东推荐算法精排技术实战

    0.前言 「排序学习(Learning to Rank,LTR)」,也称「机器排序学习(Machine-learned Ranking,MLR)」 ,就是使用机器学习的技术解决排序问题.自从机器学习的 ...

  8. 浅析容器运行时奥秘——OCI标准

    背景 2013年Docker开源了容器镜像格式和运行时以后,为我们提供了一种更为轻量.灵活的"计算.网络.存储"资源虚拟化和管理的解决方案,在业界迅速火了起来. 2014年更是容器 ...

  9. 【转载】Python(cx_oracle)的DPI-1047错误

    转自:https://blog.csdn.net/weixin_45158749/article/details/124800132 Python(cx_oracle)的DPI-1047错误 步步 F ...

  10. mysql explain 查看sql语句执行计划概述

    mysql explain 查看sql语句执行计划概述 id:选择标识符select_type:表示查询的类型.table:输出结果集的表partitions:匹配的分区type:表示表的连接类型po ...