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=0var 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
滑动效果
防止页面抖动 俩标签 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
