vue
小倪有点菜
这个作者很懒,什么都没留下…
展开
-
父组件如何调用子组件中的方法?
父组件代码,假如父组件要关闭弹窗时候,需要做一系列操作,例如关闭弹窗时需要将子组件中的内容恢复成原来的样子,那么该如何调用呢?1、首先应该在子组件上面加一个ref,例如:ref=“child”, <el-dialog title="【细菌列表】" :visible.sync="bacteriaDialog" element-loading-text="正在加载" @closed="closedDialog" &g原创 2021-09-27 10:03:30 · 16576 阅读 · 3 评论 -
去除两个数组相同项
let arr = [{ id: 1, name: ‘zs’ }, { id: 2, name: ‘ls’ }, { id: 3, name: ‘ww’ }, { id: 4, name: ‘xm’ }, { id: 5, name: ‘xh’ },]let sum = [3, 4, 5]let date = arr.filter(item => sum.indexOf(item.id) > -1)console.log(‘date’, date)// 0: {id: 3, name:原创 2021-08-12 08:51:21 · 502 阅读 · 0 评论 -
同一个表单中,如何可以让其中一个输入框的值自动计算等于其他输入框值之和?
实际场景:需要用到vue中computed计算属性首先在data中声明三个变量分别代表输入框中的这几个数据1、【 这是data中声明的变量 totalPopulation: undefined, // 总人口 placementShift: '', // 水深小于等于0.5m及非淹没区就地安置人口 placementMax: '', // 水深大于0.5m就地安置人口 placementSmall: ''// 水深大于0.5m转移原创 2021-07-02 10:12:32 · 1603 阅读 · 0 评论 -
联调时如何连接后端人员服务器?
在项目文件vue.config.js中target更改一下即可。原创 2021-06-26 15:41:54 · 357 阅读 · 0 评论 -
vue中父子组件的传值(父传子、子传父)
首先需要给两个页面配置路由,配置结束后如下: { path: '/', name: 'Father', component:()=>import('@/views/admin/Father.vue'), }, { path: '/son', name: 'Son', component:()=>import('@/views/admin/Son.vue'), },父组件:<template> <div&原创 2021-05-31 22:17:59 · 127 阅读 · 0 评论 -
页面间跳转时的路由传参(可观察url地址栏变化)
页面跳转时,携带参数传递过去,让被跳转的页面能获取到传参页面所传递的数据。传参页面:跳转时通过query发送数据datasend(){ this.$router.push(path:"/跳转的路由地址",query:{data:发送的数据})}send()是一个方法,例如是一个click方法,点击时通过this.$router.push进行跳转,其中path表示的是跳转的路由地址,query中则是需要携带的数据。接收页面:接收传参页面,跳转过来之后query里的数据data。getQue原创 2021-05-25 15:40:29 · 471 阅读 · 0 评论 -
element-ui Dialog 对话框组件 :visible.sync 的作用
//这个是element-ui组件库提供的对话框插件。:visible指的是属性绑定,表示弹框的显示隐藏,当:visible的值为ture的时候,弹框显示,当为false的时候,弹框隐藏后面的.sync是什么意思呢,指的就是同步动态双向的来表示visible的值,当我们关闭窗口的时候,这个弹框隐藏了,visible的值发生了变化,但是关闭窗口这个动作,我们没法用确定的动作去判断这个值,所以用到了vue中的双向绑定的原则,在vue中统一加上了.sync来表示同步的修改了visible的值。原文链接:h原创 2021-05-12 20:15:20 · 4795 阅读 · 0 评论 -
后端返回来数据,如何让最后一个盒子没有下边框?
v-for="(item,index) in newmyTask :class="index===newmyTask.length-1&&'noline'".noline{ border-bottom:none;}newmyTask是后端返回来的数据数组,noline表示样式问题。原创 2021-05-11 21:45:05 · 413 阅读 · 0 评论 -
几个样式的时候,如何使用三元(目)运算符嵌套实现?
嵌套如下t.str == "1" ? "11" : (t.str == "22" ? "22" : "33"); 案例如下原创 2021-05-11 21:00:17 · 246 阅读 · 0 评论 -
div禁用,不可点击。
div禁用——添加样式style={pointer-events: none;}1、根据当前项目的场景,在特定条件下时,该div禁用,不可点击,先在HTML内给此标签新加一个类名2、写好不可点击的样式3、在特定逻辑下,加入新类名$(".原类名").addClass(“新类名”);...转载 2021-05-11 20:45:42 · 1876 阅读 · 0 评论 -
实现效果:一个组件中三个相同的盒子,要点击其中一个盒子改变其背景色,点击另一个盒子改变另一个盒子背景色
非常笨的一种方法哈,大家如果有好的方法,叫一下博主,我也去学习。<template> <div> <div class="one" @click="changeColorOne"></div> <div class="two" @click="changeColorTwo"></div> <div class="three" @click="changeColorThree"></div&原创 2021-05-08 18:26:16 · 1198 阅读 · 0 评论 -
同一组件中 两个单选radio控制一个div显示与隐藏 代码实现
实现功能如下,点击否显示div,点击是切换div代码如下:<template> <!-- 实现点击是隐藏div 点击否显示div效果 --> <div> <!-- 给两个单选按钮加上change改变事件 --> <el-radio v-model="radio" label="1" @change="changeColor">是</el-radio> <el-radio v-model="原创 2021-05-08 17:47:44 · 913 阅读 · 0 评论 -
看同事代码,他是引入的element组件,但是如果需要更改一部分样式的时候,怎么做?
引入组件需要更改样式 找到其有clsss名(不是element给的名字)的父级,然后使用其名字,加/deep/ 加上element的名字,来更改样式,例如:.three /deep/ .el-tabs-_item{ 样式代码 },样式代码例如(margin-top:5px)如果有其他地方也用到同样的样式,但是这里不需要修改,那么可以给其他的地方的div增加一个class名字(例如为four),然后使用.four /deep/ .el-tabs-_item{ margin-top:5px !important原创 2021-04-13 19:02:21 · 205 阅读 · 0 评论 -
error compiling template但编辑器内未报错,处理步骤。
1.首先寻找自己所引入的组件当中,例如用到了某个方法,而自己没有把方法写上。2.寻找自己所引入的代码当中是否有重复的代码,可能是复制的时候多复制一行而导致的3.寻找是否有空格所导致的error compiling template 报错,可能是多了空格。...原创 2021-04-13 10:41:15 · 926 阅读 · 0 评论 -
项目中如何引入element-ui与vant-ui以及如何将axios进行全局注册?
在vue的main.js文件中这样配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'//这里是引入vantimport Vant from 'vant';import 'vant/lib/index.css';//这里是引入的element-uiimport ElementUI from 'element-ui';import原创 2021-03-17 19:48:10 · 133 阅读 · 0 评论 -
描述 Vue 组件生命周期
挂载阶段:beforeCreate:此阶段为实例初始化之后,此时数据观察和事件机制还没有形成,不能获取到dom节点;created:此阶段的vue实例已经创建,仍不能获取DOM 节点.把vue 的一个实例给初始化了,只是存在于 js 内存的一个变量而已,这个时候并没有开始渲染;beforeMount:在这一阶段,我们虽然还不能获取到具体 DOM 元素,但 vue 挂载的根节点已经创建,下面 vue 对DOM 的操作将围绕这个根元素继续进行,beforeMount 这个阶段是过渡性的,一般一个项目只能用到原创 2021-03-08 21:43:50 · 251 阅读 · 0 评论 -
computer与watch的区别?
Computed 本质是一个具备缓存的 watcher,依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时,在模板中放入过多逻辑会让模板难以维护,可以将复杂的逻辑放入计算属性中处理。Watch 没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。当我们需要深度监听对象中的属性时,可以打开 deep:true 选项,这样便会对对象中的每一项进行监听。这样会带来性能问题,优化的话可以使用字符串形式监听,如果没有写到组件中,不要忘记使用 unWatch 手动注销哦。原创 2021-03-02 22:29:44 · 1627 阅读 · 0 评论 -
接口请求一般放在哪个生命周期中?
接口请求一般放在 mounted 中,但需要注意的是服务端渲染时不支持 mounted,需要放到 created 中。本文转载于Boss直聘 陈大鱼头原创 2021-03-02 22:26:32 · 1992 阅读 · 0 评论 -
说一说vue的生命周期?
beforeCreate 是 new Vue()之后触发的第一个钩子,在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。created 在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发 updated 函数。可以做一些初始数据的获取,在当前阶段无法与 Dom 进行交互,如果非要想,可以通过 vm.$nextTick 来访问 Dom。beforeMount 发生在挂载之前,在这之前 template原创 2021-03-02 22:24:35 · 108 阅读 · 0 评论 -
如何看自己本电脑的ip地址
在桌面上执行cmd窗口,在窗口中执行ipconfig命令即可查找到。原创 2021-01-25 10:17:36 · 176 阅读 · 0 评论 -
Vue中常见的指令及其含义?
v-text 只解析文本信息v-html 可以解析超文本标签v-if/v-else-if/v-else 与javaScript中的一样,用于判断。v-show 通过控制元素的display css属性来控制元素的显示与隐藏v-for 循环v-on 绑定事件,可以用@符号来代替v-bind 绑定元素的一个或者多个属性,用于动态更新html上元素的标签内容v-slot 插槽v-pre 跳过自己以及子元素的编译过程v-model 数据的双向绑定v-cloc原创 2021-01-23 11:00:42 · 399 阅读 · 0 评论 -
Vue中的生命周期
Vue的8个生命周期:beforeCreated 创建前c r e a t e d 创建后beforeMount 加载前mounted 加载后beforeUpdate 更新前Updated 更新后beforeDestory 销毁前destroyed 销毁后什么是 Vue 生命周期?Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过原创 2021-01-21 15:02:20 · 91 阅读 · 0 评论 -
Vue中的v-show 与 v-if 有什么区别?
v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第⼀次变为真时,才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的 “display” 属性进⾏切换。所以,v-if 适⽤于在运⾏时很少改变条件,不需要频繁切换条件的场景;v-show则适⽤于需要⾮常频繁切换条件的场景。...原创 2021-01-13 08:31:31 · 363 阅读 · 0 评论 -
vue-router 路由模式有⼏种?
vue-router 有 3 种路由模式:hash、history、abstract对应的源码如下所示: switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base,原创 2021-01-11 08:47:31 · 777 阅读 · 1 评论 -
什么是Vue实例?
vue中的实例类似于创建一个对象,里面包含钩子函数,data,methods.components等vue实例的对象data 主要是用来存放数据的 Vue框架会检测data的数据变化,自动更新到html上。计算属性computed 主要是用来一些比较复杂的逻辑计算 虽然{{}} 是非常便利的但是它只能进行哪些比较简单的运算,而且只能够支持单个表达式,多个就会报错。methods 可以通过vm实例访问这些方法,主要是用来存放函数方法的watch vue提供的一种更通用的方式观察和响应Vue实例上的数转载 2021-01-06 22:12:52 · 5157 阅读 · 0 评论 -
如何完整的搭建一个项目的开发环境?
本章节主要说的是如何完整的搭建一个项目的开发环境一、安装vue脚手架首先创建一个文件夹并且在本文件夹的黑窗口(cmd命令进入)安装Vue的脚手架,使用:cnpm i -g @vue/cli 命令进行安装检查是否安装成功 :vue --version 命令二、前端vue项目创建创建前端项目文件夹 vue create 项目名例如:vue create kigo-web三、后端...原创 2020-12-28 22:32:06 · 1172 阅读 · 1 评论 -
前端如何实现一个简易的留言框?(使用的是Element ui组件库)
使用Vue以及Element ui组件库实现简易留言框<template> <div class="tab"> <el-row :gutter="20"> <el-col :span="12" :offset="6"> <!-- 头部排序功能 --> <el-button-group> <el-button type="primary">最新<原创 2020-12-28 15:23:35 · 2122 阅读 · 6 评论