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

时间:2021-1-18 作者:admin

前言

总结是基于vue2.x,vue-cli3.x,主要记录些,vue常用的指令、事件,监听、数据绑定、过滤器、组件、动画、vuexvue-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可以换成键盘上的任何一个值,只要去找相关的键盘码,就都可以使用,推荐设置个别名。放在没有按钮操作的模板。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。