Vue2.5开发去哪儿网App—学习小结
2020-11-04 14:36:40 2 举报AI智能生成
本文件是对Vue2.5开发去哪网App的学习小结，供参考 注：若不妥，请告知
作者其他创作
大纲/内容
常用指令
鼠标单击
v-on:click
v-on:click=\"方法\"
简写（@click=\"方法\"）
数据双向绑定
v-model
v-model=\"属性\"
组件传值
props属性
组件
父组件 -> 子组件
传值
v-bind
v-bind:属性=\"参数\"
简写（:属性=\"参数\"）
接收
子组件通过【props:['属性']】来接收父组件传递过来的参数，并且通过【{{属性}}】插值表达式在页面显示参数
子组件 -> 父组件
emit
子组件通过【this.$emit(\"子组件事件名\")】向父组件发送事件
父组件通过【@子组件事件名=\"父组件事件名\"】来监听子组件向其发送的事件
隐性规定
单向数据流
父子组件传值具有单向数据流的概念，即子组件不能直接修改父组件传递过来的数据
非props属性
父组件传属性，但子组件不接收
父组件定义的属性值会显示在子组件最外层标签的html属性之中
条件渲染
应紧贴使用，中间不能夹杂其它标签元素
v-if
v-if=\"属性\"
当属性为false时，DOM不存在
v-else-if
v-else-if=\"属性\"
v-else
v-else=\"属性\"
v-show
v-show=\"属性\"
当属性为false时，DOM依然存在
列表渲染
v-for
v-for=\
元素
下标
:key
:key=\"元素.id\"
常用方法
计算属性
computed
有缓存的机制（当依赖的变量不再发生变化时，就不会重新计算，依然延用上次的计算结果，可以提高一些性能）
get方法
通过其它的值算出新值
set方法
通过设置值来改变相关联的值
方法
methods
无缓存机制
侦听器
watch
有缓存的机制
组件使用中的细节点
is属性
解决使用组件时，层级布局的结构问题
除此之外还有
<ul><li is=\"组件名\"></li></ul>
<ol><li is=\"组件名\"></li></ol>
<select><option is=\"组件名\"></option></select>
data属性
在子组件中使用data属性时，data必须是一个函数，而不能像在根组件中将data作为对象使用，以此避免子组件之间数据互相影响的情况
ref属性
用于复杂场景下的dom操作
当ref作用于例如div标签时，通过【this.$refs.属性名】获取到的内容实际上是标签对应的dom元素
当ref作用于组件时，通过【this.$refs.属性名】获取到的是组件的引用
组件参数校验
简单校验
复杂校验
给组件绑定原生事件
@click.native
非父子组件之间的传值
Bus（总线机制 | 发布订阅模式 | 观察者模式）
Vue.prototype.bus = new Vue()
Vuex（数据层框架）
插槽（slot）
普通插槽
具名插槽
作用域插槽
可以定义默认值
动态组件
v-once指令
初始化静态内容时，将其存于内存中，有效提高加载效率
页面渲染
样式绑定
:class
class对象绑定
例如：【:class=\"{样式名: 属性}\"】
class数组绑定
例如：【:class=\
:style（内联样式）
style对象绑定
例如：【:style=\"{样式名: 属性}\"】
style数组绑定
例如：【:style=\
动画效果
CSS3动画
过渡动画
<transition />
在某一时刻自动向标签元素上增加样式
渐隐
渐显
@keyframes
Animate.css
JS动画
Velocity.js
入场动画
出场动画
Vue中多个元素或组件的过渡
多个元素过渡动画
多个组件过渡动画
Vue中的列表过渡
<transition-group />
Vue中的动画封装
Vue中的动态过渡
通过Velocity.js库中的属性变量值结合Vue中数据的双向绑定属性进行控制
Vue中的状态过渡
通过Vue中的动画语法以及Tweenjs中Tween算法实现该动画效果
数据操作
数组
修改
变异方法
向数组增加元素
push
例如：this.list.push(this.value)
对数组元素进行截取
splice
删除数组最后一项
pop
删除数组中的第一项
shift
向数组中的第一项增加内容
unshift
对数组元素进行排序
sort
对数组元素进行取反
reverse
引用
除了以上7种变异方法外，还可以通过改变数据的引用，从而改变数组数据
Vue.set()
vue.$set()
遍历
对象
可以通过改变数据的引用，从而改变对象数据
value
key
项目实战
项目初始化
禁用设置
优化设置
全局样式
reset.css
统一页面标签元素在不同浏览器上的默认样式，使其显示效果在所有浏览器上都一致
像素优化
border.css
解决移动端 1px 边框问题
点击延时
cnpm install fastclick@1.0.6 --save
部分机型存在点击事件延迟300毫秒，再执行的问题
webpack
通过webpack配置，简化代码量
阿里图标库
iconfont
https://www.iconfont.cn/
在main.js中引入图标库
CSS开发辅助工具
stylus
cnpm install stylus@0.54.5 --save
stylus中定义变量。并引入
stylus-loader
cnpm install stylus-loader@3.0.1 --save
轮播图插件
vue-awesome-swiper
cnpm install vue-awesome-swiper@2.6.7 --save
在main.js中引入
上下拖动插件
better-scroll
cnpm install better-scroll@1.8.1 --save
获取远程数据
Ajax异步请求
cnpm install axios@0.17.1 --save
axios.get('url')
数据层框架
Vuex
修改公用数据规则
cnpm install vuex@3.0.1 --save
在store文件夹下的index.js文件中定义state、actions以及mutations
state中存放公用数据
action中存放异步方法
mutations中存放的是同步的一些对数据的改变
本地存储
localStorage（html5新增api）
编程式导航
this.$router.push('/')
路由页缓存
<keep-alive />
App.vue根组件中引入
当使用keep-alive时，组件会多出一组生命周期函数
activated
deactivated
递归组件
组件自身调用组件自身
动画插槽
<slot />
解决所有浏览器对ES6语法兼容性的问题
cnpm install babel-polyfill@6.26.0 --save
在main.js文件中引入
Vue2.5开发去哪儿网App—学习小结
环境搭建
node安装
下载nodejs安装包进行安装
node版本检验
node -v
npm -v
npm install --global vue-cli（该脚手架工具安装一次即可）
vue init webpack 项目名
cd 项目名
npm run dev
调试工具
谷歌浏览器
插件
Vue
基础知识
框架
同类型框架
React
Angular
Vue相关框架
NUXT
实现Vue的服务器端绚烂
WEEX
使用Vue语法编写原生APP
语法
.js 基础语法
ES6 基础语法
工具
编译打包工具
npm
node的包管理工具
设计模式
模式
MVP模式（传统【面向 DOM 编程】）
编码重点在 Presenter 层，主要负责操作 DOM 元素
Model：模型层
View：视图层
Presenter：控制器
MVVM模式（Vue【面向数据编程】）
编码重点在 Model层 和 View层，其中侧重 Model层
ViewModel：控制器
ViewModel层架构体系
添加或更改多个对象属性
虚拟DOM机制
Diff算法
同层比对
key值比对
避免页面渲染歧义
注意 key 值的使用
key=\"参数\"
应当避免使用index作为key值
index作为key值不稳定
开发技术
页面布局
全局组件
Vue.component('组件名'， {})
局部组件
在Vue根实例中通过【components: [组件名]】的方式，进行注册
公用组件
拆分公用页面布局
异步组件
按需加载，代码上线，性能更优（适用于复杂项目）
在router文件夹中的index.js中配置
在父组件中配置
实现组件自身调用自身的效果
swiper
实现轮播效果
样式
Stylus
编写前端样式
动画
页面数据
Axios
发送Ajax请求，获取服务端数据
Vue Router
实现多页面之间的路由
路由配置放于router文件夹中的index.js文件中
页面跳转
多页应用
单页应用（Vue）
JS感知页面变化，动态清除当前url，再加载新的url进行页面挂载
首屏页面初始化时，需要进行首屏html文件加载以及整个项目的js文件加载
各个组件之间的数据共享
生命周期
组件初始化相关
beforeCreate
Vue实例进行基础的初始化事件后执行该方法
created
Vue实例处理完成外部注入，包括双向绑定等一系列初始化内容后执行该方法
组件挂载相关
beforeMount
页面渲染之前执行该方法，即模板和数据相结合即将被挂载到页面上的一瞬间
mounted
页面挂载之后执行该方法
组件更新相关
beforeUpdate
当数据改变，组件还未被重新渲染之前执行该方法
updated
当数据改变，组件重新渲染之后执行该方法
组件销毁相关
beforeDestroy
在组件即将被销毁的时候执行该方法
destroyed
在组件被完全销毁之后执行该方法
缓存组件相关（该钩子在服务器端渲染期间不被调用）
被 keep-alive 缓存的组件激活时调用
被 keep-alive 缓存的组件停用时调用
捕获错误相关
errorCaptured
当捕获一个来自子孙组件的错误时被调用
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串
此钩子可以返回 false 以阻止该错误继续向上传播
基础语法
模板语法
插值表达式
{{JS表达式}}
文本显示
v-text
v-text=\"JS表达式\"
html语法解析显示
v-html
v-html=\"JS表达式\"
模板占位符
<template />
实例属性或方法
.$
收藏
收藏
0 条评论
回复 删除
下一页
