vue
刺心疯
一名北飘的技术爱好者,欢迎大家评论一起学习分享新技术~
展开
-
vue.js实现点击后动态添加class及删除同级class
<div class="word" :class="{'bright':index == isActive}" v-for="(item,index) in name" @click="activeClick(item,index)"> <img src="./images/triangle.png" class="triangle"> <span>{{item}}</span> <van-icon name="checked" class=".原创 2022-02-10 16:05:28 · 1429 阅读 · 0 评论 -
Vant中van-dialog组件的调用Dialog弹窗异步关闭操作
<van-dialog v-model="show" title="授权验证" :before-close="onBeforeClose" @confirm="signSupplementaryProtocol"show-cancel-button></van-dialog>Js://阻止关闭弹框onBeforeClose(action, done) { if (action === "confirm") {//点击确定按钮 return done(false.原创 2021-09-22 16:45:36 · 5169 阅读 · 0 评论 -
vue原生项目vant使用图片预览组件ImagePreview报错(非脚手架,cdn引入js文件使用组件)
在非脚手架的原生项目中使用:import { ImagePreview } from 'vant';ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']);这么写会报错,那么怎么解决这个问题呢,其实很简单因为不是脚手架安装的vantUI,用法有些不同,有些组件需要在前面加vant正确ImagePreview的用法:vant.ImagePreview(['https://ss0.bdstatic.com/70cFuHSh_Q1YnxG原创 2021-03-16 19:00:43 · 2108 阅读 · 1 评论 -
VUE 监听当前路由 侦听器 watch
侦听器:你可以利用侦听器,响应数据的变化,例如路由,和页面中data的值,可以在他们变化的时候写相应的处理逻辑在侦听器中。侦听器的使用很简单: watch 对象就是侦听器,只有当侦听的值改变了它才会执行。data() { return { msg: '' }},watch:{ msg:function(){ this.msg = '我改变了,新的msg为:'+msg; }}代码解析: 在data中申明了msg变量为空字符串,在watch侦听器对象里面创...原创 2021-01-04 15:40:49 · 769 阅读 · 0 评论 -
封装一个计时器,记录页面的停留时间
在页面加载时初始化计时器,页面结束时取值。效果如图:上代码:<template> <view class="aaaacc"> <view class="aaa"> {{time}} </view> </view></template> <script> // 计时器 function time_s() { setTimeout(()=> { this.time =原创 2020-12-14 16:38:44 · 311 阅读 · 0 评论 -
Vue给table指定行加样式(附源码)
需求:动态表格指定行加样式解决方法::cell-style=“cellStyle”适用表格插件:Element、vxe-table注:本文以vxe-table表格插件示例,Element表格同理示例:给动态表格第2行、第3行、第5行字体加粗<vxe-table v-else border stripe :data="dataSource" :cell-style="cellStyle" > <vxe-table-column v-for="item in table原创 2020-09-27 10:59:39 · 965 阅读 · 0 评论 -
Vue使用vant 报 Dialog is not defined 错误
正确示范:原理:Dialog挂载到vue后,引用对象为this.$dialog原创 2020-06-16 16:47:42 · 5160 阅读 · 5 评论 -
10个Vue开发技巧
路由参数解耦一般在组件内使用路由参数,大多数人会这样做:export default { methods: { getParamsId() { return this.$route.params.id } }}在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。正确的做法是通过props解耦const router = new VueRo...原创 2020-06-15 14:23:56 · 247 阅读 · 0 评论 -
vue项目中使用三元运算符来更改class(附源码)
<button :class="[ifAuth == 'N' ? 'inF' : 'inY']">{{ ifAuth == 'N' ? '未认证' : '已认证'}}</button>.inF { color: #E79715;}.inY { color: #999999;}核心代码::class="[ifAuth=='N'?'inF':'inY']"原创 2020-05-21 14:11:28 · 2037 阅读 · 0 评论 -
html使用原生vue(非脚手架)来实现左滑删除功能
<ul> <li class="list-item" data-type="0" v-for="(item,index) in getBankCardList"> <div class="rssra" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="toDetail"> <div class='flex'> .原创 2020-05-14 15:12:57 · 402 阅读 · 0 评论 -
使用原生vue(非脚手架)基于vant来实现省市区选择器(附源码)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css"> <!-- 引入 Vue 和 Vant 的 JS 文件 .原创 2020-05-14 15:05:22 · 895 阅读 · 0 评论 -
vue项目里使用JavaScript获取身份证号中的年月日(自测可用)
var app = require('app');var companyId = app.getAllQueries().companyId;new Vue({ el: '#confirm', data: { birthday: '', }, created() { }, mounted() { this.getBi...原创 2019-11-02 17:53:03 · 1034 阅读 · 0 评论 -
vue如何导入外部js文件(自测可用)
一、ES5var JSElement=document.createElement("script");JSElement.setAttribute("type","text/javascript");JSElement.setAttribute("src","https://g.alicdn.com/dingding/dingtalk-jsapi/2.7.13/dingtalk.op...原创 2019-10-30 17:17:14 · 915 阅读 · 1 评论 -
前端开发修改本地项目的访问域名 替换localhost为xxx
需求: VUE的项目本来是http://localhost:8080才能访问的,现在想改成http://jay.com:8080就能访问。操作步骤打开如下图的目录:按照这个路径找到hosts文件,右键打开方式使用记事本打开,在localhost下面加上想要的任意域名。因为不能直接保存,所以需要全选复制hosts文件的内容,新建一个txt文件,粘贴到里面,然后强制...原创 2019-10-23 15:57:05 · 7259 阅读 · 0 评论 -
前端vue.js实现点击复制功能(完美解决移动端可用)
效果图:粘贴图:源码:<div class="box_m form_conter"> <span class="box_p lader">社会信用代码:</span> <input type="text" value="form_tone" id="form_tone"> <span class...原创 2019-10-22 14:35:42 · 4501 阅读 · 0 评论 -
vue radio单选框,获取当前项的value值并给后台传值(自测可用)
话不多说,直接上代码:<label v-for="(item,index) in radioData" :key="index"> <input type="radio" :value="item.value" @click="getRadioVal(item.value)"> {{item.value}}</label>...原创 2019-10-16 21:33:56 · 9333 阅读 · 1 评论 -
html微信内置浏览器点击图片放大,双指缩放,附源码(自测可用)
本人用的是vue框架引用微信的JS<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>/*调用微信预览图片的方法*/ funcReadImgInfo() { let imgs = []; //获取图文中全部的im...原创 2019-10-13 21:05:42 · 2369 阅读 · 2 评论 -
怎么使用vue动态绑定class的方法?
第一种:通过一个布尔值判断样式类是否生效//isActive 是在data里面布尔值, rotateRight 是 class 样式类//isActive 为true时样式类 rotateRight 生效<div :class="{rotateRight:isActive}">aaa</div>第二种:通过三元运算符判断使用哪个样式类//isAct...原创 2019-10-12 17:07:38 · 372 阅读 · 0 评论 -
VUE input唤起键盘 底部固定的标签被顶上去解决办法
通过输入框的失去焦点事件和点击事件,当出现键盘时把绝对定位的底部文字隐藏,失去焦点(键盘隐藏的时候)显示底部文字解决代码:<input type="text" class="weui-input" @click="input_click" @blur='input_blur'/><div v-show='bottom_tip'>底部文字,用了绝对定位,不想被输入...原创 2019-09-19 14:58:50 · 1522 阅读 · 0 评论 -
Vue使用vue-resource插件
一、vue-resource插件的安装使用 npm:$ cnpm install vue-resource --save//个人建议后面添加 --save 这样会自动把插件配置到package.json文件内二、vue-resource插件的引用出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件:用ide打开项目文件,在src目录下创建文...原创 2019-04-04 00:03:35 · 577 阅读 · 0 评论 -
vue vue-style-loader !css-loader错误
vue vue-style-loader !css-loader错误最近在学习vue框架,使用webpack打包vue项目,在执行npm run start的时候 出现如下错误:This dependency was not found:!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_...原创 2019-04-01 21:04:46 · 1581 阅读 · 0 评论 -
H5 localstorage本地缓存数据的封装以及在vue中的使用
H5 localstorage本地缓存数据的封装以及在vue中的使用vue中常用的 每次增加数据 要缓存每次删除数据也要缓存//封装操作localstorage本地存储的方法 模块化的文件//node.js 基础var storage = { set(key,value){ localStorage.setItem(key,JSON.stringif...原创 2019-04-02 20:55:11 · 708 阅读 · 0 评论 -
vue webpack One CLI for webpack must be installed. These are recommended choices, delivered as separ
安装webpack的时候 遇到的情况; 直接按照提示安装 提示Module webpack-cli 不存在解决办法:npm install webpack-cli -g原创 2019-05-23 15:38:25 · 687 阅读 · 0 评论 -
Vue 怎么引入其它Vue文件
我需要在App.vue中引入HelloWorld.vue//引入导航栏组件 Nav 相当于一个变量,名字可以随意 后面路径一定要对import Nav from '@/components/HelloWorld.vue'//注册组件 放在default{}里 组件名称要与引入的变量 Nav_Bar相同components: { Nav_Bar },//使用组件&l...原创 2019-05-23 17:27:17 · 8871 阅读 · 0 评论 -
Vue数据绑定渲染Demo(附源码)
<div id="app">{{ message }}</div>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})Hello Vue!原创 2019-08-07 15:40:04 · 295 阅读 · 0 评论 -
Vue2.0 echarts的使用
一、安装依赖echartsnpm install echarts -S二、图表创建2.1在main.js中,引入(全局)// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts2.2在.vue任意页面,如:index.vueDOM代码<div class="my-charts" r...原创 2019-08-13 10:32:05 · 640 阅读 · 0 评论 -
Vue2.0 fastclick的使用
一、安装依赖fastclicknpm install fastclick二、全局引入在main.js中import fastClick from 'fastclick'fastClick.attach(document.body);三、局部取消fastclick来立刻触发点击事件<a class="needsclick">Ignored by FastClick<...原创 2019-08-13 10:33:14 · 367 阅读 · 0 评论 -
vue 怎么引入公共css文件
1、在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入。import Vue from 'vue'import App from './App' // 引入App这个组件import router from './router' /* 引入路由配置 */import axios from 'axios'import '../static/css/global.cs...原创 2019-08-26 16:22:22 · 1988 阅读 · 0 评论 -
Vue.js 2.0使用vue-router: 嵌套路由
模板抽离我们已经学习过了Vue模板的另外定义形式,使用<template></template>。 <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template i...原创 2019-08-29 16:55:56 · 114 阅读 · 0 评论 -
vue写一个通用的toast弹窗 toast 弹窗 提示 ( 附源码和效果图 )
效果图代码:<!DOCTYPE html><html lang="en"> <head> <title>弹窗</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-09-02 17:55:58 · 698 阅读 · 0 评论 -
vue实现一个饼状图(附源码)
1:在项目里面安装折线图cnpm install echarts --s2:在需要用图表的地方引入import echarts from 'echarts'3:写一个vue代码<template> <section class="chart-container"> <el-row> ...原创 2019-09-06 14:05:31 · 2790 阅读 · 0 评论 -
使用vconsole 调试 查看LOG VUE在手机上调试 手机查看h5的日志详解
简单介绍下vConsole:vConsole是一个由微信公众平台前端团队研发的web前端开发者面板,可用于展示console日志,方便开发、调试。使用场景1,在vue-cli 构建的项目中使用:通过npm安装和使用:npm install vconsole --save在main.js文件里面引入:import VConsole from 'vconsole'Vue.p...原创 2019-09-16 10:33:09 · 2739 阅读 · 0 评论 -
VUE 返回页面不刷新实现代码
用 VUE 默认的keep-alive组件实现实现方式:1.在路由内设置页面是否需要缓存;示例代码:(在需要的组件里面添加meta 对象,keepAlive属性,keepAlive的值为是否需要缓存组件) { path:'/UpInfo', name:'UpInfo', component:UpInfo, meta:{...原创 2019-09-18 11:31:27 · 3713 阅读 · 0 评论 -
vue页面显示就执行某个函数,页面隐藏就执行某个函数
//info.vue<template> <div id="info"> 我的info页面 </div></template><script> export default { data() { return { } }, methods: {}, act...原创 2019-09-18 11:32:52 · 5923 阅读 · 0 评论 -
Vue使用vue-axios插件
一、vue-axios插件的安装使用 npm:$ cnpm install axios二、vue-axios插件的引用出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件:用ide打开项目文件,在src目录下创建文件夹axios,后在文件夹内创建index.js。如图:2.编写引用的相关代码:step1: axios下的index.js:...原创 2019-04-04 00:02:17 · 1246 阅读 · 0 评论