vue
2020-10-06 20:54:43 87 举报AI智能生成
vue基础知识
作者其他创作
大纲/内容
生命周期
创建
初始化数据
beforecreate
created
数据可用
创建Dom
beforemount
mounted
运行
beforeupdate
updated
销毁
beforedestory
实例仍然完全可用
destory
其他
activated<br>
计算属性、监听、方法
computered
watch
计算属性和方法的区别
状态机vuex
状态管理库，数据共享
场景
购物车、loading
5个核心概念
作用
语法
state
共享
store
mapState能够映射state
getter
mutation
类似于事件
组成
action
module
路由
路由作用
将组件和路由映射
告诉router将组件显示到哪里去
路由概念
Vue Router 是 Vue.js 官方的路由管理器
前端路由后端路由区别
前端路由切换时候不发送htpp请求
开启session，cookie存储一个sessionid
路由模式
history
hash
路由配置方法
1.下载安装 引入挂载 Vue.use（）
2.创建组件
3.路由和映射
4.创建路由实例
5.将路由挂载到vue实例上
router-link
路由跳转
router-view
路由出口
meta
路由原信息
title
标题
auth
是否验证
keeep-alive
是否缓存
导航
编程式导航
通过脚本,push
声明式导航
router-link
$router
路由实例
$route
路由信息对象
path
name
meta
params
query
动态路由
路由守卫
boforeEach
afterEach
boforeEnter
组件内的守卫(组件内钩子)<br>1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave <br>
路由传参
开发流程
vue-cli搭建开发环境
创建项目方式（2种）
图形化界面
vue ui
命令行
vue creat projectname
命令行
选择预设
手动配置
babel（ES6=>ES5）实现兼容
TpyeScript
PWA
Router
Vuex
css预处理器
eslint
unit testing:JEST
E2E
路由模式
使用hash模式，不使用history模式
css预处理器
校验规则
单元测试（jest自动化测试工具）
安装相关插件、第三方依赖
vuex
vue-router
使用步骤
下载插件
引入import
挂载插件Vue.use()
配置相关路由
组件开发
测试
打包
vue.config.js
部署上线
更新维护
指令
特殊属性，具有特殊行为
14个指令
v-text
v-html
v-for
v-if
v-else
v-elseif
v-show
v-bind :
v-on @
v-model
v-pre
v-cloak
v-slot #
作用域插槽
v-if v-show的区别、优先级
参数：v-bind v-on
修饰符
双向绑定v-model
实例属性/方法
template
data
props
watch
componends
methods
组件
概念
对html的封装、自定义的标签、能够重复调用、vue的实例
组成
页面结构、样式、逻辑结构
template、script、style:全局，局部（scoped,lang）
分类
全局组件
vue.component()
局部组件
组件实例里面components:{}
命名
防止现有标签冲突
短横线分隔命名
van-footer、my-footer
首字母大写命名（驼峰）
Dom解析
标签布局嵌套
<table><tr is="my-row"></tr></table>
模板里面有且只有一个根元素
data为什么要写成函数 return
组件要复用，让数据不会相互影响
css样式穿透 >>>选择器
组件通信
父子组件
父向子 props
子向父 $emit 自定义事件
兄弟组件 vuex
props
单向数据流，只能父向子
props验证
数据类型（可以一个类型，也可以多个类型）
必填 required
默认值 default
如果默认值是数组、对象 需要用工厂函数的方式返回
自定义规则
validate
插槽
指定父组件分发的内容所显示的位置
类型
默认插槽（后备插槽）
具名插槽
为了能够将内容分发到指定的位置
作用域插槽
动态组件
0 条评论
下一页
