Ending
Thanks for your time
Final
R&D
主页 HomeView.vue
菜单 MenuView.vue
商城 MallView.vue
会员卡 MembershipView.vue
我的 MineView.vue
数据请求 Fetch
数据请求 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
Registration
defineProps()
defineEmits()
provide/inject
商品组件 Goods.vue
详情组件 Swiper.vue
Watch
软4
表单双向绑定 v-modal
侦听 Watch
Source
Callback
Options
. deep
. immediate
自动侦听 WatchEffect
生命周期函数 LifeCycle
onmounted
onUnmounted
LoginView.vue
Cart.vue → 总价结算
扩展
正则表达式 RegExp
Event
软3
事件绑定 @
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