emmmm.....

Vue笔记目录说明：本笔记根据如下笔记和平时学习视频截图进行整理天禹老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU笔记在线版： https://note.youdao.com/s/5vP46EPC视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通二刷vue一刷笔记：Vue学习----从基础出发(包含案例)持续更新文章目录1. Vue 简介1. Vue 简介...

创建Vue3项目vue-clivite项目结构Vue3开发者工具的安装初识setupref 函数reactive函数Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式reactive对比refsetup的两个注意点computed函数watch函数watchEffect函数生命周期自定义hook函数toRefshallowReactivereadonly 与 shallowReadonlytoRaw 与 markRaw

1. vue-cli初始化项目1.1 创建项目1.2 项目文件夹及文件说明2. 项目的其他配置2.1 项目运行起来浏览器自动打开2.2 eslint 校验功能关闭2.3 配置 src 文件夹的别名3. 项目开发的一般步骤

1. 路由守卫1.1 概念1.2 分类2. 全局路由守卫2.1 全局前置路由守卫2.2 meta2.3 全局后置路由守卫3. 独享路由守卫4. 组件内路由守卫5. 总结 路由守卫

1. 缓存路由组件3. activated()与deactivated()

2. 路由 query 传参2.1 使用 query 传参2.1.1 to 的字符串写法2.1.2 to 的对象写法2.2 组件接收 query 参数2.3 总结 路由 query 传参3. 命名路由3.1 配置命名路由3.2 使用命名路由3.3 总结 命名路由4. 路由 params 传参4.1 使用 params 参数4.1.1 设置路由地址占位符4.1.2 params 参数字符串写法4.1.3 params 参数对象写法4.2 组件接收 params 参数4.3 总结

1. 静态页面2. 组件的拆分2.1 目录结构2.2 组件3. 嵌套路由的配置

1. 相关概念1.1 SPA1.2 vue-router1.3 路由2. 路由的基本使用2.3 安装 vue-router2.4 引入与使用 vue-router 插件2.5 新建文件夹创建路由器2.6 引入并配置路由器2.7 实现导航区地址修改2.8 当前路由对应的组件的呈现3. 几个注意点4. 总结 路由及路由的基本使用4.1 路由4.2 基本使用

多组件共享数据与vuex模块化3.1. 目的3.2. 修改```store.js```3.3 开启命名空间后，组件中读取state数据3.4. 开启命名空间后，组件中读取getters数据：3.5. 开启命名空间后，组件中调用dispatch3.6. 开启命名空间后，组件中调用commit

1. vuex1.1 vuex 是什么1.2 什么时候使用 vuex2. 求和案例3. vuex 工作原理4. 搭建 vuex 环境4.1 安装 vuex4.2 新建 store 文件夹4.3 store 配置项5. 求和案例(vuex版)6. store 中的 getters 配置项6.1 getters 配置项6.2 读取 getters 配置项中的值7. mapState & mapGetters7.1 mapState 生成 state 数据对应的计算属性7.1.1 对

1. vue-resource1.1 安装 vue-resource1.2 导入 vue-resource1.3 使用插件 vue-resource1.4 使用 vue-resource 发送请求2. github 案例 vue-resource 发送请求

1. 案例效果2. 静态页面3. 组件的拆分3.1 目录结构3.2 引入第三方css样式3.3 拆分组件4. 列表展示实现4.1 查询请求数据4.2 数据传递4.2.1 安装全局事件总线4.2.2 全局事件总线绑定自定义事件4.2.3 触发全局事件总线事件4.3 列表数据展示4.3.1 需要使用的数据4.3.2 数据展示5. 完善案例

1. 使用 axios 发送请求1.1 安装 axios1.2 引入 axios1.3 发送请求2. 借助vue-cli开启代理服务器2.1 方法一2.2 方法二3. vue脚手架配置代理 总结3.1 方法一3.2 方法二

1. 绑定class样式实现动画效果2. transition 标签实现动画效果2.1 语法2.2 动画实现2.3 为 transition 标签指定名字2.4 页面加载完成立即执行动画3. 通过过渡实现动画效果4. 多个元素过渡4.1 实现多个元素同时显示同时隐藏4.2 实现一个元素显示一个元素隐藏5. 第三方动画库5.1 安装5.2 引入5.3 配置5.4 设置进入页面和离开页面的动画5.5 实例效果6. 动画与过渡 总结

1. $nextTick()1.1 语法1.2 作用1.3 使用时机2. $nextTick() 使用实例

1. 消息的订阅与发布1.1 简介1.2 pubsub-js1.2.1 安装1.2.2 引入1.2.3 订阅消息1.2.4 发布消息1.2.5 取消订阅2. 消息的订阅与发布实现组件通信3. 消息的订阅与发布 总结

1. 全局事件总线2. $on() $off() $emit() 存放位置3. 组件实例对象作为全局事件总线4. Vue实例对象作为全局事件总线5. 事件总线实现组件数据互传

自定义事件1. 自定义属性实现子组件向父组件传递数据2. 自定义事件实现子组件向父组件传递数据2.1 进行自定义事件的绑定2.2 触发自定义事件2.3 使用 ref 绑定自定义事件2.3.1 语法2.3.2 自定义事件的绑定2.3.3 使用 ref 绑定自定义事件的好处2.4 触发自定义事件向处理函数传递多个参数2.5 自定义事件只触发一次2.6 解绑自定义事件2.6.1 语法2.6.2 解绑一个自定义事件2.6.3 解绑多个自定义事件2.6.4 解绑所有自定义事件3. 自定

1. 组件化编码流程（通用）2. 页面组件的划分3. 静态页面代码4. 静态页面组件化拆分5. 初始化数据列表6. 添加列表数据7. 勾选8. 删除9. 底部待做事项状态统计10. 全选 & 清除已完成

1. 插件2. 插件的定义3. 插件的使用

1. mixin 混入2. 未使用混入的页面3. 将相同的配置项抽取4. mixin 混入的使用5. mixin中的配置项与组件的配置项冲突5.1 普通配置项5.2 生命周期钩子6. mixin 总结

1. ref 属性1.1 ref 属性的使用方式1.1.1 标识元素或子组件1.1.2 获取标识的元素或子组件1.2 使用 ref 属性标记 html 标签元素1.3 使用 ref 属性标记子组件1.4 使用 id 获取元素或子组件

文章目录vue-cli1. vue-cli2. 安装 vue-cli2.1 解决 Windows PowerShell 不识别 vue 命令的问题3. 创建项目4. 基于 vue ui 创建 vue 项目步骤1：在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板步骤2：在详情页面填写项目名称步骤3：在预设页面选择手动配置项目步骤4：在功能页面勾选需要安装的功能步骤5：在配置页面勾选 vue 的版本和需要的预处理器步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之

1. Vue 脚手架(CLI)2. Vue CLI 的安装2.1 全局安装 Vue CLI2.2 检验是否安装成功3. 使用 Vue CLI 创建项目3.1 基于命令行的方式创建 vue 项目3.1.1 使用 Vue CLI 提供的默认预设创建 vue2 项目3.1.2 手动配置预设创建 vue2 项目3.2 停止项目运行3.3 基于可视化面板创建 vue 项目3.3.1 创建 vue2 项目4. 分析脚手架创建的项目结构4.1 项目文件目录4.2 package.json4.3

1. 打开 Windows PowerShell2. Windows PowerShell 不识别 vue 命令报错信息3. 解决方案4. 以管理员身份运行 Windows PowerShell

1. 对组件的理解1.1 传统方式编写网页1.2 组件方式编写页面2. 定义/创建组件2.1 非单文件组件2.1.1 创建组件2.1.2 注册组件(局部注册)2.1.3 使用组件2.1.4 页面完整代码2.1.5 注册组件(全局注册)2.1.6 非单文件组件 总结2.2 组件的注意点2.2.1 组件的名称由一个单词组成2.2.2 组件的名称由多个单词组成2.2.2.1 写法一(kebab-case命名)2.2.2.2 写法二(CamelCase命名)2.2.3 组件的name

1. 生命周期2. 生命周期流程2.1 初始化2.1.1 beforeCreate()2.1.2 created()2.2 模板的编译2.2.1 outerHTML & innerHTML2.2.2 beforeMount()2.2.3 mounted()2.2.4 template配置项提供模板2.2.5 $el2.3 数据更新2.3.1 beforeUpdate()2.3.2 update()2.4 销毁2.4.1 beforeDestroy()2.4.2 destroy

1. 自定义指令1.1 语法1.2 自定义指令的参数2. 自定义指令实现数值放大10倍2.1 查看自定义指令的参数2.2 需求的实现2.3 自定义指令调用的时机2.3.1 指令与元素成功绑定时（初始化页面）2.3.2 所在的模板被重新解析时3. 自定义指令让其所绑定的input元素默认获取焦点3.1 需求实现3.2 需求未实现的解释3.3 对象形式自定义指令3.4 对象形式自定义指令实现需求4. 自定义指令注意点4.1 指令名多个单词之间使用短线符连接4.2 自定义指令中的t

1. 学过的指令的总结2. v-text 指令3. v-html 指令3.1 示例3.2 v-html 的安全性问题3.3 v-html 总结4. v-cloak 指令5. v-once 指令6. v-pre 指令

1. 需要实现的案例效果2. 时间格式化包2.1 moment.js2.2 day.js3. 计算属性与方法实现3.1 计算属性实现3.2 方法实现4. 过滤器4.1 语法4.2 过滤器实现时间戳的转换4.3 过滤器的执行过程4.4 向过滤器传递其他参数4.5 串联调用过滤器4.6 定义全局过滤器4.7 在v-bind中使用过滤器5. 总结 过滤器

1. 用于数据收集的页面2. 输入框的数据收集3. 单选框(radio)的数据收集4. 复选框(checkbox)的数据收集5. 下拉选择框(select)的数据收集6. textarea的数据收集7. 复选框收集checked值8. v-model修饰符9. v-model收集表单数据完整代码10. 总结 收集表单数据

1. Vue数据更新时的一个问题2. Vue监测对象数据的原理3. Vue.set()4. Vue监测数组数据的原理5. 练习5.1 题5.2 功能实现6. 总结 Vue监视数据的原理

1. 列表渲染1.1 v-for1.2 v-for 中的索引2. v-for 遍历数组3. v-for 遍历对象4. v-for 遍历字符串5. v-for 遍历指定次数6. key的作用与原理6.1 key6.2 key错误演示6.2.1 index作为key6.2.2 不写key6.2.3 出现错误的解释6.3 可以对数组数据进行唯一标识的作为key6.3.1 示例6.3.2 解释6.4 key的作用6.5 用index作为key可能会引发的问题6.6 开发中如何选择

1. 使用v-show做条件渲染2. 使用v-if做条件渲染3. v-else-if 与 v-else4. template5. v-if 和 v-show 的区别

1. 绑定class样式1.1 class 样式1.2 绑定class样式字符串写法1.3 绑定class样式数组写法1.4 绑定class样式对象写法2. 绑定style样式2.1 绑定style样式对象写法2.2 绑定style样式数组写法2.2.1 写法一2.2.2 写法2

1. 实现效果2. methods实现3. js表达式实现4. 监视属性实现4.1 handler()4.2 immediate4.3 通过vue实例对象监视属性4.4 深度监视4.5 监视属性的简写4.6 $watch()监视属性的简写4.7 监视属性实现天气案例5. 监视属性与计算属性的对比5.1 监视属性实现姓名案例5.2 案例结果显示延时5.2.1 监视属性实现5.2.2 计算属性实现5.3 监视属性与计算属性的对比总结

计算属性，即使用原有的data中的属性进行处理，处理后生成新的属性。在vue中，计算属性写在配置项computed中，配置项computed需要书写成对象形式。如果要使用计算属性，那么需要在计算属性中实现get()方法：使用计算属性的方式与使用data中的属性的方式一样，直接使用即可。计算属性相比于methods的优势：

1. 事件处理1.1 事件绑定指令1.2 元素事件绑定代码示例1.3 事件处理函数的参数1.4 事件处理函数的this1.5 事件处理函数存放位置2. 事件修饰符3. 键盘事件

1. Object.defineProperty()方法1.1 使用Object.defineProperty()向对象中添加属性1.2 使用Object.defineProperty()添加的属性默认不可枚举1.3 使Object.defineProperty()添加的属性可枚举1.4 使Object.defineProperty()添加的属性值可以修改1.5 使Object.defineProperty()添加的属性可以删除1.6 新添加的属性赋值为另外定义的变量1.7 修改新添加的属性值

[Vue] el 与 data 的两种写法1. el 的写法1.1 写法11.2 写法22. data 的写法2.1 写法12.2 写法2