vue知识梳理
作为三大框架之一,vue相比于其他框架,有着简单、易用、灵活等特点
生命周期
- init:初始化时最先进入的生命周期函数,可在此函数中进行一些操作
- beforeCreated:页面创建前进入的周期函数
- created:页面创建后进入的周期函数,一般在此调取接口获取后端数据等等操作
- beforeMount:节点挂载前进入的周期函数
- mounted:节点挂载后进入的生命周期函数
- beforeUpdate updated:页面数据发生改变时进入的周期函数
- beforeDestroy destoryed:销毁时进入的周期函数
- activated:进入keep-alive组件触发的生命周期函数
- deactivated:退出keep-alive组件触发的生命周期函数
页面第一次加载进入哪几个生命周期函数?
- init
- beforeCreated
- created
- beforeMount
- mounted
常见指令
- v-if 相当于js中的if判断,可用于对样式的判断 缺点消耗内存 尽量不可跟v-for同行使用 会报错
- v-show 与v-if类似 他们两个的不同之处就在于v-show是样式上的控制显隐 v-if是对dom进行删除增加操作
- v-bind 绑定数据 可简写:
- v-on 绑定事件 可简写@
- v-for 相当于js中的for循环 写法为 v-for='(item,index) in data' :key='index' 使用for之后需绑定key值 目的是为了高效的渲染虚拟dom
- v-model vue中强大的双向数据流绑定技术 通过数据劫持等原理实现
模板语法 以及结构
计算属性以及监听器
- computed:计算属性 当数据发生改变时会自动进行工作 常用与购物车模块等计算工作
- watch:侦听属性 Vue 提供的一种更通用的方式来观察和响应 Vue 实例上的数据变动 相比较于计算属性,计算属性更为强大,但是有时还是需要watch来动态监听一些事物,比如router
组件的使用
封装公共组件,通过export导出,哪个页面需要这个公共组件就使用import进行导入即可,vue中组件首字母需大写且引入之后需要注册
组件传值
- 父传子:父组件使用bind绑定数据写法为 :message=message,子组件中使用props接受,与data同级别,可定义接受值的类型与默认值
- 子传父:父组件绑定事件,子组件使用this.$emit()来触发事件,第一个值为父组件中绑定的函数名,第二个值为传递的参数
- 非父子传值:可使用$on或者vuex来进行,简单来说就是怎么简单怎么来
常见修饰符
- .self:当元素自身被触发时才进行的行为操作,不会冒泡或者捕获
- .prevent:阻止默认行为 比如a链接的跳转
- .stop:阻止冒泡
- .once:只会触发一次
插槽
- 匿名插槽:顾名思义,就是没有名字的插槽
- 具名插槽:顾名思义 就是有名字的插槽 加上name属性
- 作用域插槽:父组件引用子组件中的数据 父组件中使用slot-scope来接收传递的数据
vue-router
最简单的路由模块 如下图所示:
常见的路由模式:
- hash:携带#号
- history:正常的路由 需要后端配合
注册路由:
- 引入对应的vue文件
- 在routes中注册 语法如下
路由拦截器:
router.beforeEach(to,from,next)=>{},三个参数顾名思义,to代表去哪个路由,比如to.path=='/login',可在此判断中是否为登录状态,from代表来自哪里,无论如何,记得next放行
路由写法:
- {path:'',name:'',component:''}
- {path:'',name:'',component:'',children:{}} 嵌套写法
keep-alive
在vue中,如果你想某些页面不让他重新渲染,你可以使用keep-alive缓存
用法:
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
<router-view></router-view>
</keep-alive>
include定义缓存白名单,keep-alive会缓存命中的组件;exclude定义缓存黑名单,被命中的组件将不会被缓存;max定义缓存组件上限,超出上限使用LRU的策略置换缓存数据。
v-model
- text 和 textarea 元素使用
value
property 和input
事件; - checkbox 和 radio 使用
checked
property 和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
v-model上面的修饰符
- .lazy
- .trim
- .number