Vue自学笔记

VueComponent 组件本质为一个名为VueComponent的构造函数，且其并非程序员进行定义，由Vue.extend生成 程序员只需写组件的单标签或双标签，Vue解析时会自动创建该组件的实例

组件 定义： 实现应用中局部 功能代码 和资源 的集合 编写方式 传统方式编写 存在的问题： 依赖关系混乱、不好维护 代码复用率不高 使用组件编写 优点： 复用编码 简化编程 提高运行效率 编写形式

生命周期 又名：生命周期函数、生命周期钩子、生命周期回调函数 实质：Vue在其特殊时刻调用的一些特殊名称的函数 生命周期函数名不可更改，其具体操作内容由程序员根据需求编写 生命周期中的this指向Vu

函数 自定义函数指令调用时机： 指令与元素成功绑定时 指令所在模板被重新解析时 局部 全局 对象 基础原理 实现（局部） 全局 总结 1、定义语法 1.1局部指令 1.2全局指令 2、配置对象中常用的

已进行指令 v-bind：单项绑定解析表达式，可简写为 ：xxx v-model：双向数据绑定 v-for：遍历数组、对象、字符串 v-on：绑定事件监听，可简写为@ v-if：条件渲染（动态控制节点

过滤器 功能：对需要显示的数据进行特定格式化后再渲染至视图进行显示（适用于一些简单逻辑的处理） 语法 注册过滤器：Vue.filter("mySlice", callback) 或 new Vue{f

收集表单数据 当input的type为text时：v-model收集的是value，即用户输入的value值 当input的type为radio时：v-model收集的是value，此时需用户手动配置

#模拟数据监听 ## Vue.set()方法 ## Vue监听数据的原理（数组） ## 数据监听总结 ### 数据侦听原理

v-for指令 用于展示列表数据 语法：v-for="(item,index) in xxx" :key="yyy" 可遍历数组、对象、字符串（使用较少）、指定次数（使用极少） key的作用与原理 虚

v-if 写法：     1、v-if="表达式"     2、v-else-if="表达式"     3、v-else="表达式" 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注

class与style绑定 绑定class样式 字符串写法 适用于：样式的类名不确定，需动态指定 数组写法 适用于：要绑定的样式个数不确定、名字也不确定 对象写法 适用于：要绑定的样式确定、名字也确定

作用：观察和响应 Vue 实例上的数据变动 1、当侦听的属性发生变化时，回调函数被调用，进行相关操作 2、侦听的属性必须存在才可进行侦听 3、侦听的两种写法     1、在Vue实例中进行配置 2、通

案例：姓名 插值语法： methods方法： 每次data中数据发生变换，Vue将重新解析模板，入其中含有插值语法调用的方法将会重新进行调用 计算属性： 计算属性 1、定义：将需要的属性通过已有的属性

事件处理 事件的基本使用 使用v-on:xxx或@xxx绑定事件，其中xxx为事件名 事件的回调需要配置在methods对象中，最终会绑定在Vue实例上 methods中配置的函数，不用箭头函数，否则

Object.defineProperty方法回顾 添加的属性不可枚举（不可遍历） 传三个参数 要添加属性的对象名，需添加的属性名，配置项 理解数据代理 数据代理定义： 通过一个对象代理对另一个对象中

‘el’与data的两种写法 'el'的两种写法 在new Vue实例时配置'el'属性 先创建Vue实例，随后通过vm.$mount('#box')指定'el'的值 data的两种写法 对象式 函数

1.插值语法 功能：往往用于指定标签体内容，解析标签体内容，可直接读取data中所有属性 用法： 2.指令语法 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件等） 用法： 备注：Vue中有许

Hello World 案例 想要Vue正常工作，须创建一个Vue实例，且要传入一个配置对象 box容器里的代码依旧符合html规范，只加入了一些特殊的vue语法 box容器中的代码被称为【Vue模板

初识Vue 一套用于构建用户界面的渐进式的JS框架 渐进式： Vue可以自底向上逐层的应用 简单应用：只需一个轻量小巧的核心库 复杂应用：可引用各式各样的插件库 开发者：尤雨溪 特点： 采用组件化模式