Vue2.5开发去哪儿网App

Vue2.5开发去哪儿网App 从零基础入门到实战项目

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第1章课程介绍

1-1.mp4

@ Dell Lee

nuxtjs weexjs

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第2章 Vue 起步

2-1.mp4

https://coding.imooc.com/lesson/203.html#mid=12981

2-2.mp4

var app=new Vue({
    el:'#app',
    data:{
        content:"hello"
    }
})
setTimeout(()=>{
    app.$data.content="world"
},200)

2-3.mp4

www.todolist.cn

2-4.mp4

M模型层V视图P控制器

https://cdn.baomitu.com/前端静态资源库

MVVM

2-5.mp4

http://piao.qunar.com/touch/

2-6.mp4

2-7.mp4

2-8.mp4

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第3章 Vue 基础精讲

3-1.mp4

$开头 vue实例方法属性

3-2.mp4

生命周期函数就是vue实例在某一个时间点会自动执行的函数

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy(beforeUnmount) destroyed(unmounted) activated deactivated

3-3.mp4

3-4.mp4

计算属性有缓存 watch也有

3-5.mp4

计算属性的setter和getter

3-6 Vue中的样式绑定.mp4

{} []

3-7.mp4

加key值唯一的值内容不被复用

3-8.mp4

vue官网有空读下不懂出错误看下

v-for="item in list"
v-for="item of list"
push pop shift unshift splice sort reverse 
用下标改变不显示
vm.list.splice(1,1,{id:22,text:'fff'}) 删除一条数据并且添加另一条数据
userInfo:{
    name:'koo',
    age:33    
}
v-for="(item,key,index) in userInfo"
//koo name 0

改变数据的引用  等于重新赋值

3-9vue中的set方法.mp4

Vue.set(vm.userInfo,'address','beijing')
vm.$set(vm.userInfo,'address','beijing')

数组
vm.$set(vm.userInfo,1('下标'),55)

变异方法push 改变数据的引用 Vue.set 3种

4-1.mp4

<tr is="row"></tr>
Vue.component('row',{
    template:""
})
子组件的data必须是一个函数

4-2.mp4

4-3.mp4

组件参数校验与非props特性

传字符串又传数字
props:{
    content:[String,Number]
}
props:{
    content:{
        type:Number,
            default:0,
            required:true,
            validator(value){ //自定义校验器
                return (value.length>5) //传人来的值长度大于5
            }    
    }
}
props特性 props接受 插值直接用
非props特性 props不接受 子标签上保留属性

4-4.mp4

给组件绑定事件是自定义事件或者$emit

<child @click.native="xxx"></child>
.native原生事件 才可以

4-5.mp4

非父子传值 vuex

非父子组件间传值（Bus/总线/发布订阅模式/观察者模式）

Vue.prototype.bus=new Vue()
this.bus.$emit('change',22)
this.bus.$on('change',(value)=>{})

4-6.mp4

Vue中的插槽（slot）不同一插值表达式

4-7.mp4

Vue中的作用域插槽

只有组件和template才能用v-slot
v-slot == slot-scope="props"
<slot :msg="msg"></slot>

4-8.mp4

动态组件与v-once指令

<component :is='component'></component>

v-once 放到内存中去不重新创建组件

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第5章 Vue 中的动画特效

5-1.mp4

Vue中CSS动画原理

transition标签不加 name=fade 默认是v-

fade-enter/fade-enter-active  fade-enter-to  
fade-leave/fade-leave-active  fade-leave-to

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<style>
		.fade-enter,.fade-leave-to{
			opacity: 0
		}
		.fade-enter-active,.fade-leave-active{
			transition: opacity 3s;
		}
	</style>
</head>
<body>
	<div id="app">
		<transition name='fade'>
			<h1 v-if="flag">HelloWorld</h1>
		</transition>	
		<button @click="change">切换</button>
	</div>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{
				change(){
					this.flag=!this.flag
				}
			}
		})
	</script>
</body>
</html>

5-2.mp4

在Vue中使用Animate.css库

animation:name 2s reverse 
自定义class
.fade-enter-active,.fade-leave-active
enter-active-class="active"
leave-active-class="leave"

https://daneden.github.io/animate.css/

https://animate.style/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<link rel="stylesheet" href="./animate.min.css"/>
     <style>
		.fade-enter,.fade-leave-to{
			opacity: 0
		}
		.fade-enter-active,.fade-leave-active{
			transition: opacity 3s;
		}
	</style>   
</head>
<body>
	<div id="app">
		<!-- appear第一次有动画 type="transition"以及transition为准时间-->
        <!-- :duration="5000"5s时间 :duration="{enter:5000,leave:10000}"入场出场动画时间-->
		<transition name='fade' type="transition" appear appear-active-class="animated swing" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active">
			<h1 v-if="flag">HelloWorld</h1>
		</transition>	
		<button @click="change">切换</button>
	</div>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{
				change(){
					this.flag=!this.flag
				}
			}
		})
	</script>
</body>
</html>

5-3.mp4

在Vue中同时使用过渡和动画

5-4.mp4

Vue中的Js动画与Velocity.js的结合

动画钩子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<transition 
			name='fade'
			@before-enter="handleBeforeEnter"
			@enter="handleEnter"
			@after-enter="handleAfterEnter"

			@before-leave="handleBeforeEnter"
			@leave="handleEnter"
			@after-leave="handleAfterEnter"
		>
			<h1 v-if="flag">HelloWorld</h1>
		</transition>	
		<button @click="change">切换</button>
	</div>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{
				change(){
					this.flag=!this.flag
				},
				handleBeforeEnter(el){
					el.style.color='red'
				},
				handleEnter(el,done){
					setTimeout(()=>{
						el.style.color='green'
					},2000)
					setTimeout(()=>{
						done() //告诉动画结束
					},4000)
				},
				handleAfterEnter(el){
					el.style.color='#000'
				}
			}
		})
	</script>
</body>
</html>

http://velocityjs.org/#duration velocityjs动画库

https://github.com/julianshapiro/velocity

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="http://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
</head>
<body>
	<div id="app">
		<transition 
			name='fade'
			@before-enter="handleBeforeEnter"
			@enter="handleEnter"
			@after-enter="handleAfterEnter"
		>
			<h1 v-if="flag">HelloWorld</h1>
		</transition>	
		<button @click="change">切换</button>
	</div>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{
				change(){
					this.flag=!this.flag
				},
				handleBeforeEnter(el){
					el.style.opacity=0
				},
				handleEnter(el,done){
					Velocity(el,{
						opacity:1
					},{
						duration:1000,
						complete:done
					})
				},
				handleAfterEnter(el){
					console.log('动画结束')
				}
			}
		})
	</script>
</body>
</html>

5-5.mp4

Vue中多个元素或组件的过渡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./vue.js"></script>
	<style>
		.v-enter,.v-leave-to{
			opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			transition: opacity 2s;
		}
	</style>
</head>
<body>
	<div id="app">
		<transition mode="out-in">
			<h1 v-if="flag" key="hello">HelloWorld</h1>
			<h1 v-else key="koo">I am koo</h1>
		</transition>	
		<button @click="change">切换</button>
	</div>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{
				change(){
					this.flag=!this.flag
				}
			}
		})
	</script>
</body>
</html>

动态组件component也可以直接俩组件也可以

5-6.mp4

Vue中的列表过渡

transition-group 每个项目都加上一个transition

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./vue.js"></script>
	<style>
		.v-enter,.v-leave-to{
			opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			transition: opacity 2s;
		}
	</style>
</head>
<body>
	<div id="app">
		<transition-group>
			<div v-for="item of list" :key="item.id">{{item.title}}</div>
		</transition-group>	
		<button @click="change">Add</button>
	</div>
	<script>
		var count=0
		var app=new Vue({
			el:'#app',
			data:{
				list:[]
			},
			methods:{
				change(){
					this.list.push({id:count++,title:"helloworld"})
				}
			}
		})
	</script>
</body>
</html>

5-7.mp4

Vue中的动画封装

新建个组件加入transition配合slot插槽

动画钩子封装css

5-8.mp4

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第6章 Vue 项目预热

6-1.mp4

node-v v7.10.1 npm-v 5.5.1

http://gitee.com

joneking koo

git --version

git 小型linux系统

git clone git@gitee.com:joneking/travel.git

git status 查看修改

git add . 添加到缓冲区

git commit -m 'project initialized' 提交并且注释

git push 提交到码云

https://gitee.com/joneking/travel

6-2.mp4

6-3.mp4

.vue单文件组件

路由就是根据网址的不同，返回不同的内容给用户

6-4.mp4

多页应用VS单页应用

http://piao.qunar.com/touch/

多页应用页面跳转返回HTML
优点：首屏时间快，SEO效果好
缺点：页面切换慢

单页应用页面跳转 JS渲染
优点：页面切换快
缺点：首屏时间稍慢，SEO差

6-5.mp4

reset.css 清除默认样式统一样式

移动端(border.css) 有 1像素边框问题以前代码也有教

npm install fastclick --save 移动端点击300ms延迟问题解决

www.iconfont.cn 字体库

git commit 提交到本地仓库 -m 留一条操作信息

913937000@qq.com

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第7章项目实战 - 旅游网站首页开发

https://www.cnblogs.com/cosnyang/p/6290950.html sublime vue 语法高亮插件安装

7-1.mp4

npm install stylus stylus-loader --save

1rem =html font-size=50px

86/100

line-height

7-2.mp4

iconfont的使用和代码优化使用编码输出

https://www.cnblogs.com/taohuaya/p/10213258.html vue和stylus在subline中显示高亮

.4rem 40px

styl
$color=#00bcd4

7-3.mp4

git pull 拉下

git checkout index-swiper

git checkout -b index-swiper创建分支

git branch 查看

git status

快速构建轮播图插件 https://github.com/surmon-china/vue-awesome-swiper

npm install vue-awesome-swiper@2.6.7 --save

控制台 network online 设置网络模式

有抖动感解决

外面包裹一个div
overflow:hidden
width:100%
height:0
padding-bottom:31.25%
    
或者
width:100%
height:31.25vw

>>>样式穿透  子组件

git checkout master

git merge origin/index-swiper

git push

7-4.mp4

height0 padding-bottom50%

7-5.mp4

7-6.mp4

index-recommend

http://piao.qunar.com/touch/

移动端1像素边框 class border-bottom

小技巧 min-width:0 测试

7-7.mp4

7-8.mp4

overflow:hidden;
height:0;
padding-bottom:33%;

兼容性留宽高

index-ajax

axios ai x 轴

static 能被外部访问

7-9.mp4

模板最好不要出现逻辑代码

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第8章项目实战 - 旅游网站城市列表页面开发

8-1.mp4

8-2.mp4

8-3.mp4

border-topbottom 1像素边框上下

8-4.mp4

Better-scroll的使用及字母表布局

https://github.com/ustbhuangyi/better-scroll

8-5.mp4

8-6.mp4

8-7.mp4

setTimeout 节流 16ms

setInterout 防抖

8-8.mp4

indexOf 字字母拼音支持

8-9.mp4

8-10.mp4

min-width 最小宽度

8-11.mp4

keep-alive activated 重新发送请求

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第9章项目实战 - 旅游网站详情页面开发

9-1.mp4

滑动效果

a标签变成li标签

防止页面抖动 俩标签 img没加载完成时  下面标签占img空间
overflow:hidden;
height:0;
padding-bottom:55%
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
overflow:inherit; 继承 显示

9-2.mp4

www.swiper.com.cn

swiper

9-3.mp4

window.addEventListener('scroll',fn)
document.documentElement.scrollTop  滚动距离
opacity

9-4.mp4

9-5.mp4

使用递归组件实现详情页列表

自己的name名称DetailList 用来当标签detail-list
在自己本身组件使用
显示问题 优先 z-index

9-6.mp4

keep-alive exclude 排除缓存组件

router 切换返回开始位置 router设置

9-7.mp4

F:\Vue教程\Vue2.5开发去哪儿网App 从零基础入门到实战项目\第10章实战项目 - 项目的联调，测试与发布上线

10-1.mp4

fiddler charles抓包工具

10-2.mp4

webpack-dev-server --host 0.0.0.0 应许192.168.1.111:8080访问

@touchxx事件手机pc触摸事件

解决不支持promise手机(白屏问题) npm install babel-polyfill -save

10-3.mp4

10-4.mp4

manifest.js配置文件 app.js所以页面业务逻辑 vender各个组件共有代码

main.js异步加载需要什么才加载什么 router-()=>import('view/home.vue')

在小时不异步加载多http请求性能影响几mb才考虑

组件内也可以异步加载
components:{
    home:()=>import('./components/home')
}

10-5.mp4 后续学习

Vue.js服务器端宣染指南 https://ssr.vuejs.org/zh/

vue插件 https://github.com/vuejs/awesome-vue

posted @ 2024-12-14 13:47 KooTeam 阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!

Vue2.5开发去哪儿网App

Vue2.5开发去哪儿网App 从零基础入门到实战项目

1-1.mp4

2-1.mp4

3-1.mp4

4-1.mp4

5-1.mp4

6-1.mp4

7-1.mp4

8-1.mp4

10-1.mp4

公告