是时候开始写总结了-今日总结-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单页面制作

最新文章

热门文章