vue
文章平均质量分 61
Panda-6
super
展开
-
vue2 父传子、子传父、兄弟通信
一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告)1. 父组件parent.vue代码如下:父传子在父组件的子组件标签上绑定一个属性,挂载要传输的变量。在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren原创 2022-02-09 21:28:13 · 642 阅读 · 1 评论 -
vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤第一步: 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步:compile(模板解析器)解析模板指令,将模板中的变量替换成数据,然后.原创 2022-02-07 19:18:19 · 79 阅读 · 0 评论 -
v-if 和v-show 的区别
一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的三、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗例如:v-if:在请求后台接口,用接口返回数据渲染生成多个元素的时候,由于网速太慢,导致数据刚开始没有值,此时我们页面也会进行渲染空数据就会报错。我们可以原创 2022-02-07 19:06:19 · 100 阅读 · 0 评论 -
vue常用的指令
一、vue常用指令:v-model 多用于表单元素实现双向数据绑定v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v原创 2022-02-07 18:52:27 · 389 阅读 · 0 评论 -
为什么data是一个函数
一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象,也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性,只能是一个函数如果为组件data直接定义为一个对象Vue原创 2022-02-07 18:49:15 · 1218 阅读 · 0 评论 -
Vue路由守卫(导航守卫)
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的,单个路由独享的,或者组件级的。全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ... })router.bef.原创 2022-01-11 18:30:57 · 1662 阅读 · 0 评论 -
vuex知识点总结
1. 什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态。Vuex 是单向数据流的一种实现。以下是一个表示“单向数据流”理念的简单示意vuex它由五部分组成state: 用来存状态actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)modules:模块化管理store(仓库),每个模块拥原创 2022-01-06 23:56:31 · 825 阅读 · 0 评论 -
vue 子组件封装 开启关闭模态框
总结思路导入子组件并且注册使用在父组件的子组件标签上v-show或者v-if 定义一个变量show 控制盒子的显示与隐藏。通过按钮的点击事件给show赋值为true,显示盒子。这里利用了子传父的方法,子组件中定义一个事件,在事件中子传父一个事件和参数,在父组件的子组件标签上绑定上子组件传过来的自定义事件,事件中赋值给show 关闭模态框。话不多说直接上代码封装子组件子组件代码如下<template> <div class="box"> <.原创 2022-01-05 19:41:04 · 1398 阅读 · 0 评论 -
vue配置多环境变量
什么是多环境变量项目在运行时会根据启动的指令来运行不同的环境,在不同的环境中,我们配置对应所需的变量来满足我们的开发需求,称为多环境变量。环境一般分为开发环境 测试环境 生产环境配置流程在项目根目录下的package.json中配置serve test build,通过 --mode xxx 来执行不同环境"scripts": { "serve": "vue-cli-service serve --open", "test": "vue-cli-service build --mo原创 2022-01-04 00:22:18 · 310 阅读 · 0 评论 -
解决:全局路由导航守卫报错 Uncaught (in promise) Error: Redirected when going from “/login“ to “/home“..
解决导航守卫报以下错误问题:第一次点击登录按钮后先给你来一个这样的报错信息,token已经存储,再次点击登录 才会跳转下一个页面。原因:顺序问题因为顺序是先登录再存储token,代码运行都在一瞬间,导航守卫里面没有发现token所以先给你报个错。完美解决方案只需找到以上图片里这两行代码调换顺序即可解决。第二种解决方案错误抛出给跳转页面的那行代码加个 .catch(()=>{});完事后虽然不会报错,但是还是需要点击两次登录按钮才可登录。推荐使用第一种推荐原创 2021-07-17 04:20:55 · 5903 阅读 · 3 评论