vue3从入门到精通
CDN方式使用vue:
获取复杂数据类型:
使用结构复制语法去除vue前缀:
使用模块化开发:
需要安装插件live server:
需要访问网络地址:
简单数据类型ref的使用:
如何修改number
reactive修改值不需要.value:
ref也可以储存数组类型:
添加绑定事件:
v-on:click简写形式:
按键松开事件:
true和false的快速切换:
v-show显示与隐藏:
v-if的使用:
v-bind动态数据绑定:
简写形式:
v-for的使用:
键值对的使用:
map数组的显示:
v-for条件判断:
如何取对象数据:
v-for ‘title’的使用:
设置唯一key的作用——提升性能:
v-model双向数据绑定:
text:
radio:
checkbox:
单个checkbox:
select:
v-model修饰符:
v-model.lazy延迟绑定:
v-model.number:
v-model.trim:
v-html、v-text:
computed函数计算:
监听器watch:
JS中对象和数组是通过引用传递的,而不是通过值传递。当修改对象或数组的值时,实际上修改的是对象或数组的引用,而不是创建一个新的对象或数组。所以,如果修改了对象或数组的值,那么打印出来的结果则是修改后的值。
可以监听某个函数达到监听数值的变化情况:
watchEffect:(自动监听)
图片轮播:
下一张:
上一张:
单张图片跳转:
添加数据:
显示data中的数据:
删除数据:
清空数据:
全选、取消全选:
修复去除某一项后全选按钮不取消的问题:
价格计算:
商品加减:
sub
add
删除数据:
修复全选勾选状态问题:
使用watch(监听器)对购物车change代码进行优化:
import watch
实现全选,取消全选功能:
使用watch实现总价计算方法:
使用axios实现文章搜索:
接口调用:
ID搜索:
标题搜索:
实现数据的页面展现:
查询前清空数据:
基础vite创建vue3项目:
语法高亮插件vue-official:
自定义代码片段插件vue vsCode snippets:
实际开发中使用组件构建后的代码风格:
创建组件:
header.vue
调用组件:
父传子defineProps:
header:
footer:
父传子非响应式数据:
父传子响应式数据:
子传父defineEmits:
跨组件通信provide:
非响应式数据:
响应式数据:
匿名插槽&具名插槽:
匿名插槽:
具名插槽:
作用域插槽:
生命周期函数:
onMounted:
onUpdated:
其他生命周期函数:
toRef&toRefs:
常规用法——非响应式数据:
toRefs——响应式数据:
toRef——把某个属性转化为响应式数据:
pinia简介:
pinia安装:
定义一个useWebStroe仓库:
调用仓库:
pinia持久化存储:
安装插件:
导入插件及使用:
仓库中应用持久化存储:
为什么不直接使用localStorage?