Vue
文章平均质量分 69
Spongebob_nut
学生(๑˙ー˙๑)
展开
-
Parsing error: No Babel config file detected for xxx Either disable config file checking...报错解决方法
eslint根据eslint配置文件的parserOption,知道了要使用babel对代码进行解析,但是解析babel需要使用babel配置文件,由于找不到配置文件(babel配置文件默认需要放在根目录下),所以会报错。原创 2022-10-13 15:22:02 · 13664 阅读 · 4 评论 -
v-for 中 key 的作用
v-for中key的作用:给要循环的元素绑定一个唯一的身份标识。原创 2022-07-15 16:37:57 · 522 阅读 · 0 评论 -
Vue响应式原理---双向绑定
一、Vue中的响应式Vue最独特的特性之一,是其非侵入行的响应式系统。数据模型仅仅是普通的JavaScript对象,而当修改它们时,视图会进行更新。二、响应式的基本原理—双向绑定双向绑定,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新,在单向绑定的基础上,如果用户更新了View,Model的数据也会自动更新。双向绑定由三个重要部分构成:数据层(Model):应用数据及业务逻辑视图层(View):应用的展示效果,各类UI组件业务逻辑层(V原创 2022-04-24 18:48:59 · 4523 阅读 · 2 评论 -
对Vue中nextTick的理解
Vue中nextTick一、nextTick是什么?官方定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即执行这个方法,获取更新后的DOM。我们可以理解成Vue在更新DOM时是异步执行的。当数据发生改变时,Vue将开启一个异步更新队列,视图需要等所有数据改变完之后,再统一进行更新。当数据更新了,在DOM中渲染后,自动执行该函数。代码示例<template> <div class="app"> <div ref="msgDiv"&原创 2022-03-17 11:00:06 · 470 阅读 · 0 评论 -
v-if与v-for
v-if和v-for一、作用v-if指令用于条件性的渲染一块内容,这块内容只会在指令的表达式返回true值的时候被渲染。v-for指令是基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中,items是源数据数组或对象,而item则是被迭代的数组元素的别名。在使用v-for的时候,可以设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化。两者在用法上:<div v-if="isShow"></div>&原创 2022-02-27 16:55:33 · 2694 阅读 · 0 评论 -
动态向数组中添加对象时,对象重复问题
动态向数组中添加对象时,对象重复问题修改前代码: this.nodesList = [{ id: '', name: '', moneyNum: '', showInput: false }]; const itemIdMonet = this.acceptValue.rules.map(itemIdMon => { const obj = { id: ite原创 2021-12-25 14:17:10 · 1482 阅读 · 0 评论 -
vue中动态向对象中添加属性
vue中动态向对象中添加属性写项目时遇到一个问题向后端发送post请求,需要新增数据时,向后端传递的参数形式是这样的:关于这里面的nodes,后端接收的需要是键值对的形式:nodes里面的内容,左边是另一个数组中每个元素的id,右边是该元素另一个属性的属性值。如图所示,左边的值是图中array数组中的id的值,右边是对应的moneyNum的值,将这两个属性从这个数组中提取出来,然后添加到一个新的对象中,传给后端。代码:data() { return { // 定义一下这个对象原创 2021-12-14 01:01:42 · 26248 阅读 · 0 评论 -
vuex的简单使用
Vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。什么情况下应该使用Vuex?Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果不打原创 2021-09-19 19:56:40 · 337 阅读 · 0 评论 -
Vue中this.$router.push(参数) 实现页面跳转过程中参数传递问题
问题说明:根据两个字段进行查询,并从返回过来的数据中点击抽取按钮,跳转到选手详情页传参,页面跳转代码:this.$router.push({ name: "Drawingdetil", params: { schoolId: id, xuekeId: ids, xsType: this.xsType, batchId: ide, xueduanName: this.xue原创 2021-08-11 16:45:16 · 1066 阅读 · 0 评论 -
Webpack基本构建
一、安装Webpack在安装Webpack之前,本地环境需要支持node.js。简单初始化一个项目:npm init -y安装Webpack:npm install webpack -gcnpm install webpack -g //使用淘宝镜像安装npm install webpack webpack-cli -g // 全局安装webpack webpack-cli二、创建项目例:webpack_test三、webpack.config.js 配置文件基础配原创 2021-05-11 10:27:03 · 225 阅读 · 0 评论 -
Vue切换类型小案例
Vue学习—切换类型小案例介绍:点击切换类型按钮,用户账号切换为用户邮箱样式展示: ````javascript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue学习</原创 2020-11-11 22:18:01 · 250 阅读 · 0 评论