ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue2总结

2022-05-11 13:31:38  阅读:136  来源: 互联网

标签:总结 vue 函数 vue2 set 计算 组件 属性


查询某某的版本 : 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 事件绑定语法

      3).v-if 和 v-show

    4).v-for以及key原理

    5).v-text,html,cloak,once,pre

    6).自定义指令

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 或 组件实例对象。

6.class和style

  1)样式通透 : 

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

    stylus用 >>>

    sass和less用  /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[还没整理好]

 

 

 

 

 

 

     

标签:总结,vue,函数,vue2,set,计算,组件,属性
来源: https://www.cnblogs.com/qd-lbxx/p/16144121.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有