vue记录

简介

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue> 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

基础特性

• 双大括号语法用于文本插值
• 模板内部不要访问全局变量
• vm.$watch 是一个实例方法有两个参数，能监听数据的变化返回改变后的值和改变前的值
• computed 处理模板内的复杂逻辑形成方法
• 方法写入模块内能缓存，不依赖响应数据

wach侦听和computed计算

• 因频繁的数据变动使用wach得不偿失，应使用计算

• wach在执行异步操作时才得以使用
  计算的setter

• 在触发数据变化时setter会被使用

组件

• 组件是可复用的 Vue 实例，且带有一个名字
• 它们与 new Vue 接收相同的选项,例外是像 el 这样根实例特有的选项。
• 可以将组件进行任意次数的复用,因为你每用一次组件，就会有一个它的新实例被创建。
• 自定义组件使用class不会覆盖原有的class
• 可以像在任何普通元素上一样使用 v-for ，但是key是必须的
• 组件有自己独立的作用域，为了把数据传递到组件里，我们要使用 prop：
• 组件默认可拥有任意数量的prop也能是数组犹如data一样的效果
• 事件的同样可以绑定，传入一个事件源对象需要方法 $emit 传递
• 父级监听自定义组件需要用$event来访问
• 组件使用v-model需要使用到 $emit 接收和 $event 来取值
• 给组件传递内容使用元素在需要的地方加入插槽
• 动态切换要特殊的 is attribute 来实现正常工作需 .prop修饰器
• dom模板操作时被忽略需要特殊的 is 来变通

指令

指令后方可以添加参数和修饰符
方括号包裹表示动态参数属性，需要遵守书写规范
修饰符是指令以特殊方式绑定
v-bind 和 v-on 这两个最常用的指令，提供了简写

• v-once 指令，执行一次插值

• v-html 指令，输出html（避免使用输出）

• v-bind 指令：解析表达式为true生效

• v-if 指令，根据表达的真假值决定行为

• v-if指令，达式返回 truthy 值的时候被渲染，需显示多个元素需要在不可见的包裹

• v-else 元素必须紧跟在带 v-if 或者 v-else-if块 的元素的后面，否则它将不会被识别。

• vue通常会复用已有元素，添加一个具有唯一属性的值给 key 就会动态生成

• v-show 指令，根据条件展示元素，带有 v-show 的元素始终会被渲染并保留在 DOM 中

• v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销，非常频繁地切换用show，很少改变用if

• v-if 与 v-for 不建议一起使用，v-for 具有更高的优先级，if会不断循环，for需添加限制时非常有效

• v-for 指令，基于一个数组，可获取值和下标，还有父级属性

• 为对象可获取值和键名，还有下标，取得的值为动态渲染时，需要添加id，：key

• 数组内部的值正常无法动态监听，需使用变异方法包裹触发视图更新

• 变异方法push()，pop()，shift()，unshift()，splice()，sort()，reverse()

• 替换数组，使用非变异方法改变数组是相当高效的行为

• filter()、concat() 和 slice() 等

• 下标设置值和修改数组长度不是响应式的

• 可以用Vue.set或实例vm.$set实现响应式或splice截取添加

• 修改长度使用splice截取掉获得

• 动态添加删除对象内容也不是动态的，可以使用vue.set或其实例，多个对象使用时assign先手动添加新的空对象

class和style

• v-bind 指令：解析表达式或对象属性为true生效
• v-bind用于动态切换class能是对象和数组
• 对象为一个返回函数返回判断处理的结果
• 数组则可以使用三目判断操作，或和对象混和使用
• v-bind:style也能是对象和数组
• 对象内可以是多个属性，在模板内更清晰，值能包含多个前缀为值
• 数组就是多个样式应用，

过滤器

• 排序则使用computed计算属性，返回使用filter形成的新数组
• for循环时可设置为处理函数动态执行返回新数组
• for接受源对象为整数时会重复对应次数
• 在 上使用 v-for循环渲染

事件处理

• 监听事件：v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

• 一般接受的参数是事件处理的函数名称，或函数体

• 函数体参数内除了数据还有$event取事件

• 事件修饰符，点开头的指令后缀

• .stop：阻止单击事件继续传播

• .prevent：提交事件不再重载页面，可以串联，只有修饰符

• .capture：事件捕获在内部处理

• .self：自身event为触发时执行函数

• .once：只会触发一次，能被用到自定义的组件事件上

• .passive：得到事件触发会立即触发行动，提升移动端性能

• 按键修饰符

• Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

• 可以通过全局 config.keyCodes 对象自定义按键修饰符别名

• .exact 修饰符允许控制由精确的系统修饰符组合触发的事件

• 鼠标按钮修饰符会限制处理函数仅响应特定的鼠标按钮。

• 表单输入绑定

• v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；

• checkbox 和 radio 使用 checked 属性和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件。

• 用 v-for 渲染的动态选项：使用v-bind实现动态绑定

• 内部的rure-vale和false-value不会影响表单控件的提交

• 修饰符.lazy 转变为使用 change 事件进行同步

• .number 自动将用户的输入值转为数值类型

• .trim 自动过滤用户输入的首尾空白字符

过度和动画

• Vue 提供了 transition 的封装组件，自动嗅探目标，在恰当的时机添加/删除 CSS 类名
• v-enter：定义进入过渡的开始状态
• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态
• v-enter-active：定义进入过渡生效时的状态
• v-leave-active：定义离开过渡生效时的状态
• v-leave: 定义离开过渡的开始状态
• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态

深入组件

• 组件名大驼峰或杠链接
• 全局和局部组件，全局是在new vue前注册的，在打包时增加无谓的增加
• 子组件之间不通信，添加到 Components 目录进行模块加载即可
• 组件的自动化注册也是依靠es6模块引入
• prop的属性命名驼峰式，使用就是杠连接
• prop类型可以是数组或对象，可以接受静态值和动态值
• 给prop传全部的对象属性，使用不带参数的 v-bind 解析
• 单向数据流，prop父子之间是向下单向绑定的，动态更新的子prop内容
• 作为本地prop数据使用或转换可以用data和computed处理返回
• prop验证数据类型，根据定义的验证方法返回警告
• 类型检查，type可以是所有类型原生构造函数的一个
• 非prop的传入没有定义的属性会添加到对应根元素上
• 本身和父级的属性值在冲突时会合并得到最终的值
• 可以选择禁用Attribute(属性)不继承根的属性
• 实例的 $attrs 属性使用，包含给组件的attrbute和值
• 自定义事件，监听时间需要完全匹配，则使用杠连接
• v-model默认会利用value和prop名为input事件，model可以自己设置prop和enent值，以及输入类型的控件设置
• 组件上监听原生事件使用 v-on 的 .native 修饰符
• 监听被重构的input会静默失败，需要 $listentrs 对象返回监听器
• .sync 修饰符，update:myPropName可以对prop值进行监听更新
• 插槽，在模板内进行设置