Ending
Thanks for your time
Final
R&D
主页 HomeView.vue
菜单 MenuView.vue
商城 MallView.vue
会员卡 MembershipView.vue
我的 MineView.vue
数据请求 Axios
Third Party*
Iconfont
Swiper
LBS
NProgress
主轮播 Swiper.vue
福利轮播 Welfare.vue
地图 Map.vue
Built-in
<KeepAlive>
<Transition>
<TransitionGroup>
Pinia
cart.js
order.js
lbs.js
Pinia
Store
goods.js
Router
Style
router-link-active、router-link-exact-active
activeClass、exactActiveClass
linkActiveClass、linkExactActiveClass
Guards
beforeEach
afterEach
beforeEnter
更新页面标题
页面加载进度条
Router
Params
Query
useRoute()
useRouter()
$route
$router
Router
createRouter()
history
routes
. path
. name
. component
. meta
. children
. redirect
. props
linkActiveClass
linkExactActiveClass
<router-link>
<router-view>
Component
Style
scoped
:deep(selector)
:slotted(selector)
:global(selector)
Component
defineModel()
slots
Dynamic
Async*
Component
软4
Registration
defineProps()
defineEmits()
provide/inject
商品组件 Goods.vue
详情组件 Swiper.vue
Watch
软3
表单双向绑定 v-modal
侦听 Watch
Source
Callback
Options
. deep
. immediate
自动侦听 WatchEffect
生命周期函数 LifeCycle
onmounted
onUnmounted
Message.vue
LoginView.vue
Cart.vue → 总价结算
Tabcard.vue → 数据加载
扩展
数据请求 Fetch
异步等待 async-await
正则表达式 RegExp
Event
事件绑定 @
click
keydown、keyup
mousedown、mouseup、mousemove...
submit、reset
change、input、blur、focus
事件修饰符 Mofifier
prevent
stop
self
DetailsView.vue → inc() dec()
DetailsView.vue → 模态框/交易保障
扩展
函数：具名函数、匿名函数、箭头函数、函数表达式
Rendering
条件渲染 v-if
条件渲染 v-show
列表渲染 v-for
- :key
<template>
Swiper.vue
Goods.vue
扩展
Vue dev tools
定时器 setInterval()、clearInterval()
生命周期函数 onMounted()、onUnmounted()
Rendering
计算属性 Computed
Luckin Coffee Project
CSS：iconfont
GoodsItem.vue
Goods.vue
HomeView.vue
GoodsItem.vue → 价格折扣 price
扩展
CSS 变量
CSS 函数
Reactivity
ref()
- .value
reactive()
属性绑定 v-bind
:class
:style
Theme.vue
TabCard.vue
扩展
常量声明 const
Template Syntax
内容绑定 {{}}
属性绑定 v-bind
:src
GoodsItem.vue
项目创建 Project
创建组件 Component
引入组件 Import
使用组件 Usage
渲染视图 Rendering
扩展
变量声明 let
数据类型 Number String Array Object
IDE
课程安排
开发环境：Vs Code、Chrome、Node.js
项目 Project
项目创建 Create
项目架构解读 Architecture
项目开发 Development
项目发布 Build
项目预览 Preview
HelloWorld