Vue学习总结

Posted 2021-03-09 kerwincui

1.Object.freeze()方法可以冻结一个对象，被冻结的对象就不能再被修改。

 

2.Vue生命周期：beforeCreate-created-beforeMount-mounted-beforeUpdate-updated-beforeDestroy-destroyed

 

3.计算属性本质就是一个优化的方法，他是基于依赖的数据进行缓存，只有相关依赖发生改变才会重新执行，主要用来进行纯数据的操作。侦听属性主要用来监听某个数据的变化，从而执行回调业务逻辑。

 

4.过滤器可对数据进行筛选、过滤、格式化。

 

5.利用索引值设置数组项：Vue.set(vm.items.1,"value")

 

6.Vue中的数组方法：push(), pop(), shift(), unshift(), splice(), sort(), reverse(), concat(), slice(), map(), filter()

 

7.v-bind用于class和style时，Vue做了增强，表达式类型除了字符串外还可以使用数组和对象。

 

8.事件修饰符：.stop/.capture/.self/.once/.prevent/.passive。

 

9.按键修饰符：.enter/.tab/.delete/.esc/.space/.up/.down/.left/.right

 

10.系统修饰符：.ctrl/.alt/.shift/.meta

 

11.v-model修饰符：.lazy/.number/.trim

 

12.父组件的值传递到子组件使用props选项，子组件向父组件通信需要子组件触发事件，然后父组件监听这个事件。

 

13.插槽使用在组件中，是组件的一块html模板。

 

14.组件模板中必须由一个根元素包裹住所有代码，否则会报错。

 

15.webpack就是一个.js配置文件，在webpack中使用vue-loader可以对.vue格式的文件进行处理。

 

16.使用components属性进行配置，指定路由对应的组件。

 

17.路由两种传参方式：query传参和param传参。

 

18.vue router实例化后创建了两个对象：this.$router(router实例)和this.$route(当前页面的路由信息)。可以通过vm.$route获取到当前页面的路由信息，$route.query参数名的方式获取到值，$router.push()方法来导航到另外一个页面。

 

19.vue router中有三种导航方法：push / replace / go，常见的是使用router-link标签，等同于push方法。

 

20.路由传参时组件与vue router解耦方式：布尔模式解耦 / 对象模式解耦 / 函数模式解耦。

 

21.Vuex帮我们管理共享状态，如果不打算开发大型单页面应用，使用Vuex可能是繁琐冗余的。小项目推荐使用html5中的localStorage和sessionStroage。

 

22.Vuex中的对象：state对象用来管理状态；getter对象用来提取组件中对state的操作；mutation用来更改state；action对象类似mutation，只是action提交的是mutation，可以包含任何异步操作。

 

23.动态组件：组件之间切换的时候保持组件的状态。

 

24.Vue中相关指令：
双括号：　　　　绑定文本值/使用js表达式
v-once：　　　　渲染元素和组件一次
v-html：　　　　 输出html
v-text：　　　　  输出文本
v-bind：　　　　 绑定标签属性，缩写为：
v-on：　　　　    监听事件，缩写为@
v-slot：　　　　  插槽，缩写为#
v-cloak：　　      处理网络慢，vue未加载的问题
v-if/v-if-else/v-else：条件渲染
v-show：　　      条件渲染，如果频繁的切换则用v-show，否则用v-if
v-for：　　　　   遍历元素，默认使用就地更新，如果要跟踪每个节点，每项里面需要提供唯一的key属性
v-model：　　     双向数据绑定