2018年07月_冰雪为融

原创 js随机产生不同颜色

方法一（随机RGB颜色值）##### //颜色对象 function getRandomColor(){ this.r = Math.floor(Math.random()*255); this.g = Math.floor(Math.random()*255); this.b = Math.floor(Math.random()*255); ...

2018-07-31 15:31:31 8354

在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。首先我们要知道，Vue中的过滤器不能替代Vue中的methods、computed或者watch，因为过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块...

2018-07-31 15:16:33 715

转载 Vue自定义指令深入学习

指令是可以写在DOM元素的小命令，他们以v-为前缀，Vue就能识别这是一个指令并保持语法的一致性。如果你需要对HTML进行底层操作的话，这种方式是非常有用的。如果你已经用过Vue或者Angular的话，对于v-if,v-else,v-show等指令就会比较熟悉了，但是我还是要介绍一些基础的知识，如果你更想直接看例子，可以直接看后文就好了。以下是使用指令的几种方法，以及示例，这些例子并不规范...

2018-07-31 15:07:06 283

转载 JSONPlaceholder - 免费的在线REST服务（提供测试用的HTTP请求假数据）

JSONPlaceholder 是一个提供免费的在线 REST API 的网站，我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数。或者当我们程序需要获取一些假数据、假图片时也可以使用它。网站地址：http://jsonplaceholder.typicode.com/其返回的数据为 JSON 格式，且同时支持 HTTP 和 HTTPS 这两种请求类型。一、GET...

2018-07-30 17:06:41 23925

原创利用vue实现的分页组件

/*使用组件：<pagination></pagination>组件中传入的属性有：1、total ：一共有多少条数据：必选参数2、prepage :一页展示多少条可选参数，默认值为23、show-page ：显示的页码数有多少可选参数，默认值为34、v-model ：当前活动的页码是多少必须参数且是动态参数哦，比如sPage */...

2018-07-30 14:57:51 3187 1

原创 vue如何跨域使用第三方接口

代理设置：在本地使用http://localhost:8080/ 访问第三方接口，会产生跨域，这时候需要设置代理的方式跨域访问第三方接口本地使用vue-cli搭建的项目，启动项目后，就是在http环境下的开发环境。直接可以设置代理的方式设置位置位于项目根目录下的config/index.js中的dev配置项的proxyTable中，设置如下： proxyTable: {...

2018-07-29 14:52:58 12964 3

原创 vue实现父子间的双向数据绑定的三种方法

主要是通过一个小例子用三种不同的方式实现，进而来介绍父子间的双向数据绑定css样式 <style> .red{color:red;} .yellow{color:yellow;} .green{color:green;} </style>第一种：父——>子通过props传递数据，子——>...

2018-07-28 17:33:19 1383

转载 css3中的content字符编码

content有5中属性content:""; // 为空content:attr(title); // 可以获取标签属性值也可以获取自定义属性值比如 css是 div:after{content:attr(gaga)}则可以获取到了123content:"我是谁"; // 填写字符串比如// css是div:after{content:"我是"counter(title)",...

2018-07-28 09:39:07 1065

原创利用vue实现的一些小案例

1、利用hash过滤数据核心代码：js代码：<script> var vm = new Vue({ el:'#app', data:{ isShow:'red' } }); function hash(){ var hash = window.location.ha...

2018-07-27 18:06:50 5215 2

原创没有后端，前端去哪里找到自己想要的数据接口？

不知道作为前端的你有没有和我一样的困惑，想要学好ajax，想要模仿真实的请求后端数据，但一直苦于没有后端支持，嗯，因为这个问题，我想了好多办法，在网上找各种数据接口，接口是找到了，但未必有自己想要的，刚好幸运是自己想要的，但居然要钱，还限制次数，甚至自己狠下心花钱买了数据接口，嗯，貌似还要处理处理才能得到自己想要的结果，好心塞呀今天就告诉您一个好用的能够快速生成模拟数据的网站，Easy m...

2018-07-26 17:36:18 9759 2

原创 Vue中自定义指令的学习总结

vue中除了内置的指令（v-show,v-model）还允许我们自定义指令想要创建自定义指令，就要注册指令（以输入框获取焦点为例）一、注册全局指令：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el,binding) { ...

2018-07-25 16:23:48 727

原创 vuex学习总结

嗯、vuex是有官网的：https://vuex.vuejs.org/zh/Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。使用Vuex：（先再根目录下建一个文件夹store，再新建一个index.js文件）//当然这不是必然的，你也可以随便起别的名字，但推荐这样命名哈安...

2018-07-24 16:02:27 249

原创 Vue组件中利用.sync修饰符实现对prop进行双向数据绑定

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。所以官方推荐以update:my-prop-name 的模式触发事件取而代之为了好理解，我写了一个很简单的小例子：（单击输入框，显示或隐藏下面的box）下面是完整的代码：<!DOCTYPE html&...

2018-07-23 18:21:35 11401 1

转载关于web前端开发过程中SEO优化的注意点

SEO优化通俗点说就是为了让网站在各大搜索引擎中更容易的被搜到，即提高搜索排行，从而提高网站流量的一个技术手段在写web页面的时候，为了让网络爬虫更容易的搜索到页面，需要注意几个点：html语义化刚接触web前端开发的时候很奇怪，既然html标签可以通过css进行更改它的内置属性，为什么还有这么多的标签存在<div>,<h1>,<span>,&l...

2018-07-22 19:42:22 451

原创 Vue之路由懒加载

路由懒加载：把不同路由对应的组件分割称成不同的代码块，然后当路由被访问的时候才加载对应组件Vue中实现路由懒加载的方法：结合Vue的异步组件和webpack的代码分割功能，轻松实现路由组件的懒加载Vue异步组件 { components: { custom: (resolve,reject) => {} } } webpack代码分割功能...

2018-07-22 15:07:43 436

原创 Vue中的插件小练习

提到vue插件，想必大家一下想到就是官方推荐的vue-router、vue等，功能还是蛮强大的，那，我们一直在使用插件，那是否也可以开发一个自己的插件呢？开发插件：插件通常会为vue添加全局功能，vue.js的插件应当有一个公开方法。这个方法第一个参数是Vue构造器，第二个参数是一个可选的参数对象，下面就通过一个简单的小例子介绍一下插件的开发和使用插件作用：用来获取或设置localSt...

2018-07-21 17:27:20 256

原创 vue中的路由对象和路由记录

路由对象：就是一个对象喽，里面包含了当前激活的路由的状态信息，有URL解析得到的信息和URL匹配到的路由记录一个路由对象表示当前激活的路由的状态信息，每次成功导航后都会产生一个新的对象path:字符串，对应当前路由的路径 params：对象，包含动态路由参数 query：对象，URL查询参数（含“/”） hash：字符串，当前路由的hash值（含“#”） fullPath：字符串...

2018-07-20 19:23:56 10156 1

原创 vue2路由导航守卫（钩子函数）

官方：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。所谓的Vue路由导航守卫，也就是我们常说的生命周期钩子函数，钩子函数的意思就是在特定的时刻，Vue会自动触发这个方法，我们可以通过这些个钩子函数，实现一些功能，比如，某些页面需要登录后才可以访问，某些页面需要用户达到什么等级才可以访问，又或...

2018-07-20 17:24:25 6134 1

转载 Vue2.0+组件库总结

element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 ...

2018-07-20 14:47:35 387

原创 vue-router 中的过渡动效

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果： <transition> <router-view class="center"></router-view> </transition>当然要想要实现过渡效果需要配合过渡

2018-07-19 18:29:58 3378

原创动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果动态路径参数，以冒号开头看个小示例const router= new Router({ routes:[ { path:'/user/:tip?/:userId?', name:'User', com...

2018-07-18 19:22:58 1560

原创 vue-router中的滚动行为

滚动行为：使用前端路由，当切换到奥新路由时，想要页面滚动到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router,可以自定义路由切换时如何滚动这个功能只在支持 history.pushState 的浏览器中可用。scrollBehavior(to,from,savePosition){//点击浏览器的前进后退或切换导航触发 console.log(...

2018-07-18 17:58:55 970

原创 vue中的重定向和别名

重定向：重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，重定向也是通过 routes 配置来完成，下面例子是从 "*" 重定向到 /home：（下面例子中列举了四种方法）export default new Router({ mode:'history', linkActiveClass:'is-active', routes: [...

2018-07-17 18:01:06 2207

转载 web单页应用的优缺点

web单页应用是什么？Web单页应用就是指只有一个Web页面作为入口的应用，在浏览器中运行期间不会重新加载页面。也就是说浏览器一开始会加载它必需的thml、css和Js，之后所有的交互操作都在一个页面上完成，这些都是由JavaScript动态的加载合适的内容来响应用户的操作，所以Web单页应用会包含大量的js代码，支持单个页面上与多个组件进行丰富的交互。我们一般可以认为单页应用是一种从Web服...

2018-07-17 17:13:44 5640 1

原创 vue2.0中router-link详解

在vue2.0中，原来的v-link指令已经被<router-link>组件替代了<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名<router-link>...

2018-07-17 16:55:12 187579 7

原创 Vue封装树形菜单组件

csdn终于更新完成了哈，ok，步入正题像这种树形结构的核心思想就是：递归思想，知道使用递归，其实这个例子函数的封装也就很简单喽实现步骤：设置的props： data 数据结构默认为 [] 定制模板: 不可定制...

2018-07-16 17:44:29 13552

原创 Vue实现自定义下拉菜单

先看例子，后面有对用到的知识点的总结效果图：实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件练习</title> <link rel="styl

2018-07-15 16:51:17 23620

转载 vue.js - v-bind 的一些理解和思考

一、v-bind 初探它是一个 vue 指令，用于绑定 html 属性，如下：<div id="app"> <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p></div>......var vm = new Vue({ el: '#app', data:...

2018-07-15 15:57:57 465

原创 Vue实现todoList（任务计划列表）

大致功能：1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取...

2018-07-14 09:19:55 39838 9

原创 H5本地存储(storage)和cookie详解

本地存储：Cookie：数据存储到计算机中，通过浏览器控制添加与删除数据Cookie的特点：存储限制 —域名100个cookie，每组值大小4KB客户端、服务器端，都会请求服务器（头信息）页面间的cookie是共享的（同一个浏览器下的）storage .sessionStorage —session临时会话，从页面打开到页面关闭的时间段 —窗口的临时存储，页面关闭，本地存储消失.loca...

2018-07-13 17:56:32 8330

原创 vue中class和style的绑定

vue.js的官网写的很好哈，我就是为了详细认真的学习一遍，所以才总结的，比较推荐看官网：vue.js操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型...

2018-07-12 17:53:27 1402

原创 Vue中的三种模板

因为现在学的还比较基础，总结的也都是一些基础的东西，主要还是把学过的东西回顾一下，整理到一起，方便以后回头看，所以仅适合初学者哈1、html模板：html模板：基于DOM的模板，模板都是可解析的有效的HTML插值：文本：使用{{}}语法，作用：替换实例上的属性值，当值改变时，插值内容处会自动更新原生的html：双大括号输出的是文本，不会解析html（想要解析html，可以使用指令v-html）属性...

2018-07-12 13:51:49 4355

原创 Vue阶段学习知识点总结（一）

因为只是对学过的知识的回顾和总结，所以不涉及太多的实例Vue指令总结：（只针对我目前学过的）v-bind: 动态的绑定数据，简写为 :v-on:监听DOM事件，简写为@v-for:对一组数据循环生成对应的结构v-if:根据表达式的值的真假条件渲染元素和移出元素v-show:根据表达式的真假条件，切换元素的CSS属性——display属性v-text:更新元素的textContent,可替代{{}...

2018-07-11 18:36:44 342

转载前端面试题

下列代码输出什么？for(var i=0;i<5;i++){ (function(i){ setTimeout(function(){ console.log(i); },i*1000) })(i)} // 0,1,2,3,4下列代码输出什么？for(var i=0;i<5;i++){ setTimeout(function(){ ...

2018-07-11 16:39:29 209

原创 js中的reduce和every方法详解

一、reduce()reduce()方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值语法：参数：回调函数（callback）[必选]，initialValue[可选]回调函数可以传入四个参数： 1、accumulator【必选】累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue2、currentValue【必选】数组中正在处理的元素。3...

2018-07-11 14:44:53 1405

原创 Vue实现商品筛选

记得之前用原生js实现过这个案例，今天又用vue实现了一下，感觉还是vue实现起来要简单一点直接看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品筛选</title> &

2018-07-10 11:26:05 9178 1

原创 ES6中的箭头函数

箭头函数：ES6允许使用箭头函数（=>） //ES5函数写法 var f = function fn(a){ return a; } //ES6函数写法 var f = a => a;箭头函数的正确使用方式1、如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分2、如果箭头函数的代码块部分多于一条语句，就要使用大括号将他们括...

2018-07-09 23:36:12 148

原创 Object.defineProperty

下列代码输出什么？for(var i=0;i<5;i++){ (function(i){ setTimeout(function(){ console.log(i); },i*1000) })(i)} // 0,1,2,3,4下列代码输出什么？for(var i=0;i<5;i++){ setTimeout(function(){ ...

2018-07-08 10:09:24 190

原创前端知识点系列一

什么是同源：协议相同域名相同端口相同同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。如果非同源，共有三种行为受到限制。 Cookie、LocalStorage 和 IndexDB 无法读取。 DOM 无法获得。 AJAX 请求不能发送。性能优化？使用 CDN图片懒加载使用外部 JavaScript 和 CSS压缩 JavaScript 、 CSS 、字体、图片等优化 CSS...

2018-07-07 21:39:54 177

原创 z-index负值深入理解

补充点小知识：CSS3与新时代的层叠上下文：css3之前，可能我们说会影响层叠上下文的也就position属性了，那CSS3时代的到来，对层叠上下文规则带来了新的影响，css3时代会影响层叠上下文的除了定位还有：元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不为auto元素的opacity值不是1元素transform值不是none元素的fi...

2018-07-06 21:34:17 13896

CSS3轮播图

空空如也