导图社区 Vue基础
这是一篇关于Vue基础的思维导图。一起来看一看吧!
社区模板帮助中心,点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
Vue基础
Vue动画
入场动画和离场动画
入场动画
v-enter:入场前的样式
v-enter-to入场完成后的样式
v-enter-active入场的时间段
离场动画
v-leave离场的样式
v-leave-to离场完成后的样式
v-leave-active离场的时间段
子主题
使用过渡类名
把需要添加动画的元素,使用v-if或者v-show控制
<transition>元素包裹
添加两组类
.v-enter,.v-leave-to
.v-enter-active,.v-leave-active
使用第三方CSS动画库
需要添加动画的元素v-if或v-show进行控制
需要添加动画的元素用<transition>包裹
<transition>添加两个属性类enter-active-class,leave-active-class
把需要添加动画的元素,添加一个class='animated'
v-for的列表过渡
把v-for循环渲染的元素,添加:key属性
在v-for循环渲染的元素外层,包裹<transiton-group>标签
添加两组类.v-enter,.v-leave-to和.v-enter-active,.v-leave-active
生命周期
生命周期:实例的生命周期,就是一个阶段,从创建到运行,再到销毁的阶段
生命周期函数:在实例 的生命周期中,在特定阶段执行的一些特点的事件,这些事件叫做生命周期函数
实例创建阶段
beforeCreate
created
beforeMount
mounted
实例运行阶段
beforeUpdate
updated
实例销毁阶段
beforeDestory
destoryed
Vue过滤器
全局 过滤器
局部过滤器
JS单线程和异步
Promise
then
catch
async和await
异步操作
axios
导入
Vue.prototype.$http 使用时用 this.$http.get/post
axios.defaults.baseURL定义base地址和后面的请求地址进行拼接
配合 await 和 async
post请求
get请求
webpack
elemetn-ui
全部引入
按需引入
v-cli快速构建项目
编程式导航
this.$router.push('路径的地址)
this.$router.go(n)
this.$router.forward()
this.$router.back()只能后退一步
路由管理
路由配置四步走
导入 router: import VueRouter from 'vue-router'
挂载到Vue : Vue.use(VueRouter)
配置路由规则:const router=new VueRouter({ routes:[{path: 锚链接 , component: 组件},{规则2},{规则3} ]
挂载到Vue实例中:router
路由守卫
router.beforeEach(to, from ,next)=>{处理逻辑})
嵌套路由
children
路由规则传值
this.$route.params
开启props
路由命名
路由重定向
组件
全局组件和局部组件
组件传值
父与子组件
属性绑定
props接收
lodash深拷贝
子与父组件
事件绑定
$on 注册事件以及事件处理函数
$emit触发事件以及传参
兄弟组件
通过bus中间js文件,来注册事件,触发事件传值
ref引用组件
this.refs.??
.Vue文件
template模板
script行为
export default导出
style 样式
scope属性,避免样式冲突
插槽
匿名插槽
具名插槽
作用域插槽
ES6导入与导出
默认导入导出
默认导出
export default{}
默认导入
import 接收名称 from '模块名称'
按需导入和导出
import {成员名称} from '模块名称'
export var a = 10
watch监听
监听某个数据变化后侧重于做某件事情
computer计算属性
同时监听多个数据变化后,侧重于得到一个新的值