VUE相关知识总结

Vue.js特性：渐进式技术栈

1. 轻量级的框架
2. 双向数据绑定
3. 指令
4. 插件化

Vue实例书写模板：

new Vue({
  el: '#app',
  template: '
hello {{msg}}
',
  data: {
    msg: 'world'
  }
})

• 访问Vue实例的属性：
  变量名.$Vue属性名
• 访问 Vue 实例 data 元素的属性：
  变量名.属性名

生命周期钩子

有很多，具体查看官方文档，经常使用的有：

• created：实例创建后，未挂载， $el 还不可用
• mounted：挂在到实例后调用（相当于 jQuery 的 $(document).ready() ）
• beforeDestory：实例销毁前调用，用于解绑监听事件

用法/插值表达式

{{}}中还可以使用 JS 表达式进行简单的运算或三元运算
注：文本插值的形式，其中不能书写表达式，支持单个表达式（var a=6; 是多行表达式，var a; a=6;）,不能使用流控制（如：if 等，使用三元运算符）

过滤器（使用管道符‘|’）

语法：{{ data | filter1 | filter2 }} （可以多次过滤）
用于格式化文本（字母大小写，货币位号符，时间等）
注：还可以传参 {{ data | formatData(a,b) }} 其中第一个参数和第二个参数，分别对应实例中过滤器的第二、三个参数，实例中的第一个参数必须是 data 中数据（ Vue 实例的 filter 属性）

指令和事件：快速完成 DOM 操作、循环渲染、显示和隐藏

• v-text='' ：解析文本和 {{}} 作用一样
• v-html='' ：解析html
• v-bind:属性名='' ：动态更新HTML元素上的属性，如 id ，class 等
• v-on:动作名='函数名'：绑定事件监听器
  函数名：方法名写在 Vue 实例中的 methods 属性内，函数形式，函数内的 this 指向的是当前 Vue 实例本身，可以直接使用 this.xxx 形式访问或者修改数据。注：当函数中还有函数时，就要使用箭头函数，要不然无法访问当前 Vue 实例

Vue 中用到的所有方法都定义到 methods 中

语法糖

在不影响功能的前提下，使用简洁方法实现同样效果
v-bind: ====> : （冒号）
v-on: ====> @

计算属性

• 遇到复杂逻辑时，最后返回一个结果，还可以依赖多个 Vue 实例的数据：只要其中任意数据变化，计算属性就会重新执行，视图也会更新
• getter和setter：每个计算属性都会有这两个方法，默认使用 getter 方法， setter 手动修改计算属性的值时触发
• 计算属性还可以用于动态设置元素的样式名称 class 和内联样式 style

小技巧：

1. 计算属性可以依赖其它计算属性
2. 不仅可以依赖当前 Vue 实例，还可以依赖其它 Vue 实例

• 计算属性缓存：计算属性都可以调用 methods 中的方法实现，如： {{函数名()}}
  • 页面方法：如果调用方法，只要页面重新渲染，会重新执行
  • 计算属性：不管是否渲染，所依赖数据未发生变化，就永远不变

计算属性依赖缓存，当遍历大数组和做大量计算时，应当使用计算属性

v-bind绑定class和style

• 绑定class
  1. 对象语法： v-bind:class="{ '类名':data属性名 }"
     对象的键是类名，值时布尔值（true：类名存在；false：类名不存在）当表达式过长或逻辑复杂时，还可以绑定计算属性
  2. 数组语法：当需要多个 class 时，可以使用数组语法。数组成员为 data 属性对应类名
  3. 数组语法、对象语法混用：第一个成员是对象，第二个成员是数组，如：:class="[{ active:isActive },errorClass]"
• 绑定内联样式： v-bind:style 方法与 class 类似（对象语法、数组语法）
  对象语法：键代表 style 属性，值代表属性对应的 data 属性
  注意：CSS 属性名称使用驼峰命名或短横线分隔命名
  切记：Vue 中要是大写字母都会转换为 “-” 加小写，如：dsfADbcG ====> dsf-a-dbc-g
  使用： style 时，Vue.js 会自动给特殊的 CSS 属性名称增加前缀，比如：transform 无需再添加前缀

Vue.js内置指令

基本指令

• v-cloack： 一般与 display:none 进行结合使用
  作用：解决页面初始化慢导致的闪动问题
• v-once： 只渲染一次，后续都不会再重新渲染

条件渲染指令

• v-if、v-else-if、v-else：用法为连着出现在三个标签内，哪个满足条件显示哪个，后接布尔值，如：

1
2
3
//此时页面显示1

• v-show：知识改变 CSS 属性 display 后接布尔值（true：显示；false：消失）
  注：v-if 和 v-show 的区别
  • v-if：实时渲染：页面显示渲染，不显示移除
  • v-show：永远存在页面中，只是改变 CSS 的 display 值
• v-for：列表渲染。遍历多个对象；遍历一个对象的多个属性

注：当 Vue 在渲染页面时，出于效率考虑，会服用已有元素，只会渲染了变化的元素
解决方法：加 key ，唯一。提供 key 值决定是否复用该元素
Vue检测不到数组的变动：1. 改变数组指定项 Vue.set( app.arr, 1, "car") 2. 改变数组长度 app.arr.splice(1)

方法和事件

如果方法中带有参数，调用没加括号，默认传入原生事件 event
所以：方法中有参数时，调用加括号

修饰符

• stop：阻止事件冒泡。如： v-on:click.stop=''
• prevent：阻止默认事件，谁的默认事件给谁加
• self：只是作用在元素本身，而非子元素时调用
• one：只执行一次的方法

监听键盘事件 @key.13='' ===> 指定的 keyCode

v-model：用于表单类元素上双向绑定事件

input 和 textarea
注：所显示的值只依赖于所绑定的数据，不再关心初始化时的 value

• 单选按钮：
  1. 单个单选按钮，直接用 v-bind 绑定一个布尔值（用 v-model 不行）
  2. 如果是组合使用，就用 v-model 来配合 value 使用，绑定选中的单选框的 value 值，此处绑定的初始值 value 随便给
• 复选框：
  1. 单个复选框：直接用布尔值，可以用 v-model 和 v-bind
  2. 多个复选框：如果是组合使用就用 v-model 配合 value 使用， v-model 绑定一个数组，如果绑定的是字符串，则会转为 true 、 false ，与其绑定的复选框的 checked 属性相对应。
• 下拉框：
  1. 单选：绑定的 value 值初始化可以为数组、字符串，有 value 则匹配 value 值，无则匹配 text 值
  2. 多选：就需要 v-model 配合 value 使用， v-model 绑定一个数组，与复选框类似
  3. v-model 一定是绑定在 select 标签上

总结：

• 单选：初始化最好给定字符串， v-model 绑定静态字符串或布尔值
• 多选：初始化最好给定一个数组

修饰符

• lazy： v-model 与 input 绑定时，默认同步数据，加 lazy 可使其失去焦点或回车后更新
• number：将输入的字符串转化为 number 类型
• trim：自动过滤首尾空格

组件

作用：提高代码复用性（挂载都用变量名标签）

1. 全局注册：优点：所有实例都可以用；缺点：权限大，容错率低

Vue.component('变量',{
 template: '组件'
})

2. 局部注册：在 Vue 实例中定义

new Vue({
  el: '#app',
  components: {
    '变量名': {
      template: '组件'
    }
  }
})

3. Vue 组件模板在某些 html 标签中受限，如：

   注意：1. 必须使用小写字母加 ‘-’ 形式命名；2. template 中内容必须被一个 DOM 元素包裹，可嵌套；3. 在组件定义中，除了 template ，还可以有 data、computed、methods；4. 其中 data 在组件中必须是一个方法

   父组件向子组件传递数据

   1. 在子组件中使用 props 从父组件接收参数。注：在 props 定义的属性，都可以在组件中直接使用
   2. props 来自父组件，而组件中 data return 的数据是子组件自己的，作用域是组件本身，可以在 template、computed、methods使用
   3. props 的值有两种：一种是字符串数组；一种是对象
   4. 可以使用 v-bind 动态绑定父组件内容
      v-bind 使用与否向子组件传递数据区别：使用 v-bind：会将后边内容转化为可转化的类型；不使用 v-bind：传递数据时，默认字符串

   单向数据流：通过 props 传递数据单向，子传父不行

   目的：解耦。避免子组件修改父组件状态
   两种情景：

   • 父组件传递初始值进来，子将其作为初始值保存起来，在自己作用域下随意使用（在 data 中再申明数据，应用父 props ）
   • props 作为需要被转变的原始值传入（使用计算属性进行重算）

   命名规则：Vue中使用驼峰

   1. 在组件中的 html 必须使用短横线命名
   2. 在组件中，父组件给子组件数据，必须短横线。在 template 中，必须使用驼峰命名
   3. 在组件中的 data 中，用 this.xxx 引用时，只能是驼峰命名

   子组件给父组件传递数据

   子组件通过 $emit() 发布订阅模式，父组件订阅该模式：$emit('fn',参数1) 参数1传入父组件函数
   $emit() 的代码 实际上会传一个 input 事件， input 后的参数就是传递给 v-model 绑定的属性值
   v-model其实是一个语法糖：1. v-bind 绑定一个 value 元素；2. v-on 指令给当前元素绑定 input 事件
   要使用 v-model 必须：1. 接收一个 value 属性；2. 在有新的 value 触发 input 事件

   非父组件通信：可以使用一个空 Vue 实例作为中转

   父： var bus=new Vue()
   子A： bus.$emit('变量名',x) 触发A事件
   子B： bus.$on('变量名',function(){}) 子B创建的钩子监听

   父链：this.$parent
   子链：通过给子组件添加 ref 属性增加索引 ref='a' 。this.$refs.c

   自定义指令

   与组件相同，分为全局注册和局部注册（组件中使用 directives ）

   提供的钩子函数：

   • bind：只调用一次，指令第一次绑定到元素时
   • inserted：绑定元素插入父节点时调用
   • update：绑定元素所在模板更新时调用，不管绑定值是否变化
   • componentUpdated：完成一次更新周期调用
   • unbind：解绑，只调用一次

   钩子函数的参数：

   • el：指令所绑定元素
   • binding：一个对象包含以下属性：name：指令名；value：指令绑定值；oldValue：指令绑定的前一个值；expression：绑定值的字符串形式；arg：传给指令的参数；modifiers：包含修饰符的对象
   • vnode：Vue 编译生成的虚拟节点
   • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

   render函数

   template 可以在 DOM 结构中的