vue
輕描淡寫以後的以後
这个作者很懒,什么都没留下…
展开
-
vue js页面滚动到最底部
最近开发一个客服聊天,发送消息,消息需要展示到最低部,// 发送消息 sendMessage() { this.form.message = this.formInput this.form.senDate = this.getNowFormatDate(); const form = JSON.parse(JSON.stringify(this.form)) this.chatList = this.chatList.concat(form) ..原创 2021-04-04 11:21:33 · 1877 阅读 · 0 评论 -
vantUi formdata 上传
<van-uploader :after-read="afterRead" @oversize="onOversize" />afterRead(data:any) { // 此时可以自行将文件上传至服务器 console.log(data.file); let formdata = new FormData(); formdata.append('file',data.file); HomeService.fileUpload(formdata).原创 2021-03-30 14:53:46 · 374 阅读 · 0 评论 -
vue实现点击按钮页面滑动到对应的div
<template> <div> <p> <button @click="showDetails(1)">NO1</button> <button @click="showDetails(2)">NO2</button> <button @click="showDetails(3)">NO3</button&g.转载 2021-01-30 01:17:10 · 1847 阅读 · 0 评论 -
axios解析http链接代码
contentHtml 为解析后的代码axios.get(_content, {withCredentials: false} ).then(res => { this.contentHtml = res; var start=this.contentHtml.lastIndexOf("<body>") var end=this.contentHtml.lastIndexOf("</body>") this.contentHtm.原创 2020-12-21 15:25:29 · 517 阅读 · 0 评论 -
vue文字间歇无缝向上逐个滚动
<div class="marquee-wrap"> <ul class="marquee-list" :class="{'animate-up': animateUp}"> <li v-for="(item, index) in listData" :key="index">{{item.name}}</li> </ul> </div>Ts animateUp = f...原创 2020-11-26 14:41:38 · 1050 阅读 · 0 评论 -
Vue添加销毁监听滚动事件
添加 window.addEventListener("scroll",this.adsorb) 销毁 window.removeEventListener("scroll",this.adsorb)this.adsorb不能写成this.adsorb()否则只会在加载完成执行一次就不执行了。如果想要传参应该在方法里添加监听事件如:adsorb(data){ window.addEventListener("scroll",function(){ //要做的事...转载 2020-08-21 10:27:28 · 2107 阅读 · 0 评论 -
vue-cli3.0 生产包去除console.log
目前负责的公众号又迭代了一个版本,之前打生产包,配置总是和测试包搞混,所以使用了vue-cli3.0的环境变量来控制配置。但是又发现了一个新问题,写代码的过程中写了很多console.log 来调试代码,但是生产包里显示这些调试信息又有些不合适,所以想在打生产包的时候去除代码中的console.log.网络上一顿搜索之后,使用了uglifyjs-webpack-plugin来进行压缩优化,但是遇到了Unexpected token: name ***的报错,又是一番查询之后,有说这个插件不支持es6转载 2020-07-24 14:06:38 · 763 阅读 · 0 评论 -
vue总结
vue框架篇vue的优点轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了angular的特点,在数据操作方面更为简单;组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操转载 2020-07-16 23:06:06 · 360 阅读 · 0 评论 -
vue ts 跳转当前页面改变参数页面不刷新
使用TS Watch 装饰器 监听 $route 变化 从新请求数据@Watch('$route')on$routeChange(){this.findExpert();//获取专家详情this.getSimilarityexpert();//获取需求列表}...原创 2020-04-30 15:09:59 · 1048 阅读 · 0 评论 -
vue用npm 卸载element-ui 安装指定版本
vue用npm 删除模块element-uinpm uninstall element-uinpm i element-ui@2.0.10原创 2020-03-09 17:36:40 · 5316 阅读 · 0 评论 -
Vue打包文件放在服务器,浏览器存在缓存问题的解决
因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。解决方法:找到webpack .prod.conf.js 1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,也可以自己定义成别的如:1.1 2.修改要生成的js和css...转载 2019-10-28 12:19:50 · 554 阅读 · 0 评论 -
Vue学习—Vue写一个图片轮播组件
1、先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播。我认为使用图片轮播。 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容。 2、每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用。 3、基本要求:页面加载,自动播放。鼠标悬停,停止播放。鼠标离开,继续播放 ...转载 2019-03-14 17:40:07 · 1611 阅读 · 0 评论 -
vue前端框架面试问题汇总,附答案
1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答:在ro...转载 2018-05-15 11:34:04 · 30982 阅读 · 1 评论 -
前端面试vue的常见理论问题,附必过的神助攻答
一、请说下具体使用vue的理解?答:1、使用vue不必担心布局更改和类名重复导致的js重写,因为它是靠数据驱动双向绑定,底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现一、请说下具体使用vue的理解?答:1、使用vue不必担心布局更改和类名重复导致的js重写,因为它是靠数据驱动双向绑定,底层是通过Object.defineProperty() 定义...转载 2018-05-15 11:39:31 · 3001 阅读 · 0 评论 -
vue的七道常见面试题
vue的优点是什么?什么是mvvm?mvvm和mvc区别?1:什么是mvvm?MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。在MVVM架构下,View 和 Mo...原创 2018-05-16 10:36:38 · 26009 阅读 · 3 评论 -
Vuex状态管理模式的面试题及答案
1、vuex有哪几种属性? 答:有五种,分别是 State、 Getter、Mutation 、Action、 Module 2、vuex的State特性是? 答: 一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,1、vuex有哪几种属性?答:有五种,分别是 State、 Getter、Mutation 、Action、 Module2、vuex的State特性是?...转载 2018-05-16 11:14:17 · 8625 阅读 · 2 评论 -
vue 安装失败,找不到模板错误 解决办法
卸载vue-cli全局卸载:npm uninstall vue-cli -g;查看vue版本,vue -V 回车,查看vue最新的版本。从新安装全局安装:npm install vue-cli -g;原创 2018-08-16 10:55:13 · 1329 阅读 · 0 评论 -
vue 切换到新路由时 想要页面滚到顶部
在 Router 中添加代码scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}详情可以看官网https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8 ...原创 2018-09-19 10:25:31 · 1603 阅读 · 0 评论 -
使用 better-scroll 页面不能点击
better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值为 true。 const options = {click: true,taps: true}this.scroll = new BScroll(th...原创 2018-09-20 15:50:24 · 4071 阅读 · 0 评论 -
使用命令创建VUE项目
使用命令创建vue项目环境要求: 安装有 Node.js、 vue、 vue-cli 。创建项目:vue init webpack projectName进入项目,下载依赖:npm install 或者 cnpm install运行项目:npm run dev...原创 2018-09-26 15:36:51 · 598 阅读 · 0 评论 -
vue 非父子组件之间传值 bus / 总线
一、在Vue 的原型中创建一个属性 bus Vue.prototype.bus=new Vue();二、子组件中绑定事件 比如叫 handleClick,在子组件中定义 hanleClick 方法 ,handleClick 方法中使用 this.bus.$emit('change',this.contentmsg); 触发事件 ‘ change ’ ,携带th...原创 2018-09-21 11:38:18 · 587 阅读 · 0 评论 -
vue 打包
项目=>config=>index.js 配置服务器相对路径module.exports = { assetsPublicPath: './',}打开终端 进入项目 npm run build生成的 dist 目录 放到服务器原创 2018-03-22 09:56:39 · 310 阅读 · 0 评论