Facing_the_Giants-CSDN博客

原创双重监听俩个值的变化 vue2.0 -- 飞机票项目

今天给写自己吧！或者说做一个笔记！就是双重监听俩个值的变化。到底是什么呢？先看截图需求： 1.点击成人 + 号最多添加到 9 2.点击成人 - 号最少为 1 3.点击儿童 + 号最多添加到 9 4.点击儿童 - 号最少为 0 5.1个成人数量最多带俩个儿童知识： 1.监听 2.双重判断难点： 1.我个人觉得判断确实是一个

2017-11-12 00:41:17 705

原创过滤数据以及数组去重。2.0vue -- 飞机票项目

大家好！我是杨小宝，项目马上结束，下几篇提供数据交互，以及渲染的难点。这一篇讲解过滤数据以及数组去重。效果：在项目中，我们会经常遇到筛选功能，那么既然需要筛选，我们就要用到数组的去重，数据的整理，等等。先上一张图，我们的要的效果是什么？知识： created钩子函数数组去重数据“中转”分析： 1.首先我们请求下的来

2017-10-31 10:02:36 3821 2

原创 Session Storage(本地缓存) -- 飞机票项目

大家好！我是杨小宝，之前写过一篇 Local Storage ，今天给大家介绍一下Session Storage区别： Local Storage 删除数据需要手动删除 Session Storage 删除数据关闭浏览器即可（对于我们现在的需求而言，如需了解深层知识，可以去百度查看文档）用法： var storage= win

2017-10-23 13:44:25 674

原创 60秒的倒计时？30分钟的倒计时！！！ vue2.0 --飞机票项目

Hello，在项目中我们经常遇到手机验证码的倒计时60秒！网上一艘一大片，为什么我们不能动脑思考去实现呢？今天分享一个倒计时30分钟的demo，也是我这个项目中遇到的一个。虽然不难，但是理解，思路最重要！上图看效果：分析需要的方法： 1. 函数调用 ==> methods 2. 监听数据的变化 ==> watch 3. 计算属性 ==>

2017-09-22 16:32:24 6937 4

原创下拉框的年限循环（2017~1917）vue2.0--飞机票项目

Hello，项目开发过程中，需要很多项目需要是不能使用插件实现的，是需要我们通过自己去手写的。比如今天我们要实现一个下拉的年限范围。（出生日期、证件日期……）还是上图先看效果：我们要循环出一个范围年限，分析需要的方法： 1. 我们需要v-for循环 2. 需要用到我们的计算属性 computed 3. 在JS中我们还需要用 fo

2017-09-22 15:54:27 1364

原创支付，配送....流程，模拟后台返回状态码 --飞机票项目

Hello，我们做项目的时候经常会遇到一些支付流程啊，配送流程啊。说白的就是一个’时间表’，虽然我这么说是‘时间表’，可能在术语上不对，我也不知道怎么解释了。请看下图：我们要实现的效果图：一看图，相信大家都明白了，项目中会遇到很多这种交互。逻辑思路分析： 1.背景条跟随状态变化而变化。 2.文字内的背景色跟颜色跟随状态变化而变化那么应该怎么去考虑写代码

2017-09-21 16:55:07 485

原创 localStorage本地缓存到第二个页面接收！--飞机票项目

为什么要说到localStorage呢？因为我这个项目的首页点击搜索按钮的时候，是需要跳转页面，以及将数据在第二个页面进行请求数据并渲染。我的思路有俩种： 1.点击搜索直接传给后台生成接口后在第二个页面调用接口接受！ 2.直接在前端页面本地缓存，后在第二个页面获取！为什么我要讲一下第二种，因为后端也是有脾气的，不给你写，你也是俩眼发呆没毛病。先看一下效果图

2017-09-21 11:43:21 798 1

原创 vue2中的“$(this)” === JQ中$(this)--飞机票项目

Hello, 我是杨小宝！商城项目就不更新了，因为我突然换项目了！！！是不是很尴尬，不过这个项目是一个订飞机票的项目，逻辑思维也是很强的！持续更新该项目的知识点。能触及到的都是关于vue2的知识！今天给大家写一个vue中的 ‘$(this)’说起￥this,（不知道为什么不让打美元符号我就用￥表示了）一想就是jq嘛，假如说在jq中我们很多li标签然后里面都有内容我们获取每一个li标签的里面的内容

2017-09-21 11:22:15 2770

原创商城项目--产品的加减中的watch监听

Hello 我是杨小宝！上一个复选框的demo写完后，我觉得还是写一下全局的watch监听吧！又不能重复写复选框，所有这里写了一个非常简单的加减的判断！看一下项目图：就做一下数量的加减判断即可！简单说一下项目需求： 1.当点 + 号时左侧 - 号改变颜色 2.当点击 - 号中间num值为1 时不能点击或者说在点击也还是显示1.因为很简单！直接上代

2017-09-15 16:15:16 335

原创商城项目--全选,反选 vue2.x+JQ代码（俩种实现方式）

Hello 大家好我是杨小宝！最近刚刚接手公司内一个商城项目，里面一些业务逻辑其实学习与记录一下挺好的，如果你也正好做商城类似的项目，看一下我们有相同的问题吗？首先这个全选，反选一开始做的时候我进入了一个盲区就是一直想判断每一个checkbox选中的状态全等于true的时候要 All => checkbox 在等于true。虽然看似很简单的一个逻辑缺让我想的很复杂！那一下看一下我们正确的代码

2017-09-15 15:53:17 392

原创 Axios数据请求post与node进行传参，node中处理json

hello，我是杨小宝，学习了几个月的vue终于到了与后台的数据交互，但是进行数据交互的时候我遇到了一些问题，今天就写一下这些问题，作为以后的用处！！！axios的get请求写法：axios.get('/user',{ params:{ ID:12345 }}).then(function(response){ console.log(response);}).catch

2017-09-10 14:32:27 2846

原创 vue2.0逻辑思维选项卡。

Hello，选项卡？很简单嘛！那项目中所有数据都是‘活’的，而不是一个静态页面怎么通过vue写出vue中的选项卡呢？页面部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></s

2017-08-31 10:12:44 1594

原创通过自定义属性添加样式（css+js，动态判断背景颜色）

今天我们要写一个写死的背景色，通过我们的JS把背景色变成活的。当我们通过点击 “ + ” “ - ” 号来控制右边标签的隐藏显现！！！一开始背景色是直接写上的，点击第一个 “+” 右边就是对应的标签也相对应的背景颜色。后来觉得太难看了，要点击的时候背景色随着我出现的几个li标签来添加。一行灰色，一行白色。我们就用属性来写css

2017-08-15 10:05:28 5271 1

原创 Vue2.x通过id参数数据请求

一：使用Vue进行数据请求，需要用到Vue的生命周期需要引入三个库 1.jquery.min.js2.vue.min.js3.vue-resource.js点击页面<html><head> <title>点击页面</title> <script type="text/javascript" src="common/jquery.min.js"></script>

2017-07-23 23:28:04 2905

原创 JQ面向对象的封装步骤

一：函数自己调用自己/*CSS页面*/ #box1{ width: 200px; height: 200px; background: red; margin :100px auto; } .box2{ width: 200px; height: 200px; ba

2017-07-16 15:42:49 2272

原创 Vue1.x - 2

模版+组件结合1.. 模版第一种写法2..模板第二种写法3..动态组件写法，切换内容模版（选项卡）父子组件1..基本写法：2..父亲参数传递给儿子3..儿子的数据传递给父亲十四 .路由分页1）：模块分区2

2017-07-06 18:22:38 364

原创 Vuejs1.x - 1

一．数据的传递<div id='box'>{{msg}}</div>var v = new Vue ({ el:'#box', data:{msg:'hello vue'}})二．数据绑定 v-model<div class=’box’> <input type='text' v-model='msg'> <p>{{msg}}</p><

2017-07-06 18:06:54 282

原创模仿百度API接口搜索框

<!DOCTYPE html><html><head> <title>模仿百度API</title> <meta charset="utf-8"> <script type="text/javascript" src="js/vue-1.js"></script> <script type="text/javascript" src="js/vue-resourc

2017-06-14 19:01:22 3753

原创 angular.js

Angularjs 使用angular： 1.引入框架2.声明一块angular模板 è ng-app=’app’3.使用ng-model=’xxx’,来绑定简单的数据4.应用(插值) è {{ xxx }}angular 模块化：1.声明模块 ng-app=’app’---> 声明控制器

2017-06-12 23:17:04 341

原创 Nodejs

nodejs表单验证

2017-06-12 22:39:50 339

原创 AJAX异步请求

AJAX:异步请求法语：（通过jquery.min.js） $.ajax( { url:’xxx.php’ // 或者什么路径（node.js） data:{name:xxx,pass:xxx},//后台发送的数据,JSON形式传输 type:’get’ // 传输的方式get

2017-06-12 22:29:54 261

原创 php后台

PHP后台一：基本语法 1.php文件名： “xxx.php”语法:2.中文转换：header(‘cotent-type:text/html;charset=utf-8’)3.php注释：①: // ②: # ③: /* */4.执行语句：echo ==(console.log()) àecho”Hello World

2017-06-12 22:24:40 546

原创 jquery

JQuery1.id $(‘#box’) 可以选择标签的#id2.class $(‘.box’) 选择标签的.class3.标签obj $(‘div’) 直接获得标签4.并集选择器 $(‘#box,#box2’) 选择多个有

2017-06-12 22:16:34 301

原创 web前端基础文档

标签头部：head（标题）（中文）（引入css）（作者）（网页搜索关键词）（关键词下的内容介绍）（网页小图标）身体：body （标签）（标题+字号 1~6）（文本标签）（文本内嵌标签）（文本预处理）（‘块’标签）（上标）（下标）

2017-06-12 21:33:43 565 1

Facing_the_Giants的博客