vue知识点归纳与总结(笔记)

前言

总结是基于vue2.x,vue-cli3.x,主要记录些，vue常用的指令、事件，监听、数据绑定、过滤器、组件、动画、vuex，vue-router等日常工作中时常用到的东西,也有些常用的插件和开发工具的介绍与使用，以及部分性能优化的建议与实践,如有不对，或不足的地方，也请各位大神，指出来，学习学习。

一、基础

1、理解mvvm

• m是vue实例中的data，自定义的数据或后端返回的数组，不是后端mvc里的model概念不同。
• vm是vue实例m和v之间的调度者 是mvvm的核心思想
• v是html要渲染的

2、常用指令

• v-cloak 解决{{}}插值闪烁的问题

• v-text 会先执行覆盖元素中原本的内容，但是插值表达式只会覆盖自己的占位符，默认不会闪烁

• v-html 渲染html标签，覆盖元素中原有的元素内容

• v-bind 简写为：用来绑定数据，可以写合法的js表达式

• v-on 简写为@用来点击事件

3、常用事件修饰符

• stop 阻止冒泡：外层和里层都有方法，点击会产生冒泡，也会触发外层事件。顺序从里到外产生事件

• prevent 组织浏览器默认行为：a标签有浏览器默认行为

• capture 捕获事件：点击里层先触发外层再触发里层，顺序从外到里产生事件

• self 只触发自己本身的时间，不会产生冒泡和捕获事件，类似于阻止冒泡，但只针对自己那一层，最外还是会被里层冒泡冒到，stop是阻止所有层次

• once 事件只执行一次

4、数据的绑定

• v-bind：数据的单向绑定

• v-model：数据的双向绑定，只能用于表单元素中

tips：表单元素：radio、text、address、email、select、checkbox、textarea

5、class绑定

• 1.数组带对象

  data(){
  return{
  flag:true
  }
  }

tips:可以在勒种更多数组中写三元表达式，但是推荐使用对象来代替它控制是否渲染

• 2.单纯的对象

  data(){
  return{
  falg1:true,
  falg2:true
  }
  }

• 3.数组带带三元

  data(){
  return{
  falg:true,
  }
  }

• 4.对象升级

  data(){
  return{
  classObj:{classA:falg1,classB:flag2}
  }
  }

tips:直接使用一个对象数组来控制样式

• 5.使用style的对象来实现样式的修改

  <div :class="styleObj" />
  
  data(){
      return{
        styleObj:{color:red}
      }
  }
  

• 6.使用style的数组带对象来实现样式修改

  data(){
  return{
  styleObj1:{color:red},
  styleObj2:{color:red}
  }
  }

6、v-for的使用

可以遍历：普通数组、对象数组、对象、还可以是数字

<div v-for='(item,key,index) in object' :key='index'>
 {{item}}--{{key}}--{{index}} 
</div>
<div v-for='(count in 10)'> </div>

**tips：**在遍历对象的时候有多个index索引，遍历数字时是从1开始的。绑定key时属性值必须是number或者string

7、v-if、v-show

• v-if有较高的切换性能，适合元素可能永远不会被用户看到

• v-show有较高的初始渲染消耗，适合元素的频繁切换

8、调试插件

• 在谷歌商店找vue-devtools插件，使用这个插件，并设置插件，允许访问文件地址。会在调试中出现vue相关的东西
• debugger直接可以调试

9、过滤器

全局和私有过滤器

<div v-for='(item,key) in object' :key='index'>
 {{item | dateFormat}}
</div>

<div v-for='(count in 10)'> </div>

• 全局

  vue.filter(‘过滤器名称’,function(){

  })

• 私有（局部）

  filters:{
  dateFormat:function(data,param){
  do some
  }
  }

tips：

• data就是 | 第一个参数，已经被定死了，永远是管道左边要被转换的数据，param是过滤方法传进来的其他参数，过滤器采用就近优先原则，如果私有和全局的名称一样就优先采用私有的。

• padstart和padend es6的补0方法

• 第二个参数时字符串，第三个参数时表达式，如果自定义参数值是动态的会报错。目前就是的简单的过滤用过滤器，复杂点的用方法，能用计算属性的用计算属性 有缓存，能提高性能。

10、按键修饰符

• 监听pc键盘上的值

  <input @keyup.enter=’方法名’>

**tips：**enter可以换成键盘上的任何一个值，只要去找相关的键盘码，就都可以使用，推荐设置个别名。放在没有按钮操作的模板。