Vue
Vue学习笔记
前端攻城fff
一个菜鸟
展开
-
vue3_setup
参数setup两个参数, 第一个参数是上面经过props声明过后的父组件传递过来的数据(需要经过props声明)第二个参数context包含三个常用的属性1. attr, 该属性里保存的是父组件传递过来但props中未声明的数据2. emit, 即this.$emit, 可以触发父组件传递的函数3. solt, 和插槽有关的, 后续再议其实对于第二个参数, 更多的时候直接解构赋值, 直接就{attr, emit, …}import { defineComponent } from 'vue'原创 2021-09-26 20:01:25 · 427 阅读 · 0 评论 -
vue3和2响应式对比
vue2中, 数据响应式通过getter和setter来对对象的读取和写入劫持并且对于对象是递归进行绑定的, 因此可以进行深层次的绑定但是对于数组, 是通过重写数组方法对数组内数据劫持Object.defineProperty(obj, count, { get(){}, set () {} })console.log(obj.count)vue3中, 数据响应不再是通过getter和setter劫持的, 而是通过h5的proxy数据代理对象和数组都是如此, 数据不用原创 2021-09-26 19:59:14 · 60 阅读 · 0 评论 -
vue3_ref和reactive
vue3组件中可以没有根标签<template> <h2>{{ test }}</h2> <button @click="testfun">点击更改</button> <h2>{{ count }}</h2> <hr /> <h2>age: {{ obj.age }}</h2> <h2>other: {{ obj.other.age }}</h2原创 2021-09-26 19:57:25 · 115 阅读 · 0 评论 -
matched和meat实现面包屑导航
配置router让需要在面包屑上展示的路由携带tittle信息 { path: '/heritageClassify', name: 'heritageClassify', meta: { tittle: '全部分类' }, component: heritageClassify }封装面包屑组件关键matched数组, 它按照层级保存了路由信息, 过滤这个数组, 找到携带tittle的即满足条件的将它的path即tittle展示即可<templat原创 2021-08-09 00:08:08 · 258 阅读 · 1 评论 -
router权限验证
$route.mached路由的该属性保存的是匹配到的路由的全部信息, 多级的话就父级子级都保存, 为一个数组例如在在路由为http://localhost:8080/frontMain/page1下, page是frontMain的子路由在当前路由下打印$route.mached, 得到的结果如下匹配到了多级路由时会一级一级的形成数组项, 每一项都保存的是那个路由的所有信息, 因此, 我们可以借助路由元信息meta来给路由显式添加我们需要的属性{ path: 'page3', name原创 2021-08-08 23:19:21 · 411 阅读 · 0 评论 -
vue不带登录页(登录为一个弹框)时的登录验证
封装Login组件将登录封装为一个单独的组件, 其他组件必要时引入这个组件, 至于是否展示就另说该组件不接收任何props, 它要做到是否展示在于两点在store中有一个state(isShowLogin)表示是否展示登录框, 并提供相应的getter在Login组件中计算属性中获取该值, 是否展示取决于它通知展示其他组件中, 涉及到需要登录的, 就dispatch()去设置state中的isShowLogin, 这个时候就会通知到所有获取该state的getter的属性去改变, 这原创 2021-08-07 15:36:43 · 658 阅读 · 0 评论 -
vue中原生语法实现瀑布流及懒加载(无限加载)(利用IntersectionObserver)
2.vue中原生语法实现瀑布流及懒加载(利用IntersectionObserver)如果要实现懒加载, 第一反应不过是计算可视高度即滚动条之间的距离来进行对比都2021年了, 如果面试官让手写一个懒加载, 毫无亮点了已经下面介绍一种实现懒加载的方式, 并结合瀑布流首先先写出瀑布流dom结构以及样式<template><!-- 结构很简单, 就一个容器, 里面放一个列表, 列表循环遍历 --> <div class="waterfall wf-wrap" re原创 2021-08-06 11:27:41 · 3193 阅读 · 4 评论 -
nextTick案例: 解决Element表单resetFields属性失效
nextTick及应用场景首先理解一点vue不是在数据更新后立即就更新视图, 而是一次更新的所有数据更新完成后才会更新dom如果说在这次更新还未结束就操作dom的话, 得到的还是之前的旧的结果而nextTick(vue的原型方法), 它就相当于是一个延迟调用, 如果我想在还未更新dom之前操作dom, 得不到我想要的结果, 但是我又不能确定什么时候更新结束, 只能在正常认为数据变化dom就更新的下面去写需要的逻辑这个时候使用nextTick(() => {}), 在回调函数中写逻辑, vue会原创 2021-08-04 15:56:03 · 1331 阅读 · 2 评论 -
vuex中数据刷新后丢失
vue刷新后会重新创建vue实例, 因此store会被重新赋值, 想要不被清空的话可以监听页面的刷新动作刷新时保存当前store数据到本地,这里选择sessionStoragewindow.addEventListener(‘beforeupload’, () => {sessionStorage.setItem(‘store’, JSON.stringify(this.$store.state))})页面被重新加载时读取本地的store页面重新加载要重新渲染app根组件, 因此放在app原创 2021-08-01 23:00:15 · 200 阅读 · 0 评论 -
Vue鼠标滚轮滚动切换路由
一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件)在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听Vue路由切换过渡vue的过渡使用transition 包裹需要过渡的组件, 或者是一个div, 或者是一个路由, 当这个创建或者销毁的时候, 会加载指定的动画效果, 这个动画效果需要自己指定, 这里指定的是transitionName然后在dat原创 2021-08-01 22:57:24 · 1490 阅读 · 6 评论 -
vuex基础
vuex:该插件是将多个组件间共享的状态进行集中管理(读/写)如果一个项目不复杂,可以通过props等组件间通信的方法进行共享状态的操作但是当项目很庞大或者分成不同模块由不同的人来写的时候,这个时候vuex会表现的非常优异首先需要创建一个store,并暴露出这个storeimport Vuex from 'vuex'import Vue from 'vue'//Vue需要使用这个插件,并在main的对象中添加暴露的对象//就类似于使用router一样,先配置好,在main里面使用即可原创 2021-04-24 21:16:05 · 173 阅读 · 0 评论 -
Vue模板解析简化版
function Compile2(el, vm) { //保存vm this.$vm = vm //保存el this.$el = this.isElementNode(el) ? el : document.querySelector(el) //如果el元素存在 if (this.$el) { //取出el的所有子节点放到虚拟内存中 this.$fragment = this.node2Fragment(this.$el)原创 2021-04-24 21:06:54 · 206 阅读 · 0 评论 -
Vue底层基础方法
```html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1. [].slice.call(lis): 将伪数组转换为真数组2. node.nodeType: 得到节点类型3. Object.defineProperty(.原创 2021-04-24 21:05:29 · 226 阅读 · 1 评论 -
Vue中编程式路由导航和声明式路由导航
在Vue中路由跳转可以有两种方式:声明式在页面不跳转的时候,这种路由导航非常友好<template> <div> <h2>home</h2> <div> <ul class="nav nav-tabs"> <router-link to="/home/news">News</router-link> <router-link to="/h原创 2021-04-20 22:15:14 · 956 阅读 · 0 评论 -
vue的生命周期
<div id="demo"> <p>{{msg}}</p> <button @click="die">销毁</button></div><script type="text/javascript" src="./vue.js"></script><script type="text/javascript" > //vue在创建一个实例到这个实例对象死亡这段过程里会执行多原创 2021-03-14 17:21:37 · 339 阅读 · 0 评论 -
vue列表渲染,搜索排序
<div id="app"><!-- 根据条件来渲染,v-if和v-show类似--><!-- 但是if不满足条件的直接不解析,而show不满足条件的就只是不显示--><!-- 那么使用条件也就清楚了 如果需要频繁切换改变的话,那就用show,因为频繁切换是需要解析好的--><!-- 而需要省空间或者时间根据判断只需要一种结果的时候,就需要用到if--> <p v-if="ok">true<原创 2021-03-08 13:41:32 · 225 阅读 · 1 评论