vue
小杨同学呀呀呀呀
程序媛一枚
展开
-
Vue.js常用修饰符及其用法(想要了解的看过来)
当使用Vue.js框架进行前端开发时,修饰符是一个非常重要的概念。修饰符可以用来扩展指令的功能,或者修改指令的行为。在Vue.js中,有许多常用的修饰符,它们可以帮助我们更灵活地操作DOM元素、监听事件以及处理表单等操作。下面我们将介绍一些常用的Vue修饰符,以及它们的用法和作用。原创 2023-12-25 16:52:53 · 461 阅读 · 0 评论 -
vue表单回车刷新页面问题解决@submit.prevent
当我们在使用Vue.js开发时,经常需要使用表单来收集用户的输入信息。在表单中,用户可能会通过按回车键提交表单数据,而不是点击提交按钮。然而,如果我们没有适当地处理回车事件,就会导致表单被意外地提交,从而刷新页面。这种情况下,我们可以使用Vue.js提供的@submit.prevent修饰符来解决这个问题。原创 2023-12-25 16:18:26 · 818 阅读 · 0 评论 -
vue基础 v-for更新监测
v-for更新监测先看案例<template> <div> <ul> <li v-for="(item, index) in arrList" :key="index"> {{ item}} </li> </ul> <button @click="revBtn">数组翻转</button> <button @click="sli原创 2022-02-26 15:21:07 · 727 阅读 · 0 评论 -
超全 js获取年月日
var myDate = new Date();//以下都是在myDate的基础上得到的。myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-原创 2022-01-07 17:11:40 · 17510 阅读 · 0 评论 -
this.$nextTick的用法和原理
先来看一下我遇到的问题,万一以后你们遇到了也可以尝试这样解决文章有点长,耐心看完vue项目中使用轮播图效果:使用swiper动态加载数据,动态轮播数据显示为空。在网上看了很多博主都是说保证在数据请求之后再渲染页面...原创 2021-09-14 16:37:46 · 25653 阅读 · 4 评论 -
vue—复制功能
最近写项目遇到了一个新需求,完成一键复制功能,这个功能在项目中说是很常见了。但是也卡了很长时间竟然。下面记录一下整个流程卡的地方1. 首先在项目中导入clipboardnpm install clipboard --save2. 首先在项目中导入clipboardimport Clipboard from 'clipboard'写好按钮 并加上点击事件下面 this.$refs.clipboard_pc 对应上面要点击按钮的 ref=“clipboard_pc”tip: 注.原创 2021-09-03 11:02:02 · 595 阅读 · 0 评论 -
Vue监听路由变化的几种方法(亲测有效)
Vue监听路由变化的方式VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?一、 通过 watch// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},或者// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, oldVal){ console.log(val); }转载 2021-08-26 17:15:40 · 14849 阅读 · 0 评论 -
vue如何监听数组变化?
Vue.js观察数组变化主要通过以下7个方法(push、pop、shift、unshift、splice、sort、reverse)怎么实现?通过对data数据中数组的这7个方法进行重新包装(注意只是data数据中的数组)为什么不直接对Array.prototype的原型方法进行重新包装?因为不应该过多地去影响全局案例:const patchArray = (function () { const methodsToPatch = [ 'push', 'p原创 2020-05-09 23:54:22 · 4307 阅读 · 0 评论 -
vue组件使用---父子组件之间的传值
vue组件使用props 和 $emit组件间通讯-自定义事件组件生命周期本章介绍 props 和 $emit一、父子组件传值 props1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值4.保存修改的文件,查看浏览器5.我们依然可以对message转载 2020-05-08 22:43:32 · 112 阅读 · 0 评论 -
登入功能业务逻辑梳理
Vue的基本使用一、指令、插值插值、表达式指令、动态属性v-html:会有XSS风险,会覆盖子组件二、computed和watchcomputed有缓存,data不变则不会重新计算watch监听引用类型,拿不到oldValwatch如何深度监听? 答:deep:true三、class和style使用动态属性 冒号:驼峰式写法 例:fontSize四、条件渲染v-if v-else的用法,可使用变量,也可以使用===表达式v-if和v-show的区别原创 2020-05-08 22:01:53 · 787 阅读 · 0 评论 -
vue项目性能优化-总结
Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、 Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化, 使项目具有更高效的性能、更好的用户体验。一、基础优化(代码以及编码规范)1...原创 2020-04-30 16:37:09 · 805 阅读 · 0 评论 -
vue-cli(vue脚手架)详细教程
vue-cli 安装vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。1.安装vue-cli① 使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npm install webpack -g或者(npm install -g ...原创 2020-04-08 21:20:02 · 2848 阅读 · 1 评论