vue travel项目学习笔记

1、git 2、vue 3、js 4、css 6、html
一：git
1、解决移动手机端手机点击事件有300ms延迟方法：引入fastclick库，然后我们就可以没有顾忌的使用点击事件了，具体操作如下:
（1）打开项目终端对应gitbash界面，键入 npm install fastclick --save命令，运行即可，npm install fastclick意为把fastclick库安装到我们项目的依赖上，–save意为无论在开发环境中还是在打包生成的线上代码中都要使用fastclick库。
2.gitbash中control c可以退出当前运行环境
3、码云创建仓库，克隆/下载
（1）然后在项目目录的终端git bash，
（2）git init，这时候master会出现
（3） git remote add origin +克隆/下载那儿复制http地址，
（4）git pull origin master 命令，将码云上的仓库pull到本地文件夹
（5）git add .
git commit -m ‘操作名称’
git push origin master（只用git push会报错）

	3.代码上传git仓库：

（1） git add ：.将写的代码上传至本地缓存区
（2） git commit -m ‘project init’：其中git commit意为把缓存区代码提交到本地仓库， -m 'project init’意为备注一下这是一个project init（项目初始化）操作
（3）git push：将本地仓库代码传到线上
4、npm run start:重新启动项目
5、安装stylus到项目，要安装两个依赖：
（1）npm install stylus --save
（2）npm install stylus-loader --save
6、npm install webpack@3.0.0 -g：安装制定版本的webpack
7.在公司级别的项目，每实现一个功能，都要再创建一个分支，在分支上进行代码的开发，开发完成后，分支上的代码就要合并到主分支master上。分支再线上创建完成后，在项目终端目录
（1）git pull：把分支拉到本地。
（2）git checkout 分支名：切换到新分支：git checkout branchName（到这你就可以开发写代码了）
（3）git status：显示工作目录和暂存区状态
8、创建新分支：git branch branchName
9、分支合并到master
（首先保证此刻是在刚开发代码的分支上，而不是在ｍａｓｔｅｒ或者其他分支上）
（1）git add .:到本地暂存区。
（2）git commit -m ‘change’:到本地仓库
（3）git push：到线上
（4）git checkout master;切换到我们要合并的master
（5） git merge origin/index-swiper：意为master要与线上分支index-swiper合并
（6）git push:合并后的代码推到线上
8、安装axios：npm install axios --sava
9、npm run start =npm run dev
10、如果现在git bush在index-ajax，而且index-ajax也没合并到master，我们可以用git merge index-recommend
来合并index-ajax和git merge index-recommend。
11、git merge：合并的意思
12、 git merge后，后悔怎么办？（摘取自https://www.cnblogs.com/princesong/p/7414880.html）

第一步：git checkout到你要恢复的那个分支上

1
1.git checkout develop
第二步：git reflog查出要回退到merge前的版本号

1
1. git reflog
第三步：git reset --hard [版本号]就回退到merge前的代码状态了

1
1.git reset --hard f82cfd2
至此回退代码的目标达成。

如果只是merge，但没有add，直接运行git merge --abort即可。

、
13、分支开发；
先在码云创建自己的分支，然后在git bash页面上操作
（1）git pull：从线上拉下代码到本地
（2）git checkout 分支名：切换到要开发的分支
（3）npm run dev：得到网址，然后到浏览器运行项目
14、怎么使用better-scroll？
要使用这个包，就要在控制台安装这个包，先关掉服务器，然后用

npm install better-scroll --save

12、提交了错误代码怎么办
https://blog.csdn.net/Java_HuiLong/article/details/86144055
https://www.cnblogs.com/chaoxiZ/p/9714085.html

二：vue
1.

<template>
	<div>
		<!-- 因为template里面只能包一个组件，所以用div包裹了这两个东西 -->
	  <div class="home">home</div>
	  <router-link to="/list" class="home">列表页</router-link>
	  <!-- <router-link>相当于a，vue常用这个 -->
  	</div>
</template>
	2、为什么js中局部组件声明用的Homeheader，而这里用小写和横杠线的形式？因为vue中组件可以自动大小写关联，而且HTML中组件一般格式为小写和横杠线的形式
	3、想要在Home.vue中使用局部组件，则要声明，并且js中也要用import导入对应的HomeHeader文件
	

export default {
  name: 'Home',
  //局部组件要使用就要声明
  components:{
  //es6中Homeheader相当于HomeHeader：HomeHeader
  	HomeHeader
  }
}
	4、在vue脚手架中些轮播图，使用vue-awesome-swiper插件。安装方法：
		（1）npm install vue-awesome-swiper --save，最新版本有些小bug，所以我们做好安装2.6.7版本。所以命令为：npm install vue-awesome-swiper@2.6.7 --save
		（2）：插件安装好了以后，重启服务器（npm run start）

5、vue中请求数据使用ajax可以有很多种方式：
（1）浏览器中的fetch函数
（2）vue-resourse 这个第三方模块（vue以前推荐的）
（3）axios这个第三方模块（vue2017年推荐）
axios可以实现跨平台的请求，如在浏览器端可以帮助发送xhr请求，在node服务器端可以帮助发送http请求。本项目就用的axios请求ajax数据。
6、点击router-link包含的区域，都可以跳转到to指向的路径

<router-link to='/city'>
	  	<div class="header-right">
	  		{
  {this.city}}
	  		<span class="iconfont arrow-icon">&#xe6aa;</span>
	  	</div>
  	</router-link>

router-link就是在区域外加了一个a标签，a标签默认#25a4bb这个颜色,所以有时候要在对应的样式更改颜色
补充：，这个意思就是回到根路径
7、template里只能包裹一个子组件

<template>
<div>
	<city-header></city-header>
	<city-search></city-search>
</div>

8、怎么实现组件的联动呢？（就是当点击字母区域，屏幕自动滚到响应区域） （1）比如我们在Alphabat组件中字母前绑定一个click事件，即@click=“handleLetterClick”，点击字母输出字母、  然后methods里handleLetterClick方法就写： handleLetterClick(e){//当点击事件发生后，会传一个事件e对象给方法 console.log(e.target.innerText)//就会输出你点击的字母，意为对象e的事件目标的文本 } （2）由于屏幕滚动对应区域是list组件，也就是我们要把e.target.innerText中的innerText传给Alphabat的兄弟组件list，兄弟组件传值可以用非父子组建的传值方式，也就是用总线的方式传值bus。就是Alphabat组件先值传给父组件City，再让父组件City把值传给子组件list 【1】子组件传值给父组件怎么传？（Alphabat----City） 在click事件的handleLetterClick方法中

			    handleLetterClick（e）{
			    		this.$emit("change",e.target.innerText)//调用this.emit()方法向外触发事件，事件名我们叫做change，事件携带的内容我们叫做e.target.innerText
			    		console.log(e.target.innerText);//检测是否成功获取字母
			    }

子组件已经向外触发事件，则父组件要接受这个事件，就要在这个子组件上监听change事件

然后我们在父组件中定义方法handleLtterChange

handleLtterChange（letter）{//这个方法可以接受到一个名为letter的参数，则letter的内容也就是前面的e.target.innerText
console.log(letter);

}
【2】父组件向子组件传值，（City—list）
我们常用data，然后在子组件上绑定数据，然后在子组件的props里注册，也就是父组件通过属性的形式传递
要把letter从City传给list，先在父组件里定义letter：‘’，再在方法中令this.letter=letter.
然后父组件在子组件上绑定letter，即：letter=“letter”，
然后子组件props里注册letter，即letter：String
【3】子组件已经接受到父组件传来的值了，当list.vue发现letter有改变的时候，我们就要让list中跟letter首字母相同的列表项显示出来，这里我们就要用到侦听器watch：{}来监听letter的变化,letter一旦变化就执行letter（）{}中的代码
watch：{
letter () {//注意这里格式letter与括号之间有一个空格，括号后也有个空格
console.log(letter);
//BetterScroll提供我们这样一个接口，当this.letter不为空的时候我们可以调用this.scroll.scrollToElement()方法，它可以让BetterScroll滚动区自动滚动到某一个元素上
if（this.letter）{
this.scroll.scrollToElement（）；
}
}
【4】我们给每一个div class=“area”的区域加一个ref，令：ref=“key”

有了这个ref，我们就可以在letter中写

const element = this.$refs[this.letter]//这样我们可以通过this.$refs[this.letter]获取到this.letter对应的class=“area”的区域
console.log(element);／／打印这个数组
	//但是我们不能直接就传入element 到this.scroll.scrollToElement，会报错，因为这里ref是通过v-for这样一个循环来输出的一个ref，所以输出的this.$refs[this.letter]是一个数组,而非DOM元素，或者DOM选择器，但是BetterScroll这个方法里面的参数必须是一个DOM元素，或者DOM选择器，怎么解决呢？在const element = this.$refs[this.letter]加个[0]就可获取到ＤＯＭ元素，然后可以调用ｔｈｉｓ．ｓｃｒｏｌｌ．ｓｃｒｏｌｌＴｏＥｌｅｍｅｎｔ（）方法了
	const element = this.$refs[this.letter]［０］；
	this.scroll.scrollToElement（element ）；

（３）上面实现了点击那个字母就去那个区域，对字母做上下拖拽的时候，区域也跟着变动
【１】首先做对Ａｌｐｈａｂａｔ滚动事件的监听
绑定以下三个事件
我们希望只有在ｔｏｕｃｈｓｔａｒｔ触发之后，ｔｏｕｃｈｍｏｖｅ才会触发，所以我们在data中绑定一个标识位touchStatus

下图代码就是说，当手指触摸的时候（即touchstart被触发时）touchStatus为true，当触摸结束时（touchend被触发时），touchStatus为false
【2】首先要知道你现在手指滑动的时候，页面是处于哪个字母要计算出来，
首先获得A字母距离顶部的高度，然后获得手指距离顶部的高度，二者差值除以每个字母高度就可以得出当前字母了。然后取这个字母触发change事件给web就可以啦！
【3】如果想要通过下标找到对应字母，我们就先用一个数组来储存这个字母列表。我们在计算属性computed中定义一个letters（）{}返回一个字母数组