- 博客(36)
- 收藏
- 关注
RSS订阅原创 vue中$nextTick的用法(视图渲染完，操作dom)
vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要...
2018-12-28 10:02:11
19152
原创 js--ajax异步交互
一、什么是AjaxAjax（Asynchronous JavaScript and XML的缩写）是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax目的：提高用户体验，较少网络数据的传输...
2018-12-24 12:19:07
609
原创 gitHub的使用
简单的使用：https://blog.csdn.net/north1989/article/details/53471439一、首先你已具备github账号并登陆1.登录成功后，在github上新建一个仓库，存放上传的项目代码。经过以上步骤，我们已经在github上建立了一个远程的仓库，接下来，需要在本机环境下搭建git环境，使用git命令将本地项目推送到远程git仓库中。...
2018-12-22 11:36:18
251
转载 webpack入门
参考文献： https://blog.csdn.net/qq_39207948/article/details/79436644什么是WebPack，为什么要使用它？为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法模块化，让我们可以把复杂的程序细化为小的...
2018-12-21 12:18:07
324
原创 使用yarn代替npm构建Vue项目
看到这个标题的时候，相信有些小伙伴会带有疑问，为什么明明可以使用npm来构建vue项目，现在却偏偏要使用yarn呢？最简单最直接的原因是因为它快！并且要比你用npm快很多！如果你想了解的更全面，我们来看yarn官方给出的解释Yarn 是一个依赖管理工具。它能够管理你的代码，并与全世界的开发者分享代码。Yarn 是高效、安全和可靠的，你完全可以安心使用。Yarn 能够让你使用其他开发者开...
2018-12-19 10:47:41
27491
6
原创 gitlab上克隆远程分支到本地（报错-error: RPC failed; curl 18 transfer closed with outstanding read data remaining）
首先确保你的电脑有安装git环境，本人使用的是windows下的git环境。双击桌面图标 的Git Bash 打开窗口修改配置git config --global user.namegit config --global user.email如：git config --global user.name "muzidigbig"git config --glo...
2018-12-18 15:02:18
2788
原创 gitlab--报错error: src refspec master does not match any.
git init 产生的目录解释error: src refspec master does not match any.引起该错误的原因是，目录中没有文件，空目录是不能提交上去的error: insufficient permission for adding an object to repository database ./objects服务端没有可写目录的权限错...
2018-12-18 11:26:33
3034
原创 gitlab的常规使用
一、在gitlab的网站创建一个projectAlt text定一个项目名，选定相关的项目设置，private，public等Alt text项目创建成功后，得到项目git@XXX.git 的地址，可用于将project从远程pull下来或者push上去。二、安装git之后本机的操作Alt text2.1git global setup设定本机用户名，绑定邮箱，让远程服务器...
2018-12-18 11:19:46
485
原创 js---Array对象的常用遍历方法
1.forEach(),遍历数组的每个元素 let arrFor = ['muzi','digbig','muzidigbig','lucky'] //forEach(),遍历数组的每个元素 arrFor.forEach((item,index) => { console.log(`${index}---${item}`) })2.ma...
2018-12-14 12:27:12
326
原创 js---null与空字符串""的区别
1、类型null表示的是一个对象的值，而并不是一个字符串。例如声明一个对象的引用，var a = null ;""表示的是一个空字符串，也就是说它的长度为0。例如声明一个字符串var str = "" ;2、内存分配var str = null ; 表示声明一个字符串对象的引用，但指向为null，也就是说还没有指向任何的内存空间；var str = ""; 表示声明...
2018-12-14 12:03:36
4815
1
转载 js---this、箭头函数
函数的时候绑定，而不是在执行函数的时候绑定，所以this指向定义时所在的作用域的this（它只会从自己的作用域链的上一层沿用thi s）。箭头函数中的this引用的是最近作用域中的this；即向外层作用域中，一层层的查找直到this的定义。箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是。
2018-12-13 16:31:23
288
1
原创 js---call()、apply()和bind()改变指针问题
函数才有this，对象无。call/apply/bind除了第一个参数后面的参数参数是传递给这个函数的,改变this后可以使用这个this所对应对象中的属性。1. 每个函数都包含两个非继承而来的方法：call()方法和apply()方法（天生的）；es6增添了bind()2. 相同点：这三个方法的作用是一样的。3.某个函数名.call()/apply()相当于是调用了这个函数，只不过这里...
2018-12-11 17:17:11
888
1
原创 Nuxt vuex状态树bug
nxut 的 状态树 官方网站有个BUG。竟然说不用 引入 vuex，比较坑的 ，其实是他那套nuxt-community/starter-template 不用引入而已，如果你从头开始搭建 是要引用的，npm install vuex --save ...
2018-12-11 15:28:57
510
原创 nuxt.config.js 的配置
nuxt.config.js 是 Nuxt.js 的配置文件，可以通过针对一系列参数的设置来完成 Nuxt.js 项目的配置，可以在Nuxt.js 官网 找到针对这个文件的说明，下面举例一些常用的配置：head: 可以在这个配置项中配置全局的 head ，如定义网站的标题、 meta ，引入第三方的 CSS、JavaScript 文件等： head: { title: '百姓店铺',...
2018-12-11 15:15:50
19595
1
原创 Nuxt 路由---03
Nuxt嵌套路由官网上的API详解：点击链接看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在<nuxt-child>区域显示一个页面内容怎么办？自己案例代码：pages/parent.vue<template> <div> <h2>父组件的页面的内容<...
2018-12-11 12:22:29
17319
原创 Nuxt 的 nuxt-link 有个坑
如果你跟着nuxt的案例走，记住 ，所以目录 比如 PAGES 目录 你最好小写 pages 所有目录都小写因为 当你敲下面哪行代码 时 <nuxt-link :to="{name: 'posts-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>name其实指向的是路由，而路由死活...
2018-12-10 10:50:44
4347
原创 Nuxt引入第三方插件的方法 比如jQuery
使用npm安装npm install --save jquery1. nuxt.config.js 中进行配置const webpack = require('webpack')module.exports = { build: { plugins: [ new webpack.ProvidePlugin({ ...
2018-12-10 10:47:36
2114
原创 vue验证码组件
代码如下：<template> <div class="join_formitem"> <label class="enquiry">验证码<span>:</span></label> <div class="captcha&q
2018-12-08 12:04:03
1072
原创 Nuxt 静态资源和打包
直接引入图片我们在网上任意下载一个图片，放到项目中的static文件夹下面，然后可以使用下面的引入方法进行引用。<div> <img src="~static/logo.png"></div>这时候在npm run dev 下是完全正常的，那我们看一下打包。打包静态HTML并运行用Nuxt.js制作完成后，你可以打包成静态文件并放在服务器上，...
2018-12-08 10:54:00
5259
原创 Nuxt.js asyncData()获取数据、nuxt反向代理跨域---05
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了asyncData(){……}。从名字上就很好理解，这是一个异步的方法。创建远程数据在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。我们打开网站，在对话框中输入JSON代码，这个代码可以自己随意输入哦。...
2018-12-08 10:47:22
42339
5
原创 Nuxt的错误页面和个性meta设置
当用户输入路由错误的时候，我们需要给他一个明确的指引，所以说在 应用程序开发中404页面时必不可少的。Nuxt.js支持直接再默认布局文件夹里建立错误页面。建立错误页面在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。<template> <div class="error"> <h...
2018-12-07 18:32:43
1499
原创 Nuxt的默认模板和默认布局（视图layout）---04
在开发应用时，经常会用到一些公用的元素/在每个页面中都有的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模板。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模板比较方便，但是只能每个页面都引入。默认模板Nuxt为我们提供了超简单的默认模板定制方法，只要在根目录下创建一个app.h...
2018-12-07 18:12:41
4729
原创 Nuxt的路由动画效果
路由的动画效果，也叫作页面的更换效果。Nuxt.js提动两种方法为路由提动动画效果，一种是全局的，一种是针对单独页面制作。全局路由动画全局动画默认使用page进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。/assets/css/main.css.page-enter-active,....
2018-12-07 17:18:43
1271
原创 Nuxt的路由配置和参数传递
学习前端框架都要学习路由机制，因为路由可以体现我们的业务逻辑，把模块串联起来，让程序换发光彩。那简单的说路由就是我们的跳转机制，也可以简单理解成链接跳转。Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。简单路由Demo我们现在在根目录的pages文件下新建两个文件夹，about和news(模仿关于我们和新闻的功能模块)在about文件夹下新建index.vue...
2018-12-07 17:06:36
1851
原创 Nuxt常用配置项
更改地址栏中的ico图标2.在创建nuxt项目是使用了esline，在编辑代码的时候受到影响，怎么注销掉esline3.端口被占用配置端口"config":{ "nuxt":{ "host":"127.0.0.1", "port":"1818" }}配置好后，我们在终端中输入： npm run dev
2018-12-07 16:20:25
5495
4
原创 Nuxt 目录结构(nuxt渲染流程)---02
assets: 资源文件。用于组织未编译的静态资源如 LESS、SASS或 JavaScript。放置不需要经过 webpack 打包处理的资源文件，如 scss，图片，字体等。 components: 组件。可以复用的组件。存放项目中的各种组件；注意，只有在这个目录下的文件才能被称为 组件 。 layouts: page: 创建自定义的页面布局。页面都需要有一个布局，默认为 defau...
2018-12-07 16:08:19
2824
原创 Nuxt项目环境搭建和Hello World---01
前提：在使用npm前你需要安装node到系统中 全局安装了vue-cli脚手架 安装了淘宝镜像（可选）以上安装方法：https://blog.csdn.net/muzidigbig/article/details/80490884安装nuxt一、官网提供的安装方式：（安装时就可安装的框架）搭建步骤1.打开命令提示符，进入到相关文件夹下；2.使用如下命令一步搭建项目...
2018-12-07 16:07:49
698
原创 window---页面跳转href+替换replace()+刷新reload()
window.location.href/replace()/reload()--页面跳转+替换+刷新一、最外层top跳转页面，适合用于iframe框架集top.window.location.href("${pageContext.request.contextPath}/Login_goBack");二、跳转的区别1.window.location.href=“url”：改...
2018-12-06 14:33:31
8636
原创 js---获取url、得到url？号后面的参数、replace()去除字符串的首尾空格
首先,我们这里有一个 url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic.我们访问访问这个地址,打开控制台,输入window.location,会得到如下图的结果一、获取路径/设置或获取对象指定的文件名或路径。alert(window.location.pathname);//设置或获取整个...
2018-12-06 12:03:33
3754
原创 js---随机产生n个不重复的Number类型的数/英文字母
一、随机产生n个不重复Number类型的数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
2018-12-05 17:26:29
1950
原创 使用vue-i18n实现多语言
一、前言1.需求 Vue工程，需要实现多语言切换功能。2.vue-i18n插件npm中对vue-i18n的描述及文档Internationalization plugin for Vue.jshttps://www.npmjs.com/package/vue-i18n我们将使用这个插件实现多语言。3.兼容性支持Vue.js 2.x以上版本项目结构二、...
2018-12-05 11:47:55
2085
原创 安装vue-cli/安装其他插件时-4058报错的解决方法
那么这到底是哪里出错了呢？查了一下，貌似是已经安装过脚手架以后，又想重新安装到其他目录时会报这样的错误。一、报错信息安装vue-cli/其他插件时-4058报错二、解决方法终端运行以下指令npm --registry https://registry.npm.taobao.org info underscore而后运行下面的指令npm install --glo...
2018-12-04 10:56:17
1698
转载 web---模块化、组件化、工程化理解（代码规范）
1. 什么是前端工程化自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的“切图（FE）->套模板（RD）”的开发模式，这种模式下的前端开发虽说不是刀耕火种的原始状态，但是效率非常低下。前端的工程化问题与...
2018-12-04 10:17:55
2482
原创 使用jquery.qrcode生成二维码及常见问题的解决方案
移动端二维码弹出框,自适应屏幕尺寸：网址https://github.com/iyangyuan/qrcodebox在线生成网址：http://tool.oschina.net/qr 一、jquery.qrcode.js介绍jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件（（可以从https://github.com/jeromeetie...
2018-12-03 18:38:24
5687
原创 Vuex(六)--Vue核心概念Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。 /** * 1) 包含多个 module *...
2018-12-02 17:07:05
593
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人