![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
文章平均质量分 53
ZXH0122
越努力越幸运,加油!
展开
-
Vue 常用传值方式、父传子、子传父、非父子组件传值
Vue2.0 传值方式:在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。Vue常用的三种传值方式有:父传子子传父非父子传值引用官网的一句话:原创 2023-02-28 17:03:11 · 200 阅读 · 0 评论 -
常用的前端大屏 适配方案
前端大屏常用的几种 适配方案原创 2023-01-11 09:40:09 · 10312 阅读 · 1 评论 -
iview中Upload 上传文件转化为base64
上传文件转化为base64原创 2022-11-07 16:37:01 · 836 阅读 · 0 评论 -
设置button的loading属性且使用定时器2秒后移除
设置button的loading属性且使用定时器2秒后移除原创 2022-11-02 10:23:17 · 853 阅读 · 0 评论 -
子组件调用父组件中方法的方法
1.在子组件中用this.$parent.fn()来调用父组件的方法。原创 2022-08-22 10:54:07 · 2365 阅读 · 0 评论 -
基于vue-seamless-scroll无缝滚动
基于vue-seamless-scroll无缝滚动原创 2022-08-12 09:37:06 · 673 阅读 · 0 评论 -
vue路由跳转携带参数拼接url后面,且刷新不丢失
路由携带参数跳转时,参数拼接url后,刷新参数不丢失原创 2022-07-28 11:06:59 · 1256 阅读 · 1 评论 -
return的用法是什么?若用在for循环中,还会执行下一次循环吗?
return的用法是什么?若用在for循环中,还会执行下一次循环吗?原创 2022-07-04 10:26:27 · 9982 阅读 · 0 评论 -
循环tab且下面的数据(修改)不相互影响
循环出来的tab,且修改tab下的内容不会相互影响原创 2022-06-30 10:55:22 · 239 阅读 · 0 评论 -
Vue 开发必须知道的 --- 小技巧(下)
21.Vue.config.keyCodes场景:监听性能Vue.config.performance = true只适用于开发模式和支持 performance.mark API 的浏览器上.23.Vue.config.errorHandler1.场景:指定组件的渲染和观察期间未捕获错误的处理函数2.规则:从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里的错误。同样的,当这个钩子是 undefined 时,被捕获的错误会通过 console.error 输出而避免应用崩溃从 2.4原创 2021-08-10 11:26:40 · 540 阅读 · 0 评论 -
Vue 开发必须知道的 --- 小技巧(中)
4.render 函数1.场景:有些代码在 template 里面写会重复很多,所以这个时候 render 函数就有作用啦!// 根据 props 生成标签// 初级<template> <div> <div v-if="level === 1"> <slot></slot> </div> <p v-else-if="level === 2"> <slot></slot>原创 2021-08-06 12:00:51 · 142 阅读 · 0 评论 -
Vue 开发必须知道的 --- 小技巧(上)
1.require.context()1.场景:如页面需要导入多个组件,原始写法:import titleCom from '@/components/home/titleCom'import bannerCom from '@/components/home/bannerCom'import cellCom from '@/components/home/cellCom'components:{titleCom,bannerCom,cellCom}2.这样就写了大量重复的代码,利用 requ原创 2021-07-13 16:11:32 · 172 阅读 · 2 评论 -
vue2.0 开发一定用得着的
1、$nextTick: 用于延迟执行一段代码,当你需要操作dom时,将dom操作的js放在this.nextTick()的回调函数中。// $refs this.$nextTick(() => { this.$refs['form'].resetFields()})2、watch 监听watch: { currentCode(val, oldVal){//普通的watch监听-一般用于字符串、数值、布尔 console.log("currentCode:原创 2024-05-23 14:00:00 · 359 阅读 · 1 评论 -
vue同级组件间传值
1,1,在main.js同级 目录下新建eventBus.js文件import Vue from "vue"export default new Vue()2,在组件a中传出值首先我们需要引入我们新创建的eventBus.js文件,通过$emit传值<template> <div class="A" @click="gotoB()"> <h1>AAA</h1> <p>我是A中的a:【 {{ a }} 】</p&原创 2020-12-15 20:31:29 · 1556 阅读 · 3 评论 -
v-model的原理+使用方法
一:什么是v-model?v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。二:原理v-model其实是一个语法糖背后包含两个操作v-bind动态绑定一个value属性v-on给当前元素绑定input事件也就是说以下两段代码等价<input type="text" v-model="message"><!--等同于下面--><input type="tex原创 2020-12-05 16:31:32 · 3311 阅读 · 0 评论 -
Vue的路由实现:hash模式 和 history模式的区别
区别:hash模式:1.采用的是window.onhashchange事件实现。2.可以实现前进 后退 刷新。3.比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中, 对后端完全没有影响,因此改变hash不会重新加载页面history模式:1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法原创 2020-12-02 20:12:34 · 168 阅读 · 0 评论 -
vue路由传参的三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<li v-for="article in articles" @click="getDescribe(article.id)">methods:方案一:通过路径 getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`原创 2020-11-24 18:38:30 · 538 阅读 · 0 评论 -
params传参和query传参
转载于:潇潇雨歇https://blog.csdn.net/lan128lan/article/details/81126470写下前面:当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。 注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的http请求或者其他操作就会失转载 2020-11-19 14:54:00 · 1658 阅读 · 0 评论 -
当vue页面被浏览器解析后,在标签中出现data-v-xxx
在加着 scoped 后编译如下所示:去掉 scoped 后编译如下所示:原创 2020-11-18 14:28:12 · 1696 阅读 · 2 评论 -
vue 全家桶
Vue全家桶:vue + vue - router + vuex +axiosVue是一套用于构建用户界面的渐进式框架,和React,都自称自己只关注视图层在文件中引入vue如:<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js"></script>可在 https://www.bootcdn.cn/vue 中找到相关版本的 js看一个Demo:此时,如果页面显示了 Hello Vue原创 2020-11-12 16:30:28 · 182 阅读 · 0 评论 -
vue子传父、父传子
子传父vue子传父使用$emit传值子组件:<template> <div> <button @click="toParent">点击传到父级</button> </div></template><script>export default { name: 'child', methods: { toParent () { t原创 2020-11-10 18:57:00 · 398 阅读 · 0 评论 -
Vue中 computed、methods的区别
computed 和 methodscomputed是计算属性,methods是方法,都可以实现对 data 中的数据加工后再输出。不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变,多次访问 reversedMessage(对message 进行加工的处理函数) 计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲染,原创 2020-11-02 10:24:05 · 247 阅读 · 0 评论 -
vue-面试题
1、标题组件中的data为什么不是一个对象而是一个函数?组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。2、 vue中第一次页面加载会触发哪几个生命周期钩子函数?会触发下面这几个beforeCreate, created, beforeMount, mounted3、vue.原创 2020-10-14 19:52:35 · 131 阅读 · 0 评论 -
Vue::is特性详解和示例
今天在阅读Vue教程的时候,读到“解析DOM模板时的注意事项”这一节,看到:is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签,这时候就要用is代替一下,让html语法符合规则验证。is属于指定要在内部使用的标签。文档链接:https://cn.vuejs.org/v2/guide/components.html教程里面是这么解释的:看完之后能感觉到就是想要把blog-post-row的内容放在table中的tr标签中,是通过:is特性来进行使用的。但是感觉不知道具原创 2020-07-28 10:05:59 · 384 阅读 · 0 评论 -
面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧。结合注释,希望能让大家有所收获。1、原理Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例。为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-model,v-bi转载 2020-06-19 08:14:02 · 173 阅读 · 0 评论 -
vue组件回调返回值,让你的代码更为简洁
缘由最近写公司业务代码的时候遇到这样一个需求,我写这块部分需要新增加一个弹窗,进行二次确认。使用的组件库是比较老的ant desgin vue 1.2.4。这个组件库是没有像elementUI的confirm方式可以自定义html部分的。但是我的内容其实非常少。如果用传统的直接写弹窗的二次确认方式缺点1:业务代码会变得很多缺点2:我本身是在别人已经做完的基础上新增一个接口拦截,参数是传递给另一个函...原创 2020-04-20 11:37:36 · 2600 阅读 · 2 评论