自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 base64加密后字符串自动换行问题

最近项目中有需要对一个字符串进行base64加密,一开始没太在意,直到遇到了一个很长的字符串,程序报错。经排查发现是base64加密后的字符串自动换行了,导致变量找不到。当编码的字节较长时,base64加密字符串,rfc规范规定每76个字符换一次行,encode出来的字符串会自动加入\r\n 进行自动换行。针对这种问题,只需在加密后把换行符替换掉就可以了BASE64Encoder coder = new BASE64Encoder();coder.encode(xxx).replaceA..

2020-07-16 11:11:51 91

原创 Vue初学36-vuerouter参数传递

传递参数的方式 params的类型 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abcquery的类型配置路由格式: /router, 也就是普通配置传递的方式: 对象中使用query的key作为传递方式传递后形成的路径: /router?id=123, /router?id=abc...

2020-07-02 17:48:20 37

原创 Vue初学35-箭头函数的使用

定义函数的方式1. function方式const f = function(){}2. 对象字面量方式 const obj = { f() { } }3. es6中箭头函数 const f = (参数列表) => { }3.1 多个参数的情况const sum = (num1, num2) => { return num1 + num2 }3.2 一个参数的情况,省略参数() const power =

2020-06-30 17:05:44 49

原创 Vue初学34-vue-router的使用

vue-router简介 vue-router是Vue.js的官方路由插件,它和vue.js是深度集成的,适合用于构建单页面应用(SPA)。 vue-router是基于路由和组件的,路由用于设定访问路径,将路径和组件映射起来,在vue-router的单页面应用中,页面的路径改变就是组件的切换。 切换组件的过程不会重新发送请求,只是在前端进行组件的切换。vue-router基本使用下面以cli2为例,演示下vue-router的基本使用通过命令,新建...

2020-06-16 16:31:12 69

原创 Vue初学33-cli脚手架的使用

webpack手动安装loader和其他的依赖非常麻烦。通过脚手架可以自动搭建项目所需的环境,安装所有的依赖,省去了手动配置的繁琐。cli的具体介绍可参照官网cli官网cli的安装cli需要node的版本在8.9以上,安装前请先确认node的版本。通过命令,全局安装新版本的clinpm install -g @vue/cli如果要使用旧版本,比如2.x版本,可以使用命令全局安装一个桥接工具npm install -g @vue/cli-init这样就可以同时支持2.x

2020-06-09 11:36:36 279

原创 Vue初学32-搭建本地服务器

在项目开发测试的时候,每次修改了代码都要执行命令npm run build重新打包,非常繁琐。通过搭建本地服务器,测试的时候能够实时刷新,测试完成后,只在发布的时候打包一次,避免了每次修改都要重新打包。

2020-06-05 11:14:55 88

原创 Vue初学31-插件的使用

插件(plugin)是对现有框架的扩展,使用前需要安装和配置。bannerplugin是webpack自带的插件,用于为打包的文件添加版权声明。HtmlWebpackPlugin插件可以根据模板自动生成index.html文件,并自动将打包后的js文件添加到body中。在发布之前,往往需要对js等文件进行压缩处理,需要uglifyjs-webpack-plugin插件

2020-06-04 15:56:15 97

原创 Vue初学30-vue组件化的使用方案

vue在使用时是通过el属性与dom元素绑定,dom元素在html文件中,如果将dom元素都放在html文件中,随着页面的复杂,元素会越来越多,可读性差,维护起来也不方便。因此,需要采用组件化的思想组织页面元素。

2020-06-03 11:21:52 63

原创 Vue初学29-webpack安装vue

项目中要想使用vuejs,必须对vue添加依赖。通过命令npm install vue --save安装vue

2020-06-02 09:35:38 61

原创 Vue初学28-webpack图片文件

使用webpack打包的时候,如果有文件用到了图片文件,同样需要安装相应的loader。url-loader在文件大小(单位 byte)低于指定的限制时,可以返回一个 base64编码的DataURL。如果图片大小超出了limit限制,是采用file-loader加载的。

2020-05-25 13:32:57 72

原创 Vue初学27-webpack样式文件的配置

介绍webpack打包css和less文件,包括css-loader的安装,style-loader安装,less-loader和less的安装,less安装的版本问题,webpack.config.js的配置等。

2020-05-20 14:51:18 117

原创 Vue初学26-webpack配置

介绍webpack.config.js,package.json的配置方法,局部webpack的安装方法。

2020-05-19 16:14:47 55

原创 2048算法分析

2048算法是消除类里面比较经典的算法,通过分析算法原理,用C#实现了算法。

2020-05-08 15:33:08 251

原创 Vue初学25-webpack的基本使用

webpack是代码编译工具,可以实现代码的打包,其最大的特点是实现了前端模块化。webpack是依赖于node环境的,因此,使用之前需要安装node。node的较新版本中一般都自带了npm(node package manager)。下面用一个小例子,说明基本使用方法。

2020-04-30 15:27:27 126

原创 Vue初学24-前端模块化

随着前端的功能越来越复杂,代码量越来越多。如果众多的js文件不采用模块化的方式管理,势必会遇到一个问题,那就是全局变量重名。相信很多前端开发者都遇到过这个问题。通过匿名函数加返回值的方式实现模块化是比较繁琐的,es6中已经帮我们实现了模块化。在引用js文件的时候,通过添加type="modual"属性,各个js文件实现独立,通过export和import,各js文件实现交互。

2020-04-27 09:10:35 111

原创 Vue初学23-作用域插槽的使用

由于作用域的限制,父组件在替换子组件的插槽时只能引用父组件中的数据。如果父组件在替换子组件插槽是要用子组件中的数据,就要用到作用域插槽。子组件中的slot要动态绑定一个属性,用于传递数据,例如:data="xxx",父组件在替换slot的时候,早期版本需要用到template标签,绑定slot-scope="yyy"属性,然后通过绑定的yyy引用slot中传递的数据。

2020-04-24 14:12:56 111

原创 Vue初学22-具名插槽(slot)的使用-标题导航栏为例

以标题栏为例,举两个例子说明,具名插槽的基本使用方法。

2020-04-23 09:13:00 263

原创 Vue初学21-slot(插槽)的基本使用

在使用组件时,经常会用到一些相似的组件,这些组件有很多共性,但又不完全相同。如果将这些组件都封装成不同的组件,会出现很多重复的代码,难免浪费资源。为了提高组件的复用性和可移植性,组件中如果有些地方可以让用户来决定放什么东西,那组件的使用就变得非常灵活。slot正是为了解决这个问题。

2020-04-21 09:32:27 73

原创 Vue初学20-父子组件间的引用-子组件引用父组件

父子间引用子组件用的比较多,子组件引用父组件用的相对较少。子组件引用父组件使用$parent。

2020-04-20 10:45:09 106

原创 Vue初学19-父子组件间的引用-父组件引用子组件

上两篇提到父子组件间的通讯可以通过数据传递的方式,通过props和$emit。父子组件之间还可以相互引用,父组件拿到子组件的实例,进而调用子组件的属性和方法等。反之,子组件拿到父组件的实例也是一样。先看下父组件如何引用子组件,两种方式$children和$refs。

2020-04-17 17:22:44 63

原创 Vue初学18-父子组件间的数据传递-子传父

父子组件间的数据传递,父传子通过属性props,子传父通过事件$emit应用场景如下:子组件有一个列表,子组件的列表被点击后,将被点击的列表项数据传递给父组件。

2020-04-15 11:21:54 56

原创 Vue初学17-父子组件间数据传递-父传子

组件之间的数据通讯需要通过参数传递,父组件传递给子组件通过props属性,结合属性的动态绑定实现。props中有相应的属性和父组件中要传递的属性对应,相当于中间桥梁。子组件无法直接引用父组件中的数据。

2020-04-09 16:54:32 28

原创 Vue初学16-组件中的数据绑定

组件是为了复用,因此,组件中的数据不可能是一成不变的,往往也需要动态绑定数据。组件中也支持data属性,但是data是全局的,组件的所有实例都共享data。相同组件在使用时,数据必须独立,这样才有意义,因此,data数据的返回通过函数返回,因为函数是独立的作用域,能够确保不同组件实例,数据是独立的。以简单的计数器为例,如下

2020-04-04 17:11:24 60

原创 Vue初学15-组件语法糖

上文中提到组件使用需要三个步骤,创建,注册,使用,比较繁琐。vue提供了一个简便写法,可以将创建和注册合并成一个步骤。将对象直接放到component的第二个参数。也可以通过template标签,将组件模板摘出放到外面

2020-03-28 20:46:30 115

原创 Vue初学14-组件的基本使用

组件化开发可以实现模块化,提高代码复用率,而且界面会更加整洁。组件使用的步骤:创建组件,注册组件,使用组件

2020-03-26 16:01:15 40

原创 Vue初学13-v-model修饰符

v-model三个比较常用的修饰符:lazy(延迟加载),number(只允许输入数字),trim(去除空格)

2020-03-25 15:10:09 51

原创 Vue初学12-v-model

v-model指令用于组件和数据的绑定,是双向绑定,值绑定。v-model绑定的简单的原理。

2020-03-24 09:12:57 50

原创 Vue初学11-高级函数

举例说明filter函数(有条件过滤),map函数(改变数据元素的值),reduce函数(数据汇总)的基本使用方法。

2020-03-22 20:43:39 39

原创 Vue初学10-总结练习

实现如下图类似购物车效果。用到的知识点:v-for遍历数组,@click事件绑定,methods函数定义,计算属性(totalprice),过滤器(priceformatter),动态属性绑定(:disabled),v-if,v-else隐藏dom元素

2020-03-20 10:37:37 39

原创 Vue初学09-v-for遍历

v-for指令可以用于遍历数组和对象,用列表展示遍历结果。

2020-03-19 11:10:25 48

原创 Vue初学08-条件指令(v-if,v-else-if,v-else)

1.条件判断根据属性值的不同显示不同的结果,如下根据分数的不同显示不同的等级。2.控制dom的显示通过v-if还可以控制dom元素的显示,v-if="true"表示显示,v-if="false"表示隐藏

2020-03-18 09:50:55 40

原创 Vue初学07-事件修饰符

1.stop修饰符相当于调用 event.stopPropagation(),阻止事件冒泡2.prevent修饰符相当于调用 event.preventDefault(),阻止默认行为3.键修饰符只当事件是从特定键触发时才触发回调,以回车键为例

2020-03-17 09:53:32 32

原创 Vue初学06-v-on

v-on用于绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。事件参数的设置,有参数情形,无参数的情形

2020-03-16 10:56:24 44

原创 Vue初学05-var和let的区别

es5中var定义的变量只有全局作用域和函数作用域,没有块级作用域的概念。es6中let有块级作用域,相当于是var的进一步完善。下面以按钮点击为例,一共5个按钮,绑定点击事件,点到第几个按钮,提示第几个按钮被点击。

2020-03-13 09:12:54 208

原创 Vue初学04-计算属性

计算属性computed,可以将属性进行拼接,计算生成新的属性,计算属性的结果会被缓存,效率较高。

2020-03-12 09:17:30 43

原创 Vue初学03-v-bind

v-bind用于动态地绑定一个或多个特性,或一个组件 prop 到表达式。v-bind 绑定src、href。v-bind绑定class。v-bind绑定style

2020-03-11 09:11:09 124

原创 Vue初学02-几个常用指令

1.v-once只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。2.v-html将内容按html插入,相当于更新innerHTML属性,建议在可信内容上使用,容易导致XSS攻击。3.v-text更新元素的textContent,与{{Mustache}}效果类似4.v-cloak这个指令保持在元素上直到关联实例结束编译。

2020-03-10 09:46:56 43

原创 Vue初学01-Vue的安装

vue的安装官方网站:vue官网,进入官网点击起步,初学可以采用直接引入的方式安装vue.js,下载开发版本的vue.jshello vue

2020-03-09 14:17:58 104

原创 js cookie的添加、获取、删除

cookie的添加、获取、删除在js中比较常用,方法也比较常规。cookie的添加/* 功能:保存cookies函数 参数:name,cookie名字;value值*/function SetCookie(name, value) { var Days = 1; //cookie 将被保存一天 var exp = new Date(); //获得当前时...

2020-02-27 17:10:06 108

原创 CSS设置行内元素和块级元素水平居中

默认的行内元素包括:a( 锚点) ,span(定义文本内区块)img(图片)input(输入框)select(项目选择)strong(粗体强调)label(标签)cite(引用)code(计算机代码)等。默认的块级元素包括:divul(无序列表)ol(有序列表)dl(定义列表)table(表格)form(表单)h1(一级标题))p(段落)pre(预格式化)等。行内...

2020-02-24 10:44:18 153

提示
确定要删除当前文章?
取消 删除