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（value） value就是你改变的值
　　　　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用 >>>

　　　　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[还没整理好]

20.双向绑定原理

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