Vue知识点总结

原地址：https://banggan.github.io/2019/01/03/Vue知识点总结/

基础知识点

框架与库的区别

jquery库+DOM操作+http请求 = 全家桶

如何起步

• 引包Vue.js
• 通过Vue对象，new Vue（options）
• 配置options对象
  • el:发生动作的目的地
  • template:模板（必须为一个根节点）
  • data函数，返回的是一个对象
  • components:key是组件名，value是组件对象
  • methods：配合事件
  • props：子组件接受的参数设置

插值表达式

• {{表达式}}：对象、字符串、判断后的布尔值、三元表达式

常用指令

• v-text:元素的innerText属性
• v-html：元素的innerHTML属性
• v-if:判断是否插入，v-else-if，v-else和v-if必须是相邻的元素
• v-show:隐藏元素，给元素加上display：none
• v-bind:绑定属性，单向数据流,v-bind:属性=‘变量’ 简写：属性名=‘xxx’
• v-model：双向数据绑定，v-on:事件名=‘函数’ 简写： @事件名
• v-on:绑定事件，处理自定义原生事件，v-on:事件名=“表达式 ||函数名 ”
• v-for:循环
  用法：v-for=“item in stus”
  如果stus为数组，（item，index） in stus
  如果stus为obj，（value,key,index） in stus

全局组件

场景：公共性功能组件，减少冗余代码
全局API：Vue.component(‘组件名’，组件对象）

过滤器（给数据的显示进行操作，如反转，改变属性等）

filter：全局过滤器，Vue.filter(‘过滤器名’，过滤方式fun)
filters：组件内的过滤器，Vue.filters(‘过滤器名’，过滤方式fun)，使用{{内容 | 过滤器名}}

watch

监视单个属性改变，无法监视复杂类型，因为监视的是对象地址，地址没有改变，改变的只是属性

computed

监视多个 object | array
computed：{ 监视的业务名:function(){}} 使用：{{计算属性的名称}}

slot

vue内置的组件，父组件向子组件传DOM结构，而props是动态的数据，如果有选择性传递，就具名插槽，以name来选择，使用的对应的slot=name值即可

组件生命周期

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

• beforeCreate：组件创建之前，拿不到数据
• created:可以操作数据，并且可以实现vue->页面的额影响，用于发起http请求
• beforeMount：vue起作用，装载数据到DOM之前，应用：vue启动前的DOM
• mounted：vue起作用，装载数据到DOM之前，应用：vue启动后的DOM，仅执行一次
• beforeUpdate:基于数据的改变才会触发，数据改变之前，应用：获取原DOM
• updated：基于数据的改变才会触发，数据改变之后,应用：获取新DOM
• beforeDestroy：销毁前，做一些功能的释放，如本地保存
• destroyed：销毁后
• activated：激活
• deactivated：停用
  小结：
  频繁的销毁和创建组件？不合理，使用keep_alive内置组件包裹起来，对应的是actived和deactived声明周期；
  created和actived：都是子组件状态，created没有被keep-alive内置组件包括，actived被包裹；

获取DOM元素

在组件的DOM部分任意标签写上ref=“xxx”,通过组件对象，this.$refs.xxx获取到元素