Skip to main content

moregeek program

vue利用flex布局实现tv端城市列表-多极客编程

前言vue中城市列表和搜索很常见,这篇文章就来说说怎么实现搜索和城市列表1.实现搜索布局代码:<div class="search-bar"> <input class="search-input" v-model="citySearchResult" :placeholder="searchDefault" :key="searchTitle" @endEdi

Read More

前端三个实用小妙招分享给大家-多极客编程

前言整理下本人在工作中撸代码遇到的一些刚看时一脸懵,实则很简单就能解决的小妙招,希望对大家有所帮助~伪元素动态改变其样式我们都用过伪元素,什么::before,::after啊这些等等,但是他们都不会直接在代码里html中生成标签,那么有时我们不行再加dom元素了,明明就用改dom元素的伪元素更简单,如下图:那个蓝色的进度条就是用动态改变伪元素样式的方式来实现的,那么接下来来看下具体实现方案吧!在

Read More

基于vue+element ui的文件上传(可拖拽上传)-多极客编程

(文章目录) 实现效果 一、先创建一个Dialog对话框进行存放 <template> <!-- 导入遮罩层 --> <el-dialog :title="$t('to_lead')" :visible.sync="BatchAdd" custom-class="BatcchAdd" width="

Read More

基于vue+element table 表格的封装-多极客编程

项目场景: 项目场景:需要频繁使用列表进行呈现数据,不可能每次都写一个表格,可以将表格封装为一个组件,在需要使用时可以直接调用。 效果展示: 项目结构: 具体实现: Table.vue <!-- component:列表 time:2022/11/15 UserData:列数据 tableConfig:表格的列配置,[UserId,key,label,wid

Read More

vue + element ui 动态breadcrumb 面包屑的制作-多极客编程

效果面包屑用于显示当前页面的路径,快速返回之前的任意页面。一、路由配置代码如下:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const VueRouterPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(

Read More

vue切换中英语言制作方法(element+i18n的使用)-多极客编程

介绍: Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。1、安装Element uinpm i element-ui -S2、全局引用Element ui 在 main.js 中写入以下内容:import Vue from 'vue';import ElementUI from 'element-ui';import 'eleme

Read More

java面试题-前端vue-多极客编程

Vue的生命周期 beforeCreate(创建前) 在数据观测和初始化事件还未开始 created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来 beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 mounted(

Read More

js:vue.js快速原型开发方案@vue/cli-多极客编程

(目录) 方式一:全局安装@vue/cli 文档 https://cli.vuejs.org/zh/guide/ npm install -g @vue/cli # 查看版本 vue --version # 创建项目 vue create hello-world 以上方式有一个缺点,需要全局安装命令行工具,而且安装依赖的时候有点慢,如果只是想简单快速的测试某个小功能,有点不划算。 虽然有

Read More

vue 中的 nexttick 有什么作用?-多极客编程

大家好,我是CoderBin 前言 这段时间在写Vue的项目,有些地方难免会用到nextTick的地方,所以本文将浅析nextTick的作用、使用场景和背后的原理实现,希望对大家有所帮助,谢谢! 如果文中有不对、疑惑的地方,欢迎在评论区留言指正🌻 一、什么是nextTick 先看看官方对其的定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

Read More

day19-多极客编程

Vue教程之Vue表单输入一.什么是双向数据绑定Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 ​​vuex​​

Read More

day19-多极客编程

Vue教程之Vue实例的生命周期一.什么是生命周期Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大

Read More

day19-多极客编程

Vue教程之Vue表单输入一.什么是双向数据绑定Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 ​​vuex​​

Read More

day19-多极客编程

Vue教程之Vue实例的生命周期一.什么是生命周期Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大

Read More

vue-router-多极客编程

七.Vue-router1、什么是vue-routervue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统页面切换是用超链接a标签进行切换。但vue里是用路由,因为我们用Vue做的都是单页应用,就相当于只有一个主的index.html页面,所以你写的​​<a></a>​​​标签是不起作用的,

Read More

浅谈 vue3 组件通信-多极客编程

前言 大家好,我是CoderBin,本次又来到了Vue的专题-组件通信。毫无疑问,组件通信是Vue中非常重要的技术之一,它的出现能够使我们非常方便的在不同组件之间进行数据的传递,以达到数据交互的效果。所以,学习组件通信技术是非常有必要的,本文将总结Vue中关于组件通信的八种方式,帮助大家在使用Vue的过程中更加得心应手! 如果文中有不对、疑惑的地方,欢迎在评论区留言指正🌻 一、什么是组件通信 在开

Read More

前端工程化vue-cli-多极客编程

六 前端工程化vue-cliVue是渐近式框架,你可以用它一个功能,也可以用全家桶。前面的章节中,我们是在html中引入vue.js,只用它核心的数据绑定功能。但基于vue的扩展还有很多,比如vueRouter,axios,elementUI等。vue-cli,它是一个专门为单页面应用快速搭建繁杂的Vue脚手架,通俗点说就是代码生成器,可以快速生成一套基于Vue完整的前端框架,单独编译,单独部署。

Read More

canvas 10款基础滤镜(原理篇)-多极客编程

本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 在学习 Canvas 的路上大概率会了解到 滤镜 ,这是个很有趣的东西。 用 Canvas 开发滤镜需要对几何数学、颜色的理解等领域都有一定基础。 但先别关掉文章,没基础也没关系,不是还可以复制粘贴吗?(像极了正则表达式) <br> 我在学习的过程中也尝试过写一些简单的滤镜,也收集过很多滤镜。但由于历史有点久远了,我

Read More

安装vscode-多极客编程

五 安装VS CodeVisual Studio Code,简称VS Code,是一种简化且高效的代码编辑器,同时支持诸如调试,任务执行和版本管理之类的开发操作。它的目标是提供一种快速的编码编译调试工具。优势:支持多种语言的编写,前后端都可以用插件多跨平台启动速度快免费....1.下载路径​​https://code.visualstudio.com/​​2.安装步骤安装后界面如下:3.配置3.1

Read More

#yyds干货盘点#聊聊vuex的mutations和actions-多极客编程

首先讲讲版本问题,如果使用​​vue-cli2​​模版搭建的基础项目,注意,如果使用​​vue​​版本是2,当你你默认安装​​vuex​​肯定是​​4.x​​版本了,这里需要注意的是,你要降低​​vuex​​版本到​​3.x​​版本,不然​​store​​挂载不到​​vue​​上mutation当我们修改数据,只能通过​​mutation​​修改​​state​​import Vue from '

Read More

vue绑定语法--{{xxx}}----指令-多极客编程

vue的绑定语法:又叫插值语法什么是vue的绑定语法专门在HTML中标记变量的特殊的语法何时绑定只要页面中某个元素的内容可能随程序自动变化时,都要用{{变量}}标记如何绑定html地盘        |   js地盘       | html地盘<元素>xxxx{{ 变量或表达式 }}xxx</元素>绑定语法原理 (1). new Vue()扫描到{{}}后,就会先计算{{

Read More