风里有诗句哈的博客

转载 理解JavaScript 中的执行上下文和执行栈

什么是执行上下文简而言之，执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行。执行上下文的类型执行上下文总共有三种类型：全局执行上下文： 这是默认的、最基础的执行上下文。不在任何函数中的代码都位于全局执行上下文中。它做了两件事：1. 创建一个全局对象，在浏览器中这个全局对象就是 window...

转载 BFC 神奇背后的原理

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么？　　在解释 BFC 是什么之前，需要先介...

原创 二.Vue2.5开发去哪儿网app城市列表页④——字母表点击或拖拽带动页面变换（兄弟组件间的联动）

当我们处理兄弟组件时，可以让一个组件的数据给父组件，然后让父组件的这个数据传递给另一个组件设置Alphabet子组件，当其一个字母被点击时向外触发一个change事件，并携带它的文本内容<template> <ul class="list"> <li class="item" v-for="(item, key) of cities" :key=...

原创 二.Vue2.5开发去哪儿网app城市列表页③——Better-scroll的使用、字母表布局和数据渲染

插件链接https://github.com/ustbhuangyi/better-scroll安装Better-scrollnpm install better-scroll --save这是Better-scroll插件结构要求，所以我们要在list下还要添加一个总div使其成为此格式<div class="wrapper"> <ul class="c...

原创 二.Vue2.5开发去哪儿网app城市列表页②——城市列表页布局

List组件因为后续要使用滚动插件，所以绝对定位布局和overflow: hidden,使屏幕不能拉动<template> <div class="list"> <div class="area"> <div class="title border-topbottom">当前城市</div&

原创 二.Vue2.5开发去哪儿网app城市列表页①——城市选择页面路由配置和Header布局

在pages文件夹下新建city文件夹用于存放city组件和其子组件路由更新，这里注意city的路径是path: '/city'，不再是首页的路径import Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'import City from '@/pages/city/...

转载 Vue2.5从零开发猫眼⑧——引入store、LocalStorage和优化上线

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言 Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

转载 Vue2.5从零开发猫眼⑦——City组件开发

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言 Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

转载 Vue2.5从零开发猫眼⑥——个人中心组件开发

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言 Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

转载 Vue2.5从零开发猫眼⑤——影院页开发

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言 Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

转载 Vue2.5从零开发猫眼④——Home页开发

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言 Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

转载 Vue2.5从零开发猫眼③——启动页开发

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言 Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

转载 Vue2.5从零开发猫眼②——项目开始前准备

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

转载 Vue2.5从零开发猫眼①——前言

Vue2.5从零开发猫眼系列以更新完毕Vue2.5从零开发猫眼①——前言 Vue2.5从零开发猫眼②——项目开始前准备Vue2.5从零开发猫眼③——启动页开发Vue2.5从零开发猫眼④——Home页开发Vue2.5从零开发猫眼⑤——影院页开发Vue2.5从零开发猫眼⑥——个人中心组件开发Vue2.5从零开发猫眼⑦——City组件开发Vue2.5从零开发猫眼⑧——引入...

原创 将代码上传至github方法及报错归类

本地项目根目录下，建立本地git仓库git init将项目的所有文件添加到仓库中，想添加某个特定的文件，只需把.换成特定的文件名即可git add .将add的文件commit到仓库git commit -m'备注'将本地的仓库关联到你的github远程仓库git remote add origin git@github.com:HelloVansal/te...

原创 一图掌握Vue中组件的生命周期

原创 一.Vue2.5开发去哪儿网app首页⑧——首页父子组件数据传递

父组件Home传值给子组件Header在Home组件中写入 data () { return { city: '' } }, 并绑定:city="city"<template> <div> <home-header :city="city"></home-header> &lt

原创 git的使用方法

项目上传至线上：git add .git commit --'备注'git pushgit pull 项目下载至本地git branch 显示所有分支git branch newbranch 在本地创建新的分支 git checkout newbranch 切换到新...

原创 一.Vue2.5开发去哪儿网app首页⑦——ajax获取首页数据

使用axios第三方模块来进行项目的ajax请求安装axiosnpm install axios --save每一个组件都有数据，都发送一次ajax请求就会有太多的请求，所以可以在Home组件中一次性发送一个请求在Home组件中引入axiosimport axios from 'axios'在static/mock文件夹下新建index.json文件， 在方法中写入函数...

原创 一.Vue2.5开发去哪儿网app首页⑥——热销推荐组件开发

新建recommend组件，代码部分注意点，在我们使用ellipsis()函数样式时，超出范围的字不会出现省略号，此时需要在item-info中加入min-width: 0，保证内容不超出外层容器，才会显示省略号<template> <div> <div class="title"> 热销推荐 </div>...

原创 一.Vue2.5开发去哪儿网app首页⑤——图标区域轮播逻辑实现

 实现图标区域可以轮播<template> <swiper :options="swiperOption"> <swiper-slide> <div class="icons"> <div class="icon"> <div class=

原创 一.Vue2.5开发去哪儿网app首页④——图标区域页面布局

同样，在码云中新建一个index-icons分支，接下来的开发都会在这个分支上git转至index-icons分支三部曲git pullgit checkout index-iconsgit status在components下新建一个Icons组件，导入到Home组件中，Icons组件内容：icons使用浮动布局，8个icon自动分布2行，icon内图片和描述使用子绝父相...

原创 一.Vue2.5开发去哪儿网app首页③——首页轮播图

 在码云中新建一个index-swiper分支，接下来的开发都会在这个分支上 在项目中运行git pull将这个线上的分支拉到本地来git pull 切换到index-swiper分支git checkout index-swiper查看一下本地的状态确认是否正确git status然后在次分支上执行npm run dev 接下来我们开始制作轮播图了，...

原创 一.Vue2.5开发去哪儿网app首页②——iconfont的使用和代码优化

在iconfont官网下载所需的图标，将尾缀.svg  .ttf  .woff  .eot的字体文件放入styles中的iconfont文件夹中，将iconfont.css文件放入styles文件夹中改下iconfont.css中文件加载路径@font-face {font-family: "iconfont"; src: url('./iconfont/iconfont.eot?t...

原创 一.Vue2.5开发去哪儿网app首页①——旅游网站首页开发

 安装stylus方便我们快速编写CSS代码npm install stylus --savenpm install stylus-loader --save在Home中导入并使用HomeHeader组件 <template> <div> <home-header></home-header> </div&gt...

原创 Vue移动端项目初始化

index.html中设置移动端不能缩放拉伸<meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 使用reset.css文件重置页面样式表，在main...

原创 使用码云管理代码

 生成/添加SSH公钥码云提供了基于SSH协议的Git服务，在使用SSH协议访问仓库仓库之前，需要先配置好账户/仓库的SSH公钥。你可以按如下命令来生成 sshkey:ssh-keygen -t rsa -C "xxxxx@xxxxx.com" # Generating public/private rsa key pair...按照提示完成三次回车，即可生成 ssh k...

原创 Vue 中的动画特效七——Vue中的动画封装

原创 Vue 中的动画特效六——Vue中的列表过渡

 使用transition-group标签包裹列表项 transition-group标签其实就是把列表项的每一个拆开单独执行过渡动画而已

原创 Vue 中的动画特效五——Vue中多个元素或组件的过渡动画

多个元素的过渡动画此时，点击按钮进行切换时并不会有过渡动画，因为Vue会尽量复用DOM元素添加key值可以解决这个问题  设置mode=“in-out”可以使要显示的元素先显示，要隐藏的元素后隐藏，out-in相反多个组件的过渡动画通过动态组件实现多个组件的过渡动画 ...

原创 Vue 中的动画特效四——Vue中的JS动画与Velocity.js的结合

 使用JS钩子来执行入场动画，出场动画同理使用Velocity动画库来执行动画先引入Velocity.js文件，然后更改代码 

原创 Vue 中的动画特效三——在Vue中同时使用过渡和动画

 使用appear和appear-active-class解决页面第一次展示时没有动画效果的问题transition内为过渡动画，css中的为KeyFrame动画，两种动画可以同时展现type=“transition”表示以type的属性为动画整体的时长我们也可以自定义css库动画的时长也可以设置的复杂一点，进场5s，出场10s ...

原创 Vue 中的动画特效二——在Vue中使用Animate.css库

在Vue中使用KeyFrame形式的CSS3动画也可以自定义class名来使用动画，只需要在transition中加入该属性通过这种方式我们就可以用来导入CSS动画库首先下载CSS动画库然后引入这个CSS文件之后只要将类名修改为animated + 某动画效果就可以了 ...

原创 Vue 中的动画特效一——Vue中的CSS动画原理

 当一个元素被transition包裹后，Vue会自动分析该元素的变化，并构建一个动画流程在动画执行之前，Vue会向该元素添加2个class，分别是fade-enter和fade-enter-active，默认的opacity为1，fade-enter在动画执行1帧时opacity为0，1帧后fade-enter被删除，此时opacity重新变为1，但这个过程中fade-enter-activ...

原创 深入理解Vue组件八——动态组件与v-once指令

 component是一个动态组件，通过is属性的变化来达到动态组件变换的效果加入v-once指令后该组件会存储在内存中，再次调用时并不需要重新创建该组件，可以提高页面展示效率 ...

原创 深入理解Vue组件七——Vue中的作用域插槽

作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式子组件向外传递item参数，父组件使用props.item来接受这个参数适用于多次调用子组件时产生不同的渲染效果 ...

原创 深入理解Vue组件六——在Vue中使用插槽

 child标签内的内容就是子组件中slot标签显示的内容如果child中的内容为空，页面会显示slot标签中显示的内容可以给slot取名来使用多个slot插槽如果没有传入这个插槽，就会触发默认插槽...

原创 深入理解Vue组件五——非父子组件间的传值（总线传值）

 Vue的原型设置一个bus属性指向Vue实例，这样每个Vue实例就都会有bus属性生命周期钩子mounted，这个组件被挂载的时候会执行这个函数因为bus是一个实例，它能监听这个组件向外发出的change，监听到这个change时触发一个函数这个函数中的作用域发生了变化，所以需要把this做一个保存...

原创 深入理解Vue组件四——给组件绑定原生事件

在子组件中的点击事件会被触发，而在父组件中的点击事件并不会被触发原因是子组件的点击事件是原生事件，而父组件中的点击事件是自定义事件触发自定义事件当子组件中的原生事件被点击时触发handleChildClick方法，handleChildClick方法向外触发一个click事件，父组件接收click事件，当此事件被点击时，触发父组件的handleClick事件，但这样两层传递是不是很...

原创 深入理解Vue组件三——组件参数校验与props特性

组件参数校验即子组件可以对父组件传递过来的值做一些约束校验时须注意此时的props是一个对象而不是数组如下图，父组件向子组件传递的content参数必须是字符串类型父组件向子组件传递的content参数可以是字符串类型或数字类型当然，父组件也可以不传值，让子组件使用初始值required为false时表示父组件可以不传content值，为true时必须传conten...