vue2总结

查询某某的版本 : cnpm view less-loader versions

vue的执行顺序 : 先index.html 再main.js 最后App.vue

1.vue的介绍

2.插值语法

3.指令语法

  功能:用于解析标签

  备注:Vue中有很多的指令,且形式都是:v-????

    1).v-bind 和 v-model 语法

    2).v-on:xxx 事件绑定语法

4.计算属性computed

  为什么产生计算属性?

    先写插值语法再写方法,最后再计算属性,就明白为什么要用计算属性.

    计算属性简写 : 只考虑读取,不考虑修改

  总结 :  

    1).什么是计算属性?

      data里面的就叫做属性,那么拿到属性去加工,去计算,就叫计算属性.

    2).原理 : 底层借助了Objcet.defineproperty方法提供的getter和setter。

    3).get函数什么时候执行?    

      (1).初次读取时会执行一次。[计算属性有缓存]
      (2).当依赖的数据发生改变时会被再次调用。
    4).get有什么作用?
      当有人读取计算属性(fullName)时,get就会被调用,且返回值就作为fullName的值
    5).set什么时候调用?
      当fullName(也就是计算属性自己)被修改时。 set(valuevalue就是你改变的值
    6).优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
    7).备注
      1.计算属性最终会出现在vm上,直接读取使用即可。
      2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。

5.监视属性watch

  计算属性和监听属性的区别 : 

    1.computed能完成的功能,watch都可以完成。
    2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
    两个重要的小原则:
      1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
      2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。
    优先级 :   

      默认加载:props > data > computed > methods >  watch

      如果触发事件:props > methods > data > computed >  >  watch

6.class和style

  1)样式通透 : 

    通用(非常建议使用)  ::v-deep

    stylus用 >>>

    sassless用  /deep/

  2)scoped 原理

    加入了scoped,就会在节点上添加自定义属性 : data-v-xxx

    css选择器 ==> 根据属性选择最终添加样式

7.过滤[知识js的一个方法,引出过滤器]

  过滤用监视属性实现,过滤用计算属性实现   一个案例 : 列表排序 

8.过滤器[Vue.filter]

9.监视数据[vue.set]

10.生命周期

11.非单文件组件[基本用不到]

  1.简单的说 : 一个文件有多个组件

  2.demo

  3.组件的嵌套

  4.关于VueComponent =>也就是组件的this

  5.vue和vuecomponent的区别

  6.非单文件组件注意点

12.脚手架

   1.配置脚手架以及分析

   2.获取到DOM : 在标签里面写上ref,调用 : this.$refs.xx

   3.install插件

   4.代理 [ vue.config.js ] 

13.本地存储

14.组件之间的传值

  父 => 子  props

  子 => 父  自定义事件

  任意 => 任意 全局事件总线 ,  消息订阅与发布

15.$nextTick

  1. 语法:this.$nextTick(回调函数)

  2. 作用:在下一次 DOM 更新结束后执行其指定的回调。

  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

  4. this.$nextTick(function(){
        this.$refs.inputTitle.focus()
    })

     

16.vue封装的过度与动画[不常用]

17.插槽

18.路由

19.vuex[还没整理好]

20.双向绑定原理

posted @ 2022-05-11 13:25  杨建鑫  阅读(55)  评论(0编辑  收藏  举报