第一天
vue快速上手
创建vue实例
插值表达式
<body>
<!--
插值表达式:Vue的一种模板语法
作用:利用 表达式 进行插值渲染
语法:{{ 表达式 }}
注意点:
1. 使用的数据要存在
2. 支持的是表达式,不是语句 if for
3. 不能在标签属性中使用 {{ }}
-->
<div id="app">
<p>{{ nickname }}</p>
<p>{{ nickname.toUpperCase() }}</p>
<p>{{ nickname + '你好' }}</p>
<p>{{ age >= 18 ? '成年' : '未成年' }}</p>
<p>{{ friend.name }}</p>
<p>{{ friend.desc }}</p>
<!-- ----------------------- -->
<!-- <p>{{ hobby }}</p> -->
<!-- <p>{{ if }}</p> -->
<!-- <p title="{{ nickname }}">我是p标签</p> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
nickname: 'tony',
age: 18,
friend: {
name: 'jepson',
desc: '热爱学习 Vue'
}
}
})
</script>
</body>
Vue核心特征:响应式
Vue指令
v-html
v-show vs v-if
v-else and v-else-if attach v-if
v-on
v-on调用传参
v-bind
v-for
案例
v-for 中的 key
v-model
综合案例 - 小黑记事本
<body>
<!-- 主体区域 -->
<section id="app">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input v-model="todoName" placeholder="请输入任务" class="new-todo" />
<button @click="add" class="add">添加任务</button>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item, index) in list" :key="item.id">
<div class="view">
<span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
<button @click="del(item.id)" class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length">
<!-- 统计 -->
<span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
<!-- 清空 -->
<button @click="clear" class="clear-completed">
清空任务
</button>
</footer>
</section>
<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
todoName: '',
list: [
{ id: 1, name: '跑步一公里' },
{ id: 3, name: '游泳100米' },
]
},
methods: {
del(id) {
// console.log(id) => filter 保留所有不等于该 id 的项
this.list = this.list.filter(item => item.id !== id)
},
add() {
if (this.todoName.trim() === '') {
alert('111')
return
}
this.list.unshift({
id: +new Date(),
name: this.todoName
})
this.todoName = ''
},
clear() {
this.list = []
}
}
})
</script>
</body>
第二天
指令补充 指令修饰符
v-bind 对于样式控制的增强
案例:tab栏切换
v-bind 对于样式控制的增强 - 操作style
v-model 应用于其他表单元素
<body>
<div id="app">
<h3>小黑学习网</h3>
姓名:
<input type="text" v-model="username">
<br><br>
是否单身:
<input type="checkbox" v-model="isSingle">
<br><br>
<!--
前置理解:
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性,用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input v-model="gender" type="radio" name="gender" value="1">男
<input v-model="gender" type="radio" name="gender" value="2">女
<br><br>
<!--
前置理解:
1. option 需要设置 value 值,提交给后台
2. select 的 value 值,关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select v-model="cityId">
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">成都</option>
<option value="104">南京</option>
</select>
<br><br>
自我描述:
<textarea v-model="desc"></textarea>
<button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
isSingle: false,
gender: "2",
cityId: '102',
desc: ""
}
})
</script>
</body>
conmpute计算属性
计算属性 vs 方法
计算属性完整写法
综合案例-成绩案例
watch监视器
防抖,前后端交互
第三天
生命周期
工程化开发入门& 脚手架 Vue CLI
App.vue根组件
普通组件的注册使用
综合案例:小兔鲜首页
第四天
组件的样式冲突 scoped
data 是一个函数
组件通信 父子关系
什么是 prop
props是单向数据流
props 校验
小黑记事本组件版
m0n-k1y/vue-self-exercise (github.com)
非父子通信 - event bus 事件总线
非父子通信 (拓展) - provide & inject
推荐 父组件provide 写复杂类型 以获得响应式效果
进阶语法
v-model 原理
在父子组件通信中
v-model不能与props传递的数据进行绑定
因为子传父是被限制的,props是单向数据流
所以要将v-model拆解
表单类组件封装(父子组件 数据双向绑定)
v-model 简化封装代码
.sync修饰符
ref 和 $refs
Vue异步更新、$nextTick
第五天
自定义指令
自定义指令 - v-loading 指令封装
插槽(默认插槽--组件内定制一处结构)+(具名插槽--组件内定制多处结构)
插槽 - 默认插槽
插槽 - 后备内容(默认值)
插槽 - 具名插槽
插槽 - 作用域插槽
综合案例---商品列表
Vue-Router初级
单页应用程序SPA & 路由介绍
VueRouter
组件存放目录(页面组件&复用组件)
Vue-Router进阶
路由模块封装
声明式导航
声明式导航 & 导航高亮
声明式导航 - 两个类名
自定义高亮类名
声明式导航传参
查询参数传参
动态路由传参
动态路由参数可选
路由重定向
路由404
路由模式
编程式导航
基本跳转
编程式导航传参
path 路径跳转传参
查询参数传参
动态路由传参
name 命名路由跳转传参
查询参数传参
动态路由传参
案例:面经基础版
二级路由规则(子路由)
axios请求数据
组件缓存keep-alive
自定义创建项目
ESlint 代码规范
vuex
构建 vuex [多组件数据共享] 环境
创建一个空仓库
核心概念 - state 状态
核心概念 - mutations
辅助函数 - mapMutations
核心概念 - actions
辅助函数 - mapActions
核心概念 - getters
核心概念 - 模块 module (进阶语法)
Vue智慧商城项目
vant 组件库
vant 全部导入 和 按需导入
项目中的 vw 适配
路由设计配置
图形验证码功能完成
api 接口模块 -封装图片验证码接口
Toast 轻提示
短信验证倒计时
登录功能
响应拦截器统一处理错误提示
登录权证信息存储
storage存储模块 - vuex 持久化处
添加请求 loading 效果
页面访问拦截
Vue 3
Vue3的优势
Vue2 选项式 API vs Vue3 组合式API
create-vue搭建Vue3项目
认识 create-vue
使用create-vue创建项目
项目目录和关键文件
组合式API - setup选项
setup选项的写法和执行时机
<script setup> 语法糖
组合式API - reactive和ref函数
reactive()
ref()
组合式API - computed
06
组合式API - watch
watch函数
基础使用 - 侦听多个数据
immediate
deep
精确侦听对象的某个属性
组合式API - 生命周期函数
Vue3的生命周期API (选项式 VS 组合式)
生命周期函数基本使用
执行多次
组合式API - 父子通信
组合式API下的父传子
组合式API下的子传父
组合式API - 模版引用
模板引用的概念
如何使用(以获取dom为例 组件同理)
defineExpose()
组合式API - provide和inject
作用和场景
跨层传递普通数
跨层传递响应式数
跨层传递方法
需求解决思考
Vue3.3新特性-defineOptions
Vue3.3新特性-defineModel
Vue3 中的 v-model 和 defineModel
Pinia 快速入门
什么是Pinia
手动添加Pinia到Vue项目
Pinia基础使用 - 计数器案例