vue练习1

id不存在。

于 2022-08-07 01:19:44 发布

阅读量122

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52759526/article/details/126204156

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

vue练习1

transition：为组件的载入和切换提供动画效果

transition-group：作为多个元素/组件的过渡效果

keep-alive：缓存

vue的特点

轻量级，Angular的学习成本高，使用起来比较复杂，而Vue相对简单、直接，所以Vue使用起来更加友好。
数据绑定，Vue是一个MVVM框架，数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue的精髓之处。尤其是在进行表单处理时，Vue的双向数据绑定非常方便。
指令，指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind动态绑定指令、v-if 条件渲染指令、v- for列表渲染指令等。
插件，插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。常用的扩展插件有vue-router、Vuex 等。 Vue很多特性与Angular和React有着相同的地方，但是也有着性能方面的差别。 Vue使用基于依赖追踪的观察系统并且使用异步队列更新，所有的数据都是独立触发的，提高了数据处理能力。

React和Vue的中心思想是一切都是组件，组件之间可以实现嵌套。React 采用了特殊的JSX语法，Vue中也推崇编写以*.vue后缀命名的文件格式，对文件内容都有一些规定，两者需要编译后使用。值得一提的是，React依赖虚拟DOM，而Vue使用的是DOM模板。Vue 在模板中提供了指令、过滤器等，可以非常方便和快捷地操作DOM。推荐将Vue使用到具有复杂交互逻辑的前端应用中，以确保用户的体验效果。

单页面应用程序（SPA）

优点：

无刷新切换内容，提高用户体验。
符合前后端分离的开发思想，通过ajax异步请求数据接口获取数据，后台只需要负责数据，不用考虑渲染。前端使用vue等MVVM框架渲染数据非常合适。
减轻服务器压力，展示逻辑和数据渲染在前端完成，服务器任务更明确，压力减轻。
后端数据接口可复用，设计JSON格式数据可以在PC、移动端通用。

缺点：

不利于SEO（搜索引擎优化），应用数据是通过请求接口动态渲染，不利于SEO。
首页加载慢，SPA下大部分的资源需要在首页加载，造成首页白屏等问题。

使用watch handler属性有一个特点，就是当值第一次绑定时，watch不会执行监听函数，只有值发生改变时才会执行。如果需要在最初绑定值的时候也执行函数，则就需要用到immediate属性，添加 immediate: true属性。

new Vue({
  data: { a: 1, b: 2 }, 
  watch: {
    a: {
      handler: function(value){
        console.log(value) // 打印语句不执行
      }
    }
  }
})

v-model添加number修饰符,如果值不是数字，将不会有任何效果，直接返回输入值

全局路由守卫的钩子函数有：beforeEach（全局前置守卫）、beforeResolve（全局解析守卫）、afterEach（全局后置守卫）名字中间没有“Route”，组件级路由守卫的钩子函数才有“Route”

前端路由有两种模式：hash/histroy

hash：

hash的优点是兼容性比较高，可以直接在项目布署上线时使用。
hash的缺点是不美观影响url的美感，并且如果移动端分享严格限制，可能会报错。

history:

history的优点是不会影响到url的美感，提高了可观赏性。
history的缺点是需要与后端搭配，配合项目的部署上线。

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化，因而对象属性的添加或删除不可以监听到。Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter / setter 转化，所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的。

一般使用ajax时会使用异步处理，而mutation是写同步操作的，异步一般写在actions中。

props传过来的，改数字，改字符串会报错，改数组，对象里面的值不会报错
context是用在react中进行组件间的传值，Vue组件间传值可以通过props，$emit,Vuex,事件总线。

七个改变原数组且会让vue监听到的方法

push()在末尾添加一个
pop()在末尾删除一个
shift()头部删除
unshift()头部添加
splice()删除，插入，替换
sort()排序
reverse() 颠倒原来顺序
push()在该数组最尾添加新的元素，然后返回更新后的数组长度，方法将改变原始数组的长度；
shift()删除该数组第一个元素，并且把该数组剩下的元素索引往前挪一位，然后返回删除的元素，方法将改变原始数组的长度；
reverse()反转该数组中元素的顺序，方法将改变原始数组。
concat()把两个以上的数字连接起来，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
push(),shift(),reverse()改变原数组，会触发视图跟新；
concat()不更改数组，会返回新数组，因此没有替换原数组，不触发视图更新，要用新数组替换原数组才能实现视图更新

父子组件生命周期的执行顺序（父早出晚归，子迟到早退）

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated 父组件更新过程父beforeUpdate->父updated 销毁过程父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

使用scoped，父组件的样式不会渗透到子组件，如果要渗透，可以在需要渗透的样式前面加>>>或::v-deep或/deep/

keep-alive：
<keep-alive>
	<loading></loading>
</keep-laive>
	include、exclude：匹配要进行缓存的组件
	max：max属性控制最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。