表单数据处理
过滤器
过滤器基础使用
过滤器传参使用
多重过滤器使用
局部过滤
全局过滤
内置指令
基础指令
cookie 导入导出工具
获取cookie
v-html
v-cloak
v-once
v-pre 不再解析插值语法,直接显示
自定义指令
自定义指令初级
自定义指令深入
定义全局指令
生命周期
生命函数示意图
组件化
vuecomponent
内置关系
单文件组件
脚手架文件解析
使用不完整的vue模版解析工具,能很好的节省文件大小
main.js
查看webpack配置文件output.js,此文件默认是隐藏只读文件,不可修改,查看可在终端输入vue inspect > output.js
output.js默认配置了main.js入口文件
如果想修改默认配置可使用vue.config.js,调整脚手架工作模式,最终和webpack已有配置相整合
脚手架架构
关于ref 操作dom元素
在标签上挂载ref属性
获取标签使用this.$refs.需要的ref属性值
this下的$refs
props 父传子操作
父组件传参
子组件简单接参,使用
子组件条件接参,使用
子组件完整条件接参,使用
props接收的参数可以直接使用,但最好不要修改,容易产生奇怪的Bug
mixin 混入(多个文件共用一个配置)
新建一个大家都要用的混合js文件,文件里需暴露方法,使用export暴露
需要使用mixin公用文件的组件如何应用
当混入文件和组件内部js发生冲突,则data及方法冲突采用组件内部属性,钩子函数冲突则两端都接受
在main.js中设置全局混合
插件
自定义插件
新建一个插件js文件,我们可以在plugins.js
文件中添加过滤器,自定义的全局指令,mixin混入的属性及方法等等插件,通过export default
暴露,install
写入安装
全局引入插件文件,在
main.js
文件中操作
使用插件里的方法,直接调用方法即可
scoped样式精简
使用scoped主要是为了防止不同组件相同class名的样式覆盖,如果使用了scoped该样式则只能作用于该组件内部
查看webpack版本
查看less-loader版本
使用nanoid插件自动生成id,先npm i nanoid
代码中使用nanoid
reduce统计
项目基础应用,通信
浏览器存储
localStorage(网页关闭,记录依然存在
添加存储,对象需特殊处理(JSON.stringify()
)
localStorage.setItem()
读取存储,对象需特殊处理(JSON.parse()
)
localStorage.getItem()
删除单个存储
localStorage.removeItem()
清空存储
localStorage.clear()
SessionStorage
localStorage.setItem() 增
localStorage.getItem() 获取
localStorage.removeItem() 删除单个
localStorage.clear() 全部删除
watch deep:true
深度监视
组件的自定义事件
子传父的多种传参方式
1、props接参形式,2、v-on绑定监听事件,this.$emit()
触发事件
父组件
子组件
子组件
3、refs绑定监听,this.$emit
调用触发
父组件
子组件
解绑组件绑定事件(this.$off()
,this.$destroy()
)
任意组件间的通讯
兄弟组件通信
注册
$bus
触发
$bus
使用
$bus
解绑
$bus
消息订阅与发布
安装 pubsub-js库
引入pubsub-js库
订阅
发布消息
销毁订阅发布
.hasOwnproperty判断是否拥有某个属性
this.$nextTick
Dom执行完成后再执行this.$nextTick
里的代码
获取焦点
过度与动画
动画
reverse 反向平移
过度
过度组 多动画互动
第三方动画库
安装 npm i animate.css --save
引入库
总结
配置代理
安装 axios npm i axios
引入axios
使用axios(建议使用)
跨域报错
如何解决
1、vue cli 借助vue.config.js文件配置devServer
vue-resource(维护少)
安装
npm i vue-resource
main.js文件中引用vue-resource
使用vue-resource
slot插槽
默认插槽
具名插槽
template能省去结构,v-slot只能用于template身上,普通标签使用slot='插槽名称'
作用域插槽
传参
接参必须使用template结构,三种写法
vuex
数据结构
工作原理
版本要求
安装vuex
src目录下创建store文件夹
简写store文件夹下index.js文件内容
main.js文件中引用vuex,以及store文件夹
vuex,store生效,实例对象上出现$store
问题
解决办法-在store文件里引入使用vue,和vuex
main.js中只引用store即可
实例对象$store包含的方法
vuex store的基础使用
1. 设置参数state
2. 调用dispatch,触发actions里的方法
this.$store.dispatch(actions方法名,参数值)
3. actions确认方法,触发mutations里方法
4. mutations调用方法修改state里参数
5. 获取存储参数渲染页面
this.$store.state.state里的参数名
细节应用
actions处理逻辑,可在此请求后端接口
直接触发mutations里方法修改state里的参数值(没啥逻辑时可使用)
this.$store.commit(mutations里方法名,参数值)
注意:
- 如果在actions里直接修改state里的数据,Devtools开发者工具会失效,Devtools开发者工具只与mutations交互
- 在actions里写逻辑能提高代码的复用性
vuex store getters的使用
vuex关键周边
mapState
mapState引入
导入展开State里的值
mapGetters
mapGetters引入
导入展开getters里的值
mapMutations
mapMutations引入
导入展开Mutations里的方法
总结
路由
图示
1、引入vue router
2、引入router/index.js文件
3、调用路由
4、多级路由
5、路由传参 及获取参数 query
6、命名路由
7、路由传参- params
8、路由传参- props配置
9、路由替换当前历史记录-replace
10、keep-alive
11、全局路由守卫
12、路由模式
后端处理可使用插件或者nginx
小型服务部署使用express
按需引入elementui