VUE
幽幽靖
Happlyjingjing
展开
-
关于研究 vue-cli3 + electron vue项目打包成桌面客户端 相关文章链接
Electron+vue的使用 这个文章讲的操作步骤很详细 【已验证】vue-cli3 + electron项目打包成桌面客户端 有代码展示,未操作,还待研究 最后问题? 桌面客户端不是 .exe 吗 怎么搞 .exe 谁能告诉我???...原创 2022-02-28 15:26:52 · 442 阅读 · 0 评论 -
vue项目之打包txt文件到根目录,百度小程序H5站点关联操作方法
H5站点关联管理若小程序希望替换搜索中已有H5站点资源,需要先进行H5站点关联。1.2.3.4.{ path: "/bd_mapp_domaincer_21829225.txt", name: "baidubd", component: () => import ("../public/bd_mapp_domaincer_21829225.txt"), meta: { title: "房产网_新楼盘_房价-喜欢房",原创 2020-09-06 10:06:38 · 1602 阅读 · 1 评论 -
vue 实现点击切换颜色
<template v-for="(value,index) in span_object"> <span class="y_color_item1" :key="value.color" :style="{'background':value.color}" @click="setChecked(index)...转载 2020-04-10 16:02:57 · 2284 阅读 · 0 评论 -
vue 之手机号验证、正则验证手机号是否正确、手机号验证码信息弹窗
vue 之手机号验证、正则验证手机号是否正确项目介绍:首先 项目是为了获取用户手机号码,其次 验证手机号后才可评论也是为了不让用户乱评论;2.填写评论后,弹出提交手机号、验证码弹窗;填写手机号后获取验证码,输入验证码正确后,才可提交评论;// 1.判断评论内容不为空,出验证手机号弹窗;posttijiao () { if (this.plcontent == "")...原创 2020-04-07 16:48:21 · 15535 阅读 · 0 评论 -
VUE 返回上一页 不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由,前进刷新,返回不刷新
每次进入页面时都执行created、前进刷新,返回不刷新思路:利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新;keepAlive: true // 不需要每次进入刷新代码:app.vue<div id="app"> <!-- <div id="nav"> <r...原创 2020-04-05 12:03:00 · 6228 阅读 · 0 评论 -
Vue 之 多个路由绑定同一组件造成created不执行的解决办法、created没有执行的问题
watch: { '$route' (to, from) { console.log(this.$route.params) }},原创 2020-04-04 18:00:55 · 1053 阅读 · 0 评论 -
vue 之 实现页面滑动到底部自动加载更多的效果、解决VUE 移动端网页中document.documentElement.scrollTop为0 的问题,兼容写法
解决VUE 移动端网页中document.documentElement.scrollTop为0 的问题,兼容写法在做移动端网页时遇到的问题:Vue中document.documentElement.scrollTop的值总为零,解决办法如下:let top = document.documentElement.scrollTop || document.body.scrollTop || ...原创 2020-04-04 16:09:16 · 2199 阅读 · 1 评论 -
微信小程序之数据接收渲染完成后执行其他事件、等到setData节点渲染完成再进行其他操作、vue内有类似nextTick方法
微信小程序当页面渲染则是异步进行时 setData 可以传递回调函数:this.setData({ text: 'Set some data for updating view.'}, function() { // this is setData callback})vue nextTick方法一般在异步调取时,nextTick 内写数据渲染完成后要执行的事情。。 th...原创 2020-03-30 17:41:08 · 8053 阅读 · 0 评论 -
vue 之 关于vuex的一个小demo 、vuex、state、getters、mutations、actions
实现效果:准备环境:vue-cli :如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x),需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载安装vue cli3.0+:npm install -g @vue/cli查看版本:vue --version创建项目:vue create Produc...原创 2020-03-16 19:07:04 · 153 阅读 · 0 评论 -
vue项目准备学习相关文章 devtools安装、创建vue-cli项目、rem的配置、axios封装、beforeEnter使用、公用头尾控制部分页面显示隐藏、基础笔记、图片上传、导航栏置顶
谷歌浏览器chrome的vuejs devtools 插件的安装:https://www.cnblogs.com/alice-fee/p/8038367.html【教程】Chrome 浏览器安装Vue插件方法 (十分详细):https://www.cnblogs.com/wbl001/p/11063613.html可视化创建vue-cli项目:https://blog.csdn.net/ws1...原创 2020-03-01 17:48:25 · 161 阅读 · 0 评论 -
vue图书价格计算,全选效果等demo
vue图书价格计算demo效果图:代码:html:<template> <div class="bookprice"> <table class="booktable"> <tr> <th> <input type="checkbox" ...原创 2020-02-29 19:31:33 · 521 阅读 · 0 评论 -
VUE学习笔记整理(二)
上一篇笔记:https://blog.csdn.net/ws19900201/article/details/98875039vue指令v-showv-if v-elsev-for@clickv-textv-htmlv-bind:href :hrefv-modelv-oncevue 生命周期+组件beforeCreate 未生成created 生...原创 2020-02-29 18:03:14 · 153 阅读 · 0 评论 -
vue、git 学习笔记
vue、git 学习笔记上一篇笔记见(这里做补充):VUE学习笔记git学习 git:克隆Git到本地(建立文件夹):git clone https://xxx建立分支:git checkout -b 新建分支返回主题:git checkout master提交全部 :git add .提交命名:git commit -m ‘命名’ //提交,添加操作说明提交:...原创 2020-02-18 17:10:17 · 168 阅读 · 0 评论 -
vue之自动识别设备为移动端或pc端跳转链接、PC端打开手机版网页自动跳转至PC链接、移动端打开PC链接自动跳转至移动端链接
vue自动识别设备为移动端或pc端跳转链接代码:data() { return { la_id: "", nowurl: "", };},created() { // other ... this.linktab();},methods: { linktab() { let goUrl = this.isMobile();...原创 2020-01-09 14:21:08 · 2855 阅读 · 0 评论 -
vue之 watch 监听数据变化 watch的使用、watch监听数据加载完成后执行、watch不触发、不生效的解决办法及原理
常用方法:watch监听数据完成后执行函数;watch: { huxing: { handler: function(newVal, oldVal) { this.huxingW(); }, deep: true, immediate: true }}methods: { huxingW() { ...原创 2019-12-28 15:26:30 · 4340 阅读 · 0 评论 -
vue 之 vue-router如何在返回时返回到上次滚动的位置
vue-router如何在返回时返回到上次滚动的位置html: <keep-alive > <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"&...原创 2019-12-18 13:41:44 · 337 阅读 · 0 评论 -
vue 实现tap选项卡切换效果
实现效果:常见的 tap选项卡切换效果代码:<template> <div class="tapbox"> <ul class="tapqiehuan"> <li v-for="(item, index) in tapli" :key="index" :class="[index...原创 2019-12-12 16:37:49 · 1586 阅读 · 0 评论 -
vue 之url拼接 根据选择条件动态修改url地址
vue 之url拼接 根据选择条件动态修改url地址终于有勇气再看一遍自己写的代码了,上个月月底 和这个月月初停了大概一周半的时间没有更新文章,一直在研究一个 ‘根据选择条件动态修改url地址’ 的问题。。这并不是常见的那种简单的动态修改路由,要根据选择的区域、类型、均价、户型来动态修改路由,(就是仿照搜狐焦点选择条件这样修改路由,可以看一下搜狐焦点)。。其实简单方法直接在路由后面写query...原创 2019-11-27 17:09:35 · 4539 阅读 · 0 评论 -
vue swiper vue-awesome-swiper 之 slideTo 用法
问题:在事件回调中,我们需要获取vue页面data中的数据,而此时的this指向当前swiper对象,并不指向vue对象;解决办法:1.安装swiper,执行 npm install vue-awesome-swiper --save 命令npm install vue-awesome-swiper --save//cnpm install vue-awesome-swiper --sa...原创 2019-11-22 18:03:29 · 9643 阅读 · 5 评论 -
vue 之记录一个有点凌乱的弹层。。
记录一个有点凌乱的弹层。。不过最终还是实现了的。。描述:header子组件在APP.vue 中 , menulist子组件 在每一个页面中,(由于 menulist子组件是后加的 所以没有跟header写在一起)header中有这样一个点击打开再点关闭 menulist子组件 的按钮,menulist子组件展开;这种情况差不多算是兄弟组件间传值,但问题出现了 menulist子组件...原创 2019-11-22 14:43:45 · 99 阅读 · 0 评论 -
vue 之移动端弹层打开,禁止页面滑动
vue 之移动端弹层打开,禁止页面滑动bodyScroll(event) { event.preventDefault()},stopScroll () { document.body.style.overflow = 'hidden' document.addEventListener('touchmove', this.bodyScroll, false)}, startSc...原创 2019-11-21 09:53:48 · 563 阅读 · 0 评论 -
vue 之事件修饰符 阻止事件冒泡 .stop .prevent .capture .self .once
弹层,点击空白处隐藏;<div class="tanceng" @click="blank"> <div class="main" @click.stop> <!-- ... --> <p class="btn" @click="btn">提交</p> </div></div>问题:点main ...原创 2019-11-21 09:34:48 · 933 阅读 · 0 评论 -
Vue 之 改变 或 动态改变 title 插件 vue-wechat-title
第一种:固定title1.先给路由设置 title;{ path: "/dingwei", name: "dingwei", beforeEnter: area, component: dingwei, meta: { title: "喜欢房" //title } },2.main.js 文件中...原创 2019-11-20 15:23:07 · 336 阅读 · 0 评论 -
vue 之返回上一页按钮 $router.back(-1) 刷新当前页:this.$router.go(0);
vue 之返回上一页按钮 <img src="@/assets/img/nav-prve.png" alt="" class="navprve" @click="$router.back(-1)" /> 其他文章:https://www.cnblogs.com/cheng...原创 2019-11-20 14:28:36 · 6902 阅读 · 0 评论 -
VUE 之实现滚动监听 导航栏置顶的效果
VUE 实现滚动监听 导航栏置顶的效果html: <div class="searchsubbox" id="fixedBar" :class="{ fixedBar: isFixed }"> <ul class="searchul"> <li @click="getSonAreaListData" :class="{ on: qu...原创 2019-11-20 11:51:47 · 650 阅读 · 0 评论 -
vuex状态管理 -- store刷新后数据会重置的解决方法
初用vuex,通过store存储一些共享数据,但是刷新后数据就清空了,所以需要使用本地存储来保存下来。1.state从localStorage中获取import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export const store = new Vuex.Store({ // store刷新后数据会重载 所以...原创 2019-11-13 11:31:46 · 1997 阅读 · 0 评论 -
Vue项目上线后刷新报错404问题(apache,nginx,tomcat)
文章转载:https://www.cnblogs.com/sxshaolong/p/10219527.html一、 Vue项目打包发布apache报错:route,配置一个覆盖所有的路由情况1、需要修改router/index.js中new Router 配置,加一个base: ‘/htcm_front/’, 它指定应用的基路径,该应用是服务于localhost/htcm_front路径下,...转载 2019-11-13 10:51:08 · 444 阅读 · 0 评论 -
vuex 之actions中异步加载数据实现方法,beforeEnter使用,
store.jsimport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);import { position} from "@/api/url.js";export default new Vuex.Store({ state: { position: {} }, mutations: { ...原创 2019-10-24 16:26:57 · 1597 阅读 · 1 评论 -
路由的四种跳转方式
router-link 不带参数<router-link :to="{name:'home'}"><router-link :to="{path:'/home'}"> //name,path都行, 建议用name// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。2.带参数<router-li...转载 2019-10-22 13:40:47 · 5566 阅读 · 0 评论 -
vue项目中,时间戳转化成时间
在全局配置main.js文件中://时间戳转化成格式时间Vue.prototype.formatConversion = function (te){ if(te == ''){ return ''; }else if(te.length == 10){ var time = new Date(te * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000...转载 2019-10-22 09:41:55 · 2072 阅读 · 0 评论 -
vue 之验证手机号
let reg = /^1[0-9]{10}$/; if ( this.telval == "" || this.telval.length <= 10 || !reg.test(this.telval) ) { Message({ message: "请输入正确的手机号", ...原创 2019-10-21 10:52:41 · 876 阅读 · 0 评论 -
vue 之根据数组中id 获取在数组中的位置,并把当前数据放在数组第一位 ;截取数组第二位至数组最后一位
根据数组中id 获取在数组中的位置,并把当前数据放在数组第一位let arr = res.data.list; //数组;let index = arr.findIndex(item => item.id == this.a_id); //根据 已知id(this.a_id) 获取在数组中的位置(index);let thobj = arr.splice(index, 1); //从数...原创 2019-10-17 16:13:22 · 10150 阅读 · 0 评论 -
Vue 中使用 router-link 后,URL 变化但是页面不刷新
原因:这是为了节约资源而采用的组件复用;解决方法:在父组件的 router-view 中加一个 key,例如:<router-view :key="$route.fullPath" />可以放在app.js<m-header /><router-view :key="$route.fullPath" /><m-footer />解决...原创 2019-10-17 15:32:11 · 4687 阅读 · 5 评论 -
VUE 之父组件传值给子组件,子组件监听数据渲染完后执行某函数、watch监听prop中的属性有值后再执行、prop中属性值不为空
代码:<!-- 父组件 --><div class="ulbox"> <huxing :huxing="huxing" /></div><!-- 子组件--><ul class="huxingbd clearfix" ref="ul" :style="{ width: widthnum }"> <...原创 2019-10-17 11:37:42 · 10554 阅读 · 0 评论 -
vue 之filters 过滤器 实现 123... 转 一 二 三...
后台给的数据是 123… 在页面展示需要 一 二 三 这样:实现方法:filters: { //过滤123换成一二三 replace: function(value) { //debugger var N = ["零", "一", "两", "三", "四", "五", "六", "七", "八", "九"]; var str = value...原创 2019-10-12 15:30:08 · 809 阅读 · 1 评论 -
vue路由跳转时定位到页面顶部的方法汇总
背景:在做vue项目时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面介绍一下可以实现的方法:方式一:在main.js中添加以下代码即可:router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 ...转载 2019-10-12 15:04:00 · 713 阅读 · 0 评论 -
vue 上拉加载更多,点击加载更多、实现页面滑动到底部自动加载更多的效果
文章很长的时候又不使用翻页,可以考虑下拉加载。。data () { return { scroll: true, //设置一个开关避免重复请求数据 pagenum: 1, //当前页数 totalnum: 3, //总页数 articleList: [], //页面数据数组 nomore: false } }, ...原创 2019-08-09 15:56:27 · 1755 阅读 · 0 评论 -
vue中,input被封装成组件循环使用,如何与父组件传值
代码input子组件html:注意:子组件 template 中不可以直接循环 需要在外层加个div包起来。。<div class="bj-box"> <div class="bj-item clearfix" v-for="(item, index) in inputList" :key="index"> <label>...原创 2019-08-07 11:21:35 · 1243 阅读 · 0 评论 -
vue中实现类似于jQuery中的ele.addClass('class').siblings().removeClass('class')效果
代码:html<li v-for="(item, index) in tabList" :key="index" :class="[item.isChoose, item.tclass, {on:index == current}]" @click="addon(index)"> <p>{{item.ttext}}<i></i></...原创 2019-08-07 11:10:28 · 1292 阅读 · 0 评论 -
vue v-for截取前几位数组的方法
上代码:方法一:<div v-for="(item, index) in articleList.slice(0,1)" :key="index"> 数组{{index}}</div>方法二<div v-for="(item, index) in articleList" v-if="index < 1" :k...原创 2019-08-09 13:54:09 · 19584 阅读 · 6 评论