是时候开始写总结了-今日总结-vue单页面制作
今天哥给了我一个页面,让做出类似的。
<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单页面制作的更多相关文章
- 刚写完的商城erp + 这个商城前台,新鲜出炉。自己1个人写, 包括php框架和前端html页面.
刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面.
- webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js
今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,但是这个contentBase ...
- vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...
- 【Part1】用JS写一个Blog(node + vue + mongoDB)
学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...
- upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量
upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...
- 写给后端同学的vue
安装环境 安装vue-cli 脚手架 1. 安装nodejs环境 下载地址: (nodejs)[https://nodejs.org/zh-cn/download/] 安装(略) 2. 安装vue-c ...
- 手写一个超简单的Vue
基本结构 这里我根据自己的理解模仿了Vue的单文件写法,通过给Vue.createApp传入参数再挂载元素来实现页面与数据的互动. 其中理解不免有错,希望大佬轻喷. 收集数据 这里将Vue.creat ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- Ajax写分页查询(实现不刷新页面)
获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...
- 写给自己看的vue
学习过程:自学(个人demo驱动),论坛,qq群多少听到vue,react(很抱歉只弄了hello world demo 虚拟dom 也是概念 到目前也没弄清楚)这类框架(工作经历前后端都折腾,老板指 ...
随机推荐
- Vim-Adventures 有趣的Vim小游戏
入门介绍 Vim-Adventures是一个让初学者练习如何使用 Vim 的小游戏.它一共有 TODO 个 关卡,每个关卡都对应不同的 Vim 练习.一进网页我们可以看到这个画面: 点进去后就自动来到 ...
- tomcat7 与 tomcat8 加载 jar包的顺序
本文为博主原创,转载请注明出处: 最近在进行服务的环境升级,将 服务的tomcat7升级到 tomcat8:当把 tomcat 升级到 tomcat8 的时候,进行服务启动异常,报 jar 包冲突的 ...
- K3S系列文章-使用AutoK3s在腾讯云上安装高可用K3S集群
开篇 <K3s 系列文章> <Rancher 系列文章> 方案 在腾讯云上安装 K3S 后续会在这套 K3S 集群上安装 Rancher 方案目标 高可用 3 台master ...
- [EULAR文摘] 超声对已获临床低活动度RA患者病情复发的预测
标签:eular文摘; 超声评估; 病情预测 超声对已获临床低活动度RA患者病情复发的预测 Lamers-Karnebeek FBG, et al. EULAR 2015.Present ID: OP ...
- CCRD_TOC_2007_EULAR专辑_1
中信国健临床通讯 EULAR 2007专辑I 目 录 类风湿关节炎 1 TEMPO 研究第一年影像学数据显示:骨侵蚀修复 (repair) 几乎只出现在无关节肿胀或肿胀改善组 van der Heij ...
- B树,B-树,B+树和B*树
B树和B-树(平衡多路查找树)规则:1.排序方法:所有结点关键字按递增次序,并遵循左小右大的原则.2.子结点数:非叶子结点的子结点数>1且<=M且M>=2,空树除外(M阶代表一个树的 ...
- vue - 环境变量和模式
1.在项目根目录中创建.env 或者 .env.xxx 的文件来指定环境变量 .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mo ...
- Google Webstore Config
1.使用Edge浏览.下载并安装 iGG谷歌访问助手 - Microsoft Edge Addons 登录https://microsoftedge.microsoft.com/addons/sear ...
- Too many requests in 1 hour. Try again later.的解决办法
原因 你的梯子用的人太多了,openAI本身就有问答频率限制. 解决办法 换个相对独立,没那么多人用的梯子,找个"安静点"的地区.
- 数据库原理-SQL查询语句
参考书籍<Oracle 数据库开发与应用> SQL查询语句,针对数据库中的表提供了各种查询功能.这里分为五个部分,说明在SQL中如何对数据进行查询. 简单查询 SELCET语句是最简单的S ...