2020年07月_DaftJayee

原创项目打包上线细节

一、在根目录src下创建vue.config.js如果不进行这一步，运行npm run build将可能导致路径不对的问题module.exports = { baseUrl:'./',}//详细配置参考：https://www.jianshu.com/p/b358a91bdf2d//写上面这里后理论上就可以提交了，公司自然会有运行index.html的环境//但是这样本地还是看不到的，想要本地能看到index.html内容的话进行第二步二、在router/index.js中将

2020-07-31 00:03:46 312

原创 Vue路径传值（$router.push({query:{})）

一、传值起始组件export default {methods: { toDetails(item){ this.$router.push({ path:"/details",//目标路径 query:{ item,//要传的值 } })

2020-07-30 23:47:29 3276

原创 Vue利用keep-alive请求性能优化（当将要请求的数据和已请求数据一致时，不进行请求）

一、情景：在选择城市功能中已经选择了上海，再次选择上海，则不应该重复对上海数据的请求二、在App.vue中加一层keep-alive<template> <div> <keep-alive> <router-view></router-view> </keep-alive> </div></template>三、Home.vue中操作data和相关生命周期

2020-07-30 18:28:44 386

原创 Vue首页根据名称显示数据

一、前提已经做过：1.懒加载路由https://blog.csdn.net/qq_43540219/article/details/1076714462.store.js的传值和localStorage的本地存储https://blog.csdn.net/qq_43540219/article/details/107692393二、 Home.vue:import {mapState} from 'vuex'computed:{ ...mapState(["cityName

2020-07-30 18:08:53 406

原创 Vue跨父组件传值（利用vuex）以及传值后本地存储记录值（借助localStorage）

2020-07-30 16:47:35 350 1

原创 Vue懒加载路由

一、目录结构：src| component| home| Home.vue city| City.vue router | index.js二、实现目标：上图是Home.vue,点击左上角的“北京”跳转到City.vue进行城市选择三、设置路由router/index.js const routes = [ { //打开网站直接显示Home.vue path: '/', name: 'Home', com

2020-07-29 18:00:28 113

原创 Vue请求接口渲染数据(利用axios)

一、下载axiosnpm install axios -S二、引入axios在main.js中//引入axiosimport axios from 'axios'Vue.prototype.axios=axios三、在组件中连接接口（这里以一个父组件传到子组件的过程来示例）Home.vue（父组件）中：export default {data (){ return{ spikeList:[],//定义一个数组用于存放接口传递过来

2020-07-29 16:01:18 4262 2

原创 [CSS]height:100%和rem存在的误差

一、当父元素height:3.2rem，子元素height:100%可以很明显的看到图片(子元素)下面有黄边(设置的父元素的背景颜色)父元素实际height:子元素实际height:二、当父元素height:3.2rem，子元素height:3.2rem可以看到子元素已经完全覆盖父元素背景颜色部分(下方没有黄边溢出)，但是下面依然留有白边(实际上父元素还是更大，也就是包括下面白色的部分）父元素实际height:子元素实际height:第一次父元素超过子元素3.2px第二次父元

2020-07-28 01:21:10 1561

原创用v-for配合swiper渲染图片

<template> <div class="tabs"> <swiper :options="swiperOption">  <swiper-slide>  <!--原因：https://blog.csdn.net/qq_43540219/articl

2020-07-27 17:12:00 937

原创 Vue渲染图片的放置位置

要渲染的图片应该放在public文件夹中，因为public能直接从浏览器被访问到

2020-07-27 16:51:12 2063

原创 Elements in iteration expect to have ‘v-bind:key‘ directives.‘

解决方式一：更改vetur配置Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。更改vetur配置 vscode->首选项->设置->搜索（vetur）“vetur.validation.template”: true,改成：false解决方式二：设置对应的key在学习vue过程中遇到Elements in iteration expect to have ‘v-bind:key’ directives.’ 这个错误，查阅资料得知V

2020-07-27 16:38:15 33709

原创 vue-swiper添加option无效

可能是css和vue-swiper的版本不统一导致的，去package.json中改到正确的版本执行命令npm install添加正确的依赖即可

2020-07-27 16:35:38 1565

原创使用iconfont的一些注意点

iconfont官网：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a下载的文件中iconfont.css放入src/assets/css文件夹这些放入src/assets/font文件夹，然后修改iconfont.css中的路径，在路径前面加上"../font"使用的时候class里一定要有iconfont类，否则会显示成方块...

2020-07-25 16:15:42 283

原创 stylus

一、stylus的文件是.styl二、style中的样式引入@import '~@/assets/var.styl'三、stylus语法 $bg=orange

2020-07-25 13:47:35 118

原创 vue样式模块化和样式穿透(样式穿透一般用于在样式模块化(scoped)的情况下想要修改第三方组件)

style1》style模块化（如果不做模块化，那么当在B组件中引入A组件时，A组件里的样式也会影响到B组件，所以要在styel标签加上scoped使其模块化） <style scoped>2》样式穿透scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。格式：父元素 >>> 子元

2020-07-25 13:47:04 398

原创 Vue路由（单页面应用）

一、安装输入命令：winpty vue.cmd create 项目名选择第二个按空格选上Router然后一路回车，等待安装安装完后src中多了router.js（也可能是带有一个index.js的router文件夹）以及views文件夹启动项目后可以发现多了一个 “|About” 可进行单页面切换二、路由完整流程一、template的设置部分<template> <div> <router-view></router

2020-07-24 23:02:30 596

原创 vue与后台交互axios安装与使用

axios（不是基于Vue的，基于Promise）1》下载：npm install axios --save2》引入axios import axios from 'axios' Vue.prototype.axios = axios3》使用 this.axios.get("路径").then()

2020-07-24 16:21:04 228

原创 vue组件的基本传值方法

***组件的通信（传值）1》父组件传子组件父组件： <子组件 :变量=数据></子组件> 子组件： props:['变量']2》子组件传父组件（自定义事件）子组件： this.$emit("自定义事件名称",'值') //自定义事件名称也就是下面的changeStr 父组件： <Footer @changeStr='changeBtn'></Footer> methods:{

2020-07-24 15:40:20 110

原创 vue实现简易购物车功能

vue实现简易购物车功能<template> <div> <table v-if='list.length > 0'> <thead> <tr> <td>序号</td> <td>商品名称</td> <td>商品单价</td>

2020-07-24 15:04:43 151

原创 vue的一些简单指令

vue的一些简单指令1》什么是指令：在节点上带有v-xxx的内容2》v-bind v-bind:value、v-bind:img 简写 :value3》v-on v-on:click、v-on:mouseover 简写： @click4》v-text 、 v-html 5》数据双向绑定:v-model 双向绑定的原理：发布者--》订阅者6》v-once：也可以插入值，但是不更新数据7》条件渲染 : v-if、v-else8》列表渲染 : v-forv-for='i

2020-07-23 21:53:38 106

原创 vue模板语法与计算属性

一、数据 <script> export default { data () { return { } } } </script>二、模板语法{{ 数据 }}三、计算属性 computed:{ } DEMO：<template> <div> <h1>{{ changeStr }}</h1> </div></template>&

2020-07-23 15:52:27 434

转载 InnerHtml与html( )的区别

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。innerHTML 是从对象的起始位置到终止位置的全部内容,包括Html标签我原本一直以为innerHTML和jquery里的html其实是完全一样的，jquery是多此一举了，直到我遇到一次问题看个示例：代码如下:var tbody=document.createElement('tbody');tbody.innerHTML

2020-07-23 15:23:56 575

原创 Vue的安装，项目启动，项目目录结构

一、vue-cli3.x安装命令：npm install -g @vue/cli二、安装完以后的测试vue --version三、创建vue项目cmd窗口：vue create 项目名警告：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作(不能用键盘的上下键控制选项)。你必须通过 winpty vue.cmd create 项目名启动这个命令。四、项目目录结构.git（隐藏文件） ===》git initnode_modules ===》

2020-07-23 15:18:12 285

原创 git的使用

一版本控制：version controlsvngit版本控制：解决多人开发的过程，容易引起文件冲突a—1b—2c—3d—cgit版本控制工具git 具有svn的功能git 具有互联网的特性****git 分支git 客户端 github 服务器端二 git的安装和使用：1 安装和配置dos git --version创建全局的账户和邮箱： git config --global user.name "user_test" git config --gl

2020-07-22 21:39:18 93

原创什么是闭包，如何应用闭包

一、作用域和作用域链当函数声明的时候，函数会通过内部属性[scope]来记录创建范围DEMO1：var str = '123';function fn(){ var str = '456'; console.log( str );}fn();输出结果：456二、闭包什么是闭包：闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。第一句话（得到的理解）：2个函数，2个函数作用域[scope]还要连接上;第二句话（得到的理解）：关闭函数的变量自由：它暂时

2020-07-22 19:21:15 254

原创 JS垃圾回收机制

一、什么是垃圾回收垃圾回收是一种自动的内存管理机制。当计算机上的动态内存不再需要时，就应该予以释放，以让出内存。直白点讲，就是程序是运行在内存里的，当声明一个变量、定义一个函数时都会占用内存。内存的容量是有限的，如果变量、函数等只有产生没有消亡的过程，那迟早内存有被完全占用的时候。这个时候，不仅自己的程序无法正常运行，连其他程序也会受到影响。好比生物只有出生没有死亡，地球总有被撑爆的一天。所以，在计算机中，我们需要垃圾回收。需要注意的是，定义中的“自动”的意思是语言可以帮助我们回收内存垃圾，但并不代表我们

2020-07-22 18:23:01 252

原创 JS栈内存，堆内存，消息队列

**栈内存，堆内存，消息队列**栈内存：1、基本类型2、按值访问3、存储的值大小固定4、系统会自动分配内存空间5、空间小，运行效率高6、先进后出堆内存：1、引用类型2、按照引用访问3、存储大小不固定4、内存分配：由代码进行分配5、空间大，运行效率较低6、无序存储（根据引用直接获取）函数也是存在堆内存中setTimeout的function会放到消息队列中(不论有没有带时间参数)，消息队列中的任务会等其他执行完后再执行DEMO1： for(int i=0;i<

2020-07-22 18:12:59 209

原创创建ES6项目流程

一.新建好一个文件夹（比如ES6-demo）打开文件夹，在文件夹中新建一个webpack.config.js配置： const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports={ entry:{ index:'./src/index.js' }, output:{ path:__dirname + '/public', filename:'./js/[name].j

2020-07-22 14:06:32 683

原创 “==“,“===“,“object.is()“的区别

Object.is()ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。Object.is('

2020-07-21 17:36:01 274

空空如也

空空如也