第2章 Vue常用特性

第2章 Vue常用特性

表单基本操作

获取单选框中的值:v-model

获取复选框中的值:v-model(同单选框一样)

• 通过v-model
• 和获取单选框中的值一样
• 复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选

获取下拉框和文本框中的值:v-model

通过v-model

表单修饰符

• .number 转换为数值
  注意点：
  当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
  所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
• .trim 自动过滤用户输入的首尾空白字符
  只能去掉首尾的 不能去除中间的空格
• .lazy 将input事件切换成change事件
  .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change
  事件上
• 在失去焦点 或者 按下回车键时才更新
• 

自定义指令

• 内置指令不能满足我们特殊的需求
• Vue允许我们自定义指令

Vue.directive 注册全局指令

Vue.directive 注册全局指令 带参数

自定义指令局部指令

• 局部指令，需要定义在 directives 的选项 用法和全局用法一样
• 局部指令只能在当前组件里面使用
• 当全局指令和局部指令同名时以局部指令为准
  

计算属性 computed

• 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
  
  

侦听器 watch

• 使用watch来响应数据的变化
• 一般用于异步或者开销较大的操作
• watch 中的属性 一定是data 中 已经存在的数据
• 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够
  监听到变化，此时就需要deep属性对对象进行深度监听
  
  

过滤器

• Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
• 过滤器可以用在两个地方：双花括号插值和v-bind表达式。
• 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
• 支持级联操作
• 过滤器不改变真正的 data ，而只是改变渲染的结果，并返回过滤后的版本
• 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的
  

过滤器中传递参数

生命周期

事物从出生到死亡的过程
Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

常用的 钩子函数

数组变异方法

在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改
了，但是页面内容并没有改变
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

替换数组

不会改变原始数组，但总是返回一个新数组

动态数组响应式数据

Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
a是要更改的数据 、 b是数据的第几项、 c是更改后的数据

图书列表案例

• 静态列表效果
• 基于数据实现模板效果
• 处理每行的操作按钮

1、 提供的静态数据

数据存放在vue 中 data 属性中

2、 把提供好的数据渲染到页面上

利用 v-for循环 遍历 books 将每一项数据渲染到对应的数据中

3、 添加图书

通过双向绑定获取到输入框中的输入内容
给按钮添加点击事件把输入框中的数据存储到 data 中的 books 里面

4 修改图书-上

点击修改按钮的时候 获取到要修改的书籍名单

4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍

把需要修改的书籍名单填充到表单里面

4.2 根据传递过来的id 查出books 中 对应书籍的详细信息

4.3 把获取到的信息填充到表单

5 修改图书-下

5.1 定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的id 不能被修改 即 处于编辑状态下 当前控制书籍

编号的输入框禁用

5.2 通过属性绑定给书籍编号的 绑定 disabled 的属性 flag 为 true 即为禁用

5.3 flag 默认值为false 处于编辑状态 要把 flag 改为true 即当前表单为禁用

5.4 复用添加方法 用户点击提交的时候依然执行 handle 中的逻辑如果 flag为true 即 表单处于不可输入状态 此时执行的用户编辑数据数据

6 删除图书

6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来

6.2 根据id从数组中查找元素的索引

6.3 根据索引删除数组元素

常用特性应用场景

1 过滤器

Vue.filter 定义一个全局过滤器

2 自定义指令

让表单自动获取焦点
通过Vue.directive 自定义指定

3 计算属性

通过计算属性计算图书的总数
图书的总数就是计算数组的长度