VUE
我是来写bug的吧
我有恐女症!
展开
-
vue使用sortablejs结合element Table实现拖拽
vue使用sortablejs结合element Table实现拖拽使用sortablejs中文网原创 2022-07-12 14:57:24 · 1008 阅读 · 1 评论 -
Vue中filter过滤器的使用方法
过滤器分为两种: 全局过滤器:所有组件都可以使用 局部过滤器:只允许在当前组件中使用全局过滤器我们可以新建一个filter文件夹然后新建index.js在main.js中引入接下来就可以在组件中使用了。这样就可以在当前组件使用了。...原创 2022-07-08 17:15:05 · 935 阅读 · 0 评论 -
vue.sync的用法
vue提供了.sync修饰符,说白了就是一种简写的方式,我们可以将其当做是一种语法糖,比如v-on:click可以简写为@click。sync修饰符,与我们平常使用$emit实现父子组件通信没有区别,只不过是写法上方便一下。.sync修饰符首先我们知道,父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信,通过这种间接的方式改变父组件的data,从而实现子组件改变props的值,比如向下边这样:this.$emit('update:value', newValue)原创 2022-03-31 17:56:44 · 1404 阅读 · 2 评论 -
Vue 运行打包后的项目
安装依赖npm i connectnpm i runjsnpm i serve-static修改package.json在scripts里加入下面代码"preview": "node build/index.js --preview",然后在build文件夹里新建index.js加入以下代码const { run } = require('runjs')const chalk = require('chalk')const config = require('../vu原创 2022-03-28 10:44:48 · 2417 阅读 · 0 评论 -
vue2 v-if和v-for不一起使用的方法
避免在v-for中使用v-if一个超常见的错误是使用v-if来过滤v-for循环的数据。<ul> <li v-for='product in products' :key='product.id' v-if='product.isShow' > {{ product.name }} </li></ul>上述的代码虽然看上去直观明了,但这会导致一个巨大的性能问题Vue中的v-for优先于v-i原创 2022-01-13 10:44:12 · 364 阅读 · 0 评论 -
vue 实现商品规格选择(sku)
动手之前要先确定自己的商品数据结构,下面是我的商品数据结构 dataInfo: { attr: [ { attr_name: "码数", attr_value: [{attr: "40"}, {attr: "50"}], attr_values: ["40", "50"], }, { attr_name: "颜色",...原创 2021-12-23 14:18:07 · 4233 阅读 · 2 评论 -
vue 一键复制内容到粘贴板
1.安装依赖npm install clipboard --save2.引入 全局注册import Clipboard from 'clipboard';Vue.prototype.Clipboard = Clipboard 单个组件使用import Clipboard from 'clipboard';3.属性说明data-clipboard-target:指向要复制的元素节点data-clipboard-action:copy(复制)或者cut(剪切)...原创 2021-12-22 11:22:22 · 1007 阅读 · 1 评论 -
vue使用better-scroll实现菜单列表左右联动
1.先看效果2.后面我会把完整代码上传到资源原创 2021-10-11 15:17:50 · 413 阅读 · 4 评论 -
Vue使用qrcode和vue-qr生成二维码
qrcode将输入框输入的内容生成二维码演示效果1.安装 npm install --save qrcodejs22.引入在需要使用的页面引入 import QRCode from 'qrcodejs2'3.使用html // vant的输入框 <van-field v-model="value" label="生成二维码" placeholder="请输入内容" /> // vant的按钮 <van-button type="..原创 2021-09-27 15:17:10 · 1678 阅读 · 3 评论 -
Vue使用vue-quill-editor实现富文本编辑器
1.先看效果原创 2021-09-24 15:12:08 · 114 阅读 · 1 评论 -
vue使用Vue-area-linkage实现省市区三级联动和省市区街道四级联动
1.废话不说,先看效果第一个四级联动我设置的默认地址为河南省信阳市光山县弦山街道。2.开始安装 npm i --save area-linkage-vue3.全局注册 import VueAreaLinkage from 'area-linkage-vue'; import 'vue-area-linkage/dist/index.css'; import { pcaa } from "area-data-vue"; Vue.use(VueAreaLinkage); V原创 2021-09-22 17:29:40 · 2155 阅读 · 3 评论 -
VUE使用防抖和节流,避免重复触底加载和点击
1.可以在utils文件夹中新建一个common.js文件 // 防抖 export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () { let args = arguments; if(timer){ cl原创 2021-09-10 13:53:00 · 1290 阅读 · 2 评论 -
vue使用watch(监听属性)
监听属性(watch):vue数据是响应式数据:指的是数据可以进行跟踪和监听。1.比较常用的使用方法 watch:{ // 属性是要监听变化的数据,属性值是监听函数 msg:function(newValue,oldValue){ console.log(newValue); // 变化之后的值 console.log(oldValue); // 变化之前的值 } }2.直接写一个监听函数原创 2021-08-26 16:06:29 · 2568 阅读 · 0 评论 -
vue使用vue2-verify(图形验证码)
1.安装npm install vue2-verify2.使用</template> </div> <Verify ref="loginVerifyRef" :type="2" @error="error" :showButton="false" @success="success" :width="'100原创 2021-07-27 15:29:34 · 2246 阅读 · 1 评论 -
Vue中使用md5加密
1.安装npm install --save js-md52.使用(1)在需要使用的项目文件中引入import md5 from 'js-md5'; 在文件中使用md5(要加密的内容)(2)在main.js文件中将md5转换成vue原型import md5 from 'js-md5';Vue.prototype.$md5 = md5; 在文件中使用this.$md5(要加密的内容)...原创 2021-07-26 17:02:24 · 802 阅读 · 1 评论 -
postcss-pxtorem搭配lib-flexible 来实现移动端适配
postcss-pxtorem是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位。lib-flexible用于设置 rem 基准值。1.安装postcss-pxtorem 和 lib-flexiblenpm install lib-flexible --savenpm install postcss-pxtorem --save-dev2.引入lib-flexible在main.js中引入引入lib-flexibleimport 'lib-flexi...原创 2021-07-22 17:35:28 · 1233 阅读 · 0 评论