Vue自学笔记

插槽 默认插槽 在App组件内使用双标签引用子组件 在子组件内写入slot（插槽）标签等待接收传递内容 在双标签内传入需要插槽接收的内容 App组件 Category组件 具名插槽 同时使用多个slo

vue-resource 一个通过XMLHttpRequrest 或JSONP 技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和

gitHub案例 静态组件 包括搜素组件和列表组件 App组件 Search组件 List组件 列表展示 双向绑定搜索框内的值 点击按钮获取搜索列表 使用全局事件总线实现兄弟组件间传值 将列表渲染至页

配置代理 方法一 在vue.config.js中添加配置 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可 缺点： 不能配置多个代理 不能灵活控制是否启用代理 工作方式：按照上述方式配置

集成第三方动画 安装第三方库 引入 配置 使用 总结 作用：在插入、更新或移除DOM元素时，在适当的时候给元素添加样式类名 图示 写法： 准备好样式 元素进入样式 v-enter：进入的起点 v-en

过度效果 新建组件Test2并在App组件中进行注册和引用 给组价中需使用动画的标签使用transition标签进行包裹 写好标签的初始样式 配置过度动画 App组件 Test2组件 多元素过度 使用

动画效果 定义一个组件并注册 给组件设置相应的数据与动画 使用transition标签将需要实现动画效果的标签包裹起来 设置好规定的样式名并写好需要的样式 若transition中使用name属性，则

Todo-list编辑功能 新增编辑按钮和input输入框并添加相应样式 点击编辑按钮，文本内容隐藏，input显示，其中的值为文本相应的值 修改其中的值，在input输入框失去焦点时更新修改内容 A

消息订阅与发布（pubsub） 组件间通信方式，可实现任意组件间通信 使用步骤 安装pubsub npm i subsub-js 按需引入 import pubsub from ‘pubsu-js’

全局事件总线（GlobalEventBus) 一种组件间通信方式，可实现任意组件间通信 安装全局事件总线 使用事件总线 接收数据：需要就收数据的组件中给$bus绑定自定义事件，事件的回调在该组件自身

组件自定义事件 是一种组件间通信的方式，适用于：子组件===>父组件 使用场景：子组件向父组件传递数据，在父组件中绑定事件回调，使用子组件时绑定自定义事件 组件绑定原生DOM事件需在事件名后添加.na

浏览器本地存储（webStorage） 存储内容大小一般支持5MB左右（不同浏览器可能存在差别） 浏览器端通过window.localStorage和window.sessionSterage属性来实

交互 复选框勾选已完成事件 方案1： 给复选框绑定点击事件 通过实参将该勾选框所在事件id传入后台 对该事件进行相应操作 方案2： 给复选框绑定change事件 通过实参将该勾选框所在事件id传入后台

Todo—list案例 组件化编码流程 实现静态组件：抽取组件，使用组件实现静态页面效果 展示动态数据 数据的类型、名称 数据保存的组件 交互——绑定事件监听 组件间通信 父传子 props方法 子传

插件 功能 ：用于增强Vue 本质 ：包含install方法的一个对象，install方法的参数： 第一个参数是Vue实例对象 第二个及之后的参数是插件使用者传递的参数 定义插件 在src文件夹下新建

mixin混入 功能 把数个组件中的公共配置项提取为一个混入对象 使用方法 定义混入 在src文件下新建一个混入的js文件 将想要进行混入处理的配置项写入该js文件 mixin.js文件 使用混入 全

props配置 功能 子组件接收外部传值 传递数据（父组件） 接收数据（子组件） 方式1（只接收） 方式2（限制类型） 方式三（限制类型、必要性，指定默认值） 注： props是只读的，Vue底层会对

ref属性 用来给元素或子组件注册引用信息（代替id） 应用在HTML标签上其获取的是真实DOM元素；应用在组件标签上获取的是组件实例对象 使用方式： 打标识 获取 App.vue 文件 效果

Vue脚手架 说明 Vue脚手架是Vue官方提供的标准化开发工具（开发平台） 安装步骤 全局安装@vue/cli（仅第一次使用时执行） 切换至目标项目目录，使用命令行创建项目 启动项目 脚手架分析 n

单文件组件 main.js：入口文件 app.vue：统领全局组件 index.html：页面入口 组件文档（xxx.vue）