weixin_41766191的博客

转载 Vue中css过渡动画原理

先来看一下简单的切换显示按钮我现在希望在Hello world能有一个渐隐渐现的效果那么就需要在div外层包裹一个transition标签当然只是这样是无法形成过渡效果的当你在外层加了transition标签之后，Vue会自动的构建一个动画的流程，当动画执行的一瞬间，他会往内部的div上增加两个class名字，分别是fade-enter和fade-enter-active，之所以是...

转载 SCSS

Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。变量变量用来存储需要在CSS中复用的信息，例如...

转载 什么是MVVM，MVC和MVVM的区别，MVVM框架VUE实现原理

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方...

转载 vue中出现 There are multiple modules with names that only differ in casing的问题

1、浏览器中的console出现： There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.原因：import时，文件引入的路径...

原创 Error in v-on handler: "ReferenceError: Vue is not defined"

代码没有引入 Vue模块

原创 es6数组方法find()、findIndex()与filter()的总结

find()该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。...

转载 js 中clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen.height每个HTML元素都具有clientHeight off...

原创 s基础进阶--关于Array.prototype.slice.call(arguments) 的思考

Array.prototype.slice.call(arguments)的作用为：强制转化arguments为数组格式，一般出现在框架活插件的源码中如何理解上面的代码等价于[ ].slice.call(arguments)或者随便一个数组调用都行 [1,2,4].slice.call(arguments)因为，前面的调用者的作用只是沿着原型链向上找，最终找到Array为止，slice为A...

原创 slice 和splice区别？

他们的共性是都可以操作数据，截取一段数组，一、slice(start，end)从start开始截取到end但是不包括end返回值为截取出来的元素的集合原始的数组不会发生变化//例子var arr1 = [1,23,44,55,66,77,888,“fff”];var arr2 = arr1.slice(2,4) //从index为2截取到index为4之前不包括4console.l...

原创 stylus进一步补充更新 更强大

Stylus介绍Stylus是一个CSS的预处理框架，Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。什么是CSS预处理技术？CSS预处理技术，是指用一种新语言用来为CSS 增加可编程的的特性，无需考虑浏览器的兼容性问题。你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强。Stylus默认使用...

原创 css预编译stylus以及在vue中使用stylus

引用stylus官网中的一句话：富于表现力、动态的、健壮的 CSSstylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数mixin.styl:使用非常简单安装stylus，使用npm安装,stylus和stylus-loader，一个都不能少npm install stylus stylus-loader --save...

原创 mock.js前后端分离开发之后端模拟数据

1.1 简单介绍一下Mock.js众所周知Mock.js因为两个重要的特性风靡前端:数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截 Ajax 请求不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。安全又便捷第一步 根据项目需要，设计json数据第二步 配置mockServer.js第三步 利用vue 打包编译执行 main...

原创 mint-ui 使用

原创 美食城外卖app 项目开发过程中遇到的几个问题，以及解决方法

项目中遇到的问题：一：mysite 导航制作 2个问题1：轮播导航页面显示 第一个问题 将vuex store种储存的state的categorys 商品分类数组获取后，变化为2维数组，显示导航几页，每页至多8个元素2：延迟到界面数据更新之后立即创建swiper对象 怎么做？This.$nextTick(function(){创建swiper对象})二：star组件的实现过程（逻辑）...

原创 vue映射函数mapState mapActions mapMutations mapGetters

通过扩展运算符，将store里的state/actions/mutations/getters的属性或者方法直接映射到当前vue对象的this上，使用时直接this。xxx使用前需要先引入

原创 vuex异步显示当前地址

vuex异步显示当前地址第一步：异步请求 this.$store.dispatch(“getAddress”) 更新state第二部 读取数据import {mapState} from “vuex”computed:{// 读取state的地址信息…mapState([“address”])},第三步 动态绑定数据 ...

原创 vuex 发异步请求的2种方法

vuex 发异步请求的2种方法1：注释的那种，导入mapActions， 然后在methods里 用 …mapActions([“getAddress”]) 将getAddress 映射成方法，最后在mounted（）{} 调用改方法，发送异步请求2： mounted(){this.$store.dispatch(“getAddress”)},...

原创 vuex报错__WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor

造成该错误的原因是 store 小写造成的，Vuex,Store({})改为大写就好了Vue.use(Vuex) ，否则报错，引用Vuex,Store({})之前，需要先Vue.use(Vuex)

原创 vue 项目用vuex管理状态

第一步 项目下 安装vuex状态包以当前项目来讲，需要管理的状态，1 当前商家地址 2 是 轮播导航，3 商家列表地址是个对象，轮播导航和商家列表都是数组...

原创 js es6遍历对象的6种方法（应用中推荐前三种）

1.for … in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).const obj = {id:1,name:‘zhangsan’,age:18}for(let key in obj){console.log(key + ‘—’ + obj[key])}2.Object.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Sy...

原创 vue项目前后端分离开发中遇到的跨域问题以及解决方式

因为是自己写前端也要自己写接口,我使用的nodejs+express开的服务写接口但是vue 项目 运行调试时会占用一个端口而node开启服务也许要监听一个端口两者虽然都是在一个ip地址,但是端口不同也就造成了跨域问题的出现虽然可以在后端方面(node)通过安装cors包 解决,但是cors是指定对应的ip和域来访问,如果换个端口什么的,就还是会有跨域问题的出现,所以就想到了使用 vue...

原创 vue使用git 对项目进行版本控制

1 生成本地仓库git initgit add *git commit -m init “init foodpalace”2创建远程仓库登陆github3 将本地仓库推送到远程仓库先关联 再推送

原创 vue axios对ajax的二次封装

// ajax请求函数模块 返回值是一个promise对象import axios from ‘axios’export default function ajax(url, data = {}, type = “GET”) {return new Promise(function (resolve, reject) {// 执行异步ajax请求let promise// 准备url...

原创 es6箭头函数补充

es6学习笔记10–箭头函数基本用法ES6允许使用“箭头”（=>）定义函数。var f = v => v;上面的箭头函数等同于：var f = function(v) {return v;};如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。复制代码var f = () => 5;// 等同于var f = function () { r...

转载 es6 const,let详解

let：声明的是变量1、不存在变量提升// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;上面代码中，变量foo用var声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出und...

原创 es6箭头函数详解

箭头函数是es6新增的非常有意思的特性，初次写起来，可能会觉得别扭，习惯之后，会发现很精简.什么是箭头函数?箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性:不能通过new关键字调用没有原型, 因为不能通过new调用，所以没有原型没有this, super，arguments和new.target绑定, new.target和super关键字是es6新增的箭头...

原创 启动后台应用，测试接口api以及postman简单使用教程

1.启动后台服务下载安装postman, 导入 文档 后缀.jsonhttps://blog.csdn.net/m0_37624078/article/details/84629737 postman详细中文教程地址

原创 swiper的简单使用教程

什么是swiper?Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文...

转载 vue.js 种 slot的理解

Slot的通俗理解插槽就是动态交互父子组件之间的数据的机器臂是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；slot 使用 可以传递内容 也可以传递标签理解：1.假如子组件没有slot插槽，父组件的内容将被会丢弃2.假如子组...

原创 阿里巴巴矢量图标库项目中使用svg格式字体图标 3种使用方式

iconfont 介绍a. 意义：使用字体用 HTML 代码以文本的形式直接在网页中画 icon 小图标。b. 为什么使用 icon 字体图标: 使用图标字体可大大减少图标维护工作量。c. 灵活性：轻松地改变图标的颜色或其他 CSS 效果。d. 可扩展性：改变图标的大小，就像改变字体大小一样容易。e. 矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度。f. 兼容性：字体图标支持...

原创 vue 项目运行中热更新报错 log.error('[WDS] Errors while compiling. Reload prevented.');

log.error(’[WDS] Errors while compiling. Reload prevented.’);中的WDS其实是webpack-dev-serverwebpack的意思，用来实现自动刷新的。但你在Vue组件进行频繁刷新时，如果没有安装Webpack，虽然页面可以正常显示，但是控制台会在你每次刷新时就报错。解决方法是：在开发目录下安装Webpack，命令为npm insta...

原创 vue stylus格式化问题

翻译 vue 路由传值的4种方法

对应的路由配置模块1、使用router.push拼接参数传参this.router.push 拼接参数传参 this.router.push拼接参数传参this.router.push(’/editCardetail?editType=add’)2 当点击 时，这个方法会在内部调用，即点击 等同于调用 router.push(…)a) 声明式：b) 编程式...

原创 this.$router.push、replace、go的区别

1.this.$router.push()描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。用法：2.this.$router.replace()描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，不能跳转到上一个页面3.this.$router.go(n)相对于当前页面向前或向后跳转多少个页面,...

原创 vue-router入门（2）—— 命名视图，重定向和别名

关于vue-router的入门，个人感觉官网的东西写的有点乱，所以打算整理一些场景搭配使用。所以可能会漏掉一些个人觉得几乎用不到的功能。有兴趣的可以去官网看完整版。1.命名视图需求：首页的头部比较特殊，我们以颜色区分，首页可能需要用到一个绿色的header，其他页面的头部则用红色的header。我们通过命名视图（name），来设置不同的路由中用不同的header和main模板。用命名视图实现...

转载 vue2.0中的$router 和 $route的区别

最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和 $route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个...

转载 jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

js中常用追加元素的几种方法我是第一个子元素我是第二个子元素appendappendToprependprependToafterbeforeappendChildinsertAfterinsertBefore以下是单击每个按钮之后的效果。https://blog.csdn.net/qq_29347295/article/de...

原创 css+div 画三角形原理

参考地址https://www.cnblogs.com/stoprunning3/p/3528154.html

转载 快速理解npm install时--save和--save-dev的区别

dependencies和devDependencies在使用node开发时， 我们在工程中用到的包必须是package.json中列出。而dependencies和devDependencies是package.json中的两个属性. 我们要用的包在这两个属性中列出即可.dependencies列出的包用于生产环境.devDependencies用于开发环境和测试环境.-save和...

翻译 浏览器Vue-devtools工具安装

默认安装需要打开goole网站，需要跳墙，这里下载它的代码来安装吧……git clone https://github.com/vuejs/vue-devtools.gitclone完成后，进入vue-devtools目录，首先执行命令npm install安装依赖：然后编译npm run build生成插件:打开Chrome浏览器的扩展程序：勾选开发者模式，才会显示箭头指向的两个按钮...