vue
北岭有燕
这个作者很懒,什么都没留下…
展开
-
单页面应用
传统网站是不断跳转页面,需要用户等待加载。单页面应用是在使用期间不需要加载页面,把多个页面合并成一页面,通过JavaScript的交互事件或者路由来控制显示。原创 2022-08-02 17:07:12 · 526 阅读 · 0 评论 -
Vue项目本地运行正常,打包上传到服务器后请求地址404问题
问题解决:把nginx里的配置里的 proxy_pass http://127.0.0.1:8080; 改成proxy_pass http://127.0.0.1:8080/;多加一个斜杠。问题分析:Vue项目打包完之后接口请求不到后端出现404错误,这是由于Vue项目打包之后 proxyTable代理配置失效了。由于Vue项目打包之后代理失败,那么就需要使用Nginx进行反向代理请求了,可是还是出现404错误。在nginx中配置proxy_pass反向代理时,当在后面的url加上了 “/转载 2022-04-21 18:52:03 · 8616 阅读 · 0 评论 -
vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)
参考文章http://www.4k8k.xyz/article/qq_41497443/109628370自己额外增加的功能:点击窗口信息后,点击地图的其他地方可以让窗口消失。在最外面的地图div里加上@click="closeWindow($event)"theflag: false, closeWindow(e) { //我这里是判断点击的元素是不是地图坐标,如果是,那就取消隐藏窗口,如果不是那就隐藏窗口。 // e.target 是你当前点击的元素 //原创 2022-03-11 13:37:21 · 976 阅读 · 0 评论 -
如果新增数据,盒子的内容从上面往下滚动
<div class="scrollList"> <div v-for="(item,index) in chainlist" :key="index" > <div>{{item.name}}</div> <div >{{item.age}}</div> <div >{{item.address}}</div>原创 2022-03-11 11:29:16 · 341 阅读 · 0 评论 -
给el-table的某列设置样式
<el-table :data="tableData" > <el-table-column v-for="item in column" :key="item" :prop="item.prop" :label="item.label" :width="item.width" > <template slot-scope="scope">原创 2022-03-02 19:13:34 · 1724 阅读 · 0 评论 -
在微信里打开网页,video视频出现问题,video.js插件解决
在调试的过程中,发现电脑端,手机端在谷歌中打开是没有问题的。但是在微信里打开页面出现问题。分析:微信自带的内嵌浏览器是X5内核,而谷歌的内核是Webkit,video在X5内核里有兼容性的问题。通过https://juejin.cn/post/6844903825002725383#heading-3博客发现可以解决ios的兼容性问题: document.addEventListener( "WeixinJSBridgeReady"原创 2022-02-11 16:52:50 · 6127 阅读 · 0 评论 -
在Vue里引入less
1.添加依赖npm install less less-loader --save-dev2.打开build/webpack.base.conf.js,在 module.exports 的对象的module.rules里添加一个新规则: { test: /\.less$/, loader: "style-loader!css-loader!less-loader", }3.在代码中的style标签中加上lang="less"属性即可。如有遇原创 2021-11-29 15:16:27 · 1283 阅读 · 0 评论 -
Vue3学习笔记
Vue3快速上手学习地址:https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1561.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%原创 2021-11-08 18:30:46 · 325 阅读 · 0 评论 -
Vue el-upload 上传文件
自己写的一个小demo,拷贝到html直接打开即可测试运行。<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-原创 2021-11-04 18:12:22 · 507 阅读 · 0 评论 -
vue-seamless-scroll滚动列表动态追加数据
1.安装vue-seamless-scrollnpm install vue-seamless-scroll --save2.例子(参考官网:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/11-array-length-update.html) <vue-seamless-scroll :data="datalist" :class-option="defaultOp原创 2021-06-10 18:36:34 · 3217 阅读 · 1 评论 -
vue类名获取动态生成的元素
首先注意的是,该元素必须在id为app这个元素里面 new Vue({ el: "#app", })其次是由于动态生成的,想获取到该元素,需要在created里使用nextTick。并且可以 $(’.circle’ + i)拼接想要的元素类名。 this.$nextTick(() => { for (var i = 1; i < this.carlist.l原创 2021-06-02 14:55:51 · 1338 阅读 · 0 评论 -
vue子路由监听父组件传过来的值进行深拷贝
watch: { questionItem: { handler(val, oldVal) { if (val) { this.questionItem = JSON.parse(JSON.stringify(val)) this.init() } }, immediate: true, //刷新加载 立马触发一次handler deep: true // 可以深度检测,...原创 2021-01-30 16:50:28 · 528 阅读 · 0 评论 -
vue遍历数组,获取的值发生变化问题
change(event, day) { // day是days数组里的 // 错误写法:this.clickorigindate = day 相当于传地址给clickorigindate // new Date(ms);参数ms表示的是时间戳 // 时间戳,getTime() 方法,是北京时间1970年01月01日08时00分00秒起至现在的总秒数。 //正确写法如下,传值给clickorigindate,...原创 2021-01-20 11:45:16 · 915 阅读 · 0 评论 -
vue中的$event
<button @click="change($event)" name="名字">单击</button> change(event) { let app = event.target //$event是指当前触发的是什么事件(鼠标事件,键盘事件等) //$event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素 console.log(app.name) //也可以获取原元素的属性。名字 }...原创 2021-01-20 11:10:44 · 1413 阅读 · 0 评论 -
vue在父组件里对子组件动态生成的结点进行操作
updated () { this.$nextTick(function () { $('.solid-line:last').css('display', 'none') }) },原创 2021-01-18 17:12:56 · 481 阅读 · 0 评论 -
vue遍历渲染,click和hover换不同的图
需求如下:三个盒子,click改变图片、文字颜色、背景颜色。hover改变图片和文字颜色,两个事件的两张图片是不一样的。 其中click点击之后下面展示不同内容。思路:data里的每个数据都有绑定一个id。click绑定事件,@click="clickHandle(item.id)",给一个变量等于当前的元素的id来控制color,background-color,img。点击展示不同内容可以用v-if="isChecked==0"v-else-if="isChecked==1"来...原创 2021-01-15 09:34:19 · 1175 阅读 · 0 评论 -
Vue 监听路由的变化
当路由发生变化的时候,就会执行里面的语句,to.path和this.$route.path都可以获取到当前的路由watch:{$route(to,from){console.log(to.path)console.log(this.$route.path)},},...原创 2020-12-24 16:58:22 · 362 阅读 · 1 评论 -
好用网址
高性能日历组件https://github.com/zwhGithub/vue-calendar VUE周日历的实现https://www.cnblogs.com/OIMM/p/13035873.html原创 2021-01-08 10:09:58 · 378 阅读 · 0 评论 -
Vue 一个元素控制另外一个元素的显示和隐藏,同时点击一个元素以外的地方,隐藏另外一个元素
<div @click.stop="basic()" style="width: 100px;height: 100px;background-color: black;"><!-- 注意,这个需要阻止冒泡@click.stop="basic()" -->控制元素</div><div class="person" v-if="sign" style="width: 100px;height: 100px;background-color: red;"&.原创 2020-12-23 17:02:30 · 2609 阅读 · 0 评论 -
vue / nuxt路由query参数变化,但是页面不刷新
在做搜索功能的时候,顶部是一个组件,当顶部组件传值给搜索页: tosearch() { this.search = $('#search').val() console.log(this.search) this.$router.push({ path: '/search', query: { search: this.search, }, }) },但是如果在搜索页原创 2020-12-15 15:50:58 · 4460 阅读 · 0 评论 -
Vue商城项目05(完)
实现购物车效果用vuex并设计购物车数据存储方式运行 cnpm i vuex -Simport Vuex from ‘vuex’Vue.use(Vuex)var store = new Vuex.Store({})在vm实例中挂载 store 状态管理对象 store点击加入购物车功能 addToShopCar() { // 添加到购物车 thi...原创 2020-03-11 22:50:49 · 458 阅读 · 0 评论 -
Vuex
main.js中// 入口文件import Vue from 'vue'//概念:Vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据;// 配置vuex的步骤// 1. 运行 cnpm i vuex -S // 2. 导入包import Vuex from 'vuex'// 3. ...原创 2020-03-10 17:03:36 · 312 阅读 · 0 评论 -
Vue商城项目04
绘制 商品列表 页面基本结构并美化<template> <div class="goods-list"> <div class="goods-item"> <img src="https://img14.360buyimg.com/n0/jfs/t1/68656/34/7819/87669/5d5e0becE1808db...原创 2020-03-10 16:05:34 · 596 阅读 · 1 评论 -
vue http传值Bug: Post 415
解决办法:加上{"Content-Type":"application/json"}login() { this.$http .post("URL",{ "username":this.username,"password":this.password ...原创 2020-03-06 22:25:11 · 1615 阅读 · 0 评论 -
Vue商城项目03
发表评论把文本框做双向数据绑定<textarea placeholder="请输入内容" maxlength="120" v-model="msg"></textarea>data中 msg: “” // 评论 输入的内容为发表按钮绑定一个事件<mt-button type="primary" size="large" @click="postCom...原创 2020-03-02 17:44:12 · 413 阅读 · 0 评论 -
Vue商城项目02
改造新闻的路由链接把a链接改成router-link<router-link to="/home/newslist"><div class="mui-media-body">新闻资讯</div></router-link>匹配路由import NewsList from './components/news/NewsList.v...原创 2020-02-29 16:41:16 · 366 阅读 · 0 评论 -
Promise(ES6)
封装读取文件的方法需求:给一个要读取文件的路径,这个方法能读取文件,并把内容返回const fs = require('fs')const path = require('path')//第一个参数是读取的地址,第二个参数是个读取成功的回调函数,第三个参数是读取失败的回调参数function getFileByPath(fpath, succCb, errCb) { fs.read...原创 2020-02-22 20:16:51 · 237 阅读 · 0 评论 -
Vue商城项目01
将项目源码托管到oschina 码云 中点击头像 -> 修改资料 -> SSH公钥 如何生成SSH公钥如果已经创建过,则公匙位置C:\Users\ASUS.ssh,id_rsa.pub文件夹打开复制即可创建自己的空仓储,Git 全局设置。使用 git config --global user.name "用户名" 和 git config --global user.em...原创 2020-02-18 12:24:08 · 445 阅读 · 0 评论 -
端口被占用的解决办法
events.js:187 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE: address already in use 127.0.0.1:3000 at Server.setupListenHandle [as _listen2] (net.js:1298:14) at ...原创 2020-02-18 10:49:18 · 12300 阅读 · 0 评论 -
MintUI 组件和Mui
MintUI 组件Github 仓储地址Mint-UI官方文档安装Mint UInpm install --save mint-ui导入所有MintUI组件:import MintUI from 'mint-ui'导入样式表:这里 可以省略 node_modules 这一层目录import 'mint-ui/lib/style.css'在 vue 中使用 MintU...原创 2020-02-17 11:20:29 · 712 阅读 · 0 评论 -
vue之watch,computed
watch属性的使用监听data中属性的改变:<div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <span>{{fullName}}</span> </...原创 2020-01-30 17:27:28 · 304 阅读 · 0 评论 -
Vue路由
什么是路由后端路由 :对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由 :对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;不请求服务器。在单页面应用程序中,这种通过hash改变来切换页...原创 2020-01-02 23:58:09 · 225 阅读 · 0 评论 -
Vue组件
定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;如果要使用组件,直接,把组件的...原创 2019-12-27 16:14:25 · 339 阅读 · 0 评论 -
Vue动画-使用第三方类实现动画
引入的时候: 1、从官网下载https://raw.githubusercontent.com/daneden/animate.css/master/animate.css2、通过npm安装$ npm install animate.css3、使用在线cdnhttps://unpkg.com/animate.css@3.5.2/animate.min.css一个例子<!DOC...原创 2019-12-25 16:25:38 · 327 阅读 · 0 评论 -
Vue动画
Vue中的动画CSS 过渡1.opacity属性指定了一个元素的透明度。0 元素完全透明 (即元素不可见)1 元素完全不透明(即元素后面的背景不可见)2.transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。tran...原创 2019-12-25 16:20:42 · 275 阅读 · 0 评论 -
生命周期函数演示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-12-24 11:40:48 · 221 阅读 · 0 评论 -
品牌管理案例、过滤器、自定义指令、生命周期
品牌管理案例在Vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了在使用 v-for 指令循环每一行数据的时候,不再直接 item in list,而是 in 一个 过滤的methods 方法,同时,把过滤条件searchName传递进去: <tr v-for="item in search(searchName)">search 过滤方...原创 2019-12-24 10:34:48 · 252 阅读 · 1 评论 -
vue基础知识点
Vue.js什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上...原创 2019-11-11 14:12:54 · 381 阅读 · 0 评论 -
vue add cube-ui时候报错
报错信息:npm ERR! code EPERMnpm ERR! syscall mkdirnpm ERR! path C:\Program Files\nodejs\eleme\node_modules\.stagingnpm ERR! errno -4048npm ERR! Error: EPERM: operation not permitted, mkdir 'C:\Pr...原创 2019-10-14 13:14:28 · 775 阅读 · 0 评论 -
vue cli3创建vue项目的时候npm ERR! Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs
用管理员模式 运行命令提示符参考文章:https://blog.csdn.net/qq_32973061/article/details/82620798原创 2019-10-13 20:14:57 · 2396 阅读 · 0 评论