vue.js
试图让你心动
本人从事前端,不断积累经验,学习新的技术。
一个宝藏博主,值得喜欢!
展开
-
使用vant-ui+vue3实现一个可复用的评星组件
如图所示 有两种情况 一种是5颗星 一种是3颗星。在全局注册了此组件(后续还会持续更新代码~)官网上只提供了图标类型的 并没有加文字。使用vant-ui+vue3实现一个可复用的评星组件原创 2024-05-11 11:49:39 · 429 阅读 · 0 评论 -
使用vue3以及原生input实现一个可复用的组件(包括各种数组类型,手机号类型,小数类型)
使用vue3以及原生input实现一个可复用的组件(包括各种数组类型,手机号类型,小数类型)原创 2024-05-11 11:40:27 · 348 阅读 · 1 评论 -
MVVM模式是什么? 它的优点?它和mvc的区别?
随着业务逻辑的增加,controller的处理逻辑会变得越来越复杂,controller也就慢慢的变得越来越胖,这就造成了Controller逻辑复杂,难以维护。1、低耦合:视图(View)可以独立于 Model 变化和修改,一个 ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。mvc和mvvm其实区别并不大。3、独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。原创 2022-11-18 14:41:26 · 476 阅读 · 0 评论 -
如何使用iview的upload实现vue自定义上传做一个可复用页面
" > < / icon > 点此上传文件 < / div > < p class = "upload_field_big" > 文件大小不超过 upload封装原创 2022-10-12 11:24:40 · 770 阅读 · 0 评论 -
使用this.$router.push传不同的id跳如当前的页面出现跳转之后页面不刷新问题
$router.push原创 2022-08-22 16:03:02 · 383 阅读 · 0 评论 -
Reflect基本使用和了解
Reflect是ES2015新推出的特性,虽然是大写开头,但就像Math一样,其内部的属性和方法都是静态的,不能使用new来创建实例. 它提供可拦截JavaScript操作的方法。方法与代理处理程序的方法相同。Reflect 不是一个函数对象,因此它是不可构造的。在之前添加一个键值对是obj[key]=value删除属性用的是delete操作符获取全部的key用的Object.keys()判断对象是否包含一个属性,用的又是in操作符出现Reflect之后let obj = {原创 2022-05-06 15:59:19 · 1138 阅读 · 0 评论 -
vue中的混入mixins: [mixin]如何使用呢
怎么使用创建一个rollperiod js文件// 定义一个混入对象export default { created: function () { // }, methods: { 可以写任何一个方法定义 rollperiod(than,app,dataLen,conf){ } }}在需要的页面中引入import rollperiod from "./mixins/rollperiod";引入这个js文件在expor原创 2021-12-10 17:21:00 · 768 阅读 · 0 评论 -
elementui中tree树形控件拖拽怎么用?参数代表什么??
element-ui文档大家可以先去看看文档中简单用法 <el-tree :data="treeData" node-key="id" @node-drag-start="handleDragStart" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-d原创 2021-08-09 10:35:01 · 2634 阅读 · 1 评论 -
vue.runtime.esm.js?Error in callback for watcher “value“: “Value should be trueValue or falseValue.
前端写项目的时候报这种错误怎么办这是由于vue中的数据是双向绑定的,所以当这个属性清除掉了之后找不到该属性了,但是该值必须要有一个默认值,但是清除掉了之后就没有默认值了,所以就报错了,这个细节需要注意一下就比如说 editformItem:{ CommonProblem:false, //启用 state:false, //通过 public_range:"", //可见范围原创 2021-08-06 15:30:04 · 2907 阅读 · 0 评论 -
【vue/cli3+】实现路由刷新页面
前言在vue写的后台管理项目中,经常会有增、删、改、查的操作,这些操作只是跟用接口跟后台交互下,既然用接口交互,那肯定就是axios的异步请求,那么就是说后台数据发生了改变,但是前台的数据并没有实时的更新(每次操作完后台把列表数据重新返给你例外,但是这样的话每次交互的数据量就偏大了),所以就有了动态路由。在使用动态路由配置/detail/:id这样的情况下,由于router-view是复用的,单纯的改变id的值并不会刷新router-view所以就要想一个办法,让后台执行完操作后,给前台返一个操作结果,然原创 2021-07-26 17:53:19 · 644 阅读 · 0 评论 -
子传父传递事件并且携带多个值?
html<Input v-model="RelatedsourchInput" @keyup.enter.native="SearchQusitions()" icon="ios-search" placeholder="请输入..." />在我enter回车键的时候触发这个事件 但是这个事件是在子组件中写的我要在他的方法这里 SearchQusitions(){ this.$emit('child-say',this.Relatedsourch原创 2021-07-06 10:14:10 · 277 阅读 · 0 评论 -
iframe的优缺点你懂嘛?
iframe的优点:1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。iframe的缺点:1.会产生很多页面,不容易管理。2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话原创 2021-06-11 15:58:47 · 184 阅读 · 1 评论 -
前端实现添加相关问题数据的加减按钮与后端接口进行配合!
以上是小编今天要说的内容先看html代码 <div v-for="(item,index) in formItem.like_question" :key="index" class="linkqusitiondiv"> <Input v-model="formItem.like_question[index].question" /> <Button @click="addlinkQustion(formItem.l.原创 2021-06-10 11:38:50 · 479 阅读 · 0 评论 -
前端性能优化的方法!!!!!!
俗话说:项目应该缺少不了前端的美化 哈哈哈哈哈哈来给大家普及一下前端性能优化的方法吧不要偷偷的收藏哦 可以放到你们的导航栏里 哈哈哈哈哈• content方面减少HTTP请求:合并文件、CSS精灵、inline Image注意: 如果不进行文件合并的话,文件与文件之间有插入的上行请求,增加了N-1个网络延迟,受丢包问题影响更严重,经过代理服务器时可能会被断开,可以进行一个公共库合并,不同页面单独合并减少DNS查询:DNS缓存、将资源分布到恰当数量的主机名使用cach-control或ex原创 2021-05-08 14:56:13 · 146 阅读 · 0 评论 -
什么是盒模型以及标准模式和怪异模式的区别[新手必看]
1. 什么是盒子模型?在我们HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。2.盒子模型有哪两种?标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异模式下: 一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)(IE浏览器)原创 2021-03-25 09:58:28 · 401 阅读 · 0 评论 -
跳转页面传参数[新手必看]
前言:在我们平常做项目中 常常会遇到点按钮去跳转另一个页面,也会有一些问题怎么样去传参数呢,让小编来告诉你1.params传参patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据name就是下一页的路径this.$router.push({name: 'dispatch', params: {name: obj.name}})如何取值呢?this.$route.params.name2 query传参path就是路径this.$router.push({pa原创 2020-12-18 11:18:43 · 1024 阅读 · 0 评论 -
vuex刷新后数据丢失怎么解决[新手必看][建议收藏]
我们在写vue项目的时候,经常要用到vuex作为内存来储存,但是我们存放在vuex中的数据(用户数据,当前页面的数据等等)在刷新后就会丢失,那么如何解决呢?超级简单。1.安装vuex-persistedstatenpm install --save vuex-persistedstate2.修改stroeimport createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ state: {原创 2020-12-15 11:12:21 · 236 阅读 · 0 评论 -
面试官问你:Vue的双向数据绑定原理?
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。一: 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化二: compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑.原创 2020-11-27 15:48:28 · 371 阅读 · 0 评论 -
Vue中ref的作用???
为什么出现ref在没有学习Vue之前,我们实现直接操作页面上的DOM元素都是通过JS/jQuery,因为jQuery对DOM元素的操作非常的方便 但是学习了vue之后 就比jquery更方便所以它的作用是什么呢?使用ref获取页面DOM元素’使用 ref获取子组件对象ref使用原理ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上,注册后的引用信息都会呈现在父组件/Vue实例的 (.refs)上,这时,我们就可以通过(.refs) 上,这时,我们就可以通过(.ref原创 2020-11-18 16:44:22 · 9402 阅读 · 0 评论