vue
2020-10-06 20:54:43 85 举报AI智能生成
vue基础知识
作者其他创作
大纲/内容
生命周期
创建
初始化数据
beforecreate
created
数据可用
创建Dom
beforemount
mounted
运行
beforeupdate
updated
销毁
beforedestory
实例仍然完全可用
destory
其他
activated
计算属性、监听、方法
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
组件内的守卫(组件内钩子)
1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
路由传参
开发流程
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 条评论
下一页
