vue
Colese
越活越年轻!
展开
-
web前端 环境配置说明
1.0.0 node.js 安装node官网: http://nodejs.cn/download/根据电脑位数配置:安装对应的版本!安装完成后,执行 node-v检查版本显示版本号 才算是安装成功!1.0.1 npm目前node.js 环境集成了 npm,所以不用重新安装 npmnpm的本地仓库,输入命令npm list -global输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站2.0.0 webpa原创 2020-05-14 11:26:14 · 692 阅读 · 0 评论 -
vue 中使用 倒计时 时分秒 毫秒
1.直接上代码 //时间倒计时处理 countTime() { var date = new Date() var now = date.getTime() var end = this.treasu_data.etime * 1000 //this.treasu_data 在data中定义的 var leftTime = en...原创 2020-04-07 17:08:22 · 3525 阅读 · 0 评论 -
vue微信分享 微信 js-SDK
1. vue 前期配置 ( 此操作一般由后台童鞋配置 )1.0.1 配置 js安全域名配置js 安全域名 ,配置 对于 vue框架 只需要配置到 页面的 #(哈希前) index 就可以了.点击设置—公众号设置—功能设置进入设置界面1.0.2 配置 ip白名单配置IP白名单,微信公众平台出于安全考虑,根据appId和appSecret去获取access_token的时候,...原创 2019-11-24 17:40:59 · 482 阅读 · 0 评论 -
vue中 根据变量 来设置不同的class和style及css背景图过大的问题
1.改变class// 判断isreply是否为false, 若为false, 则拥有m-light-reply的class名<div :class="{'m-light-reply': !isreply}"></div>// 判断lang=='en' 是否为false, 若为false, 则拥有text-p的class名 <p v-bind:class=...原创 2019-06-02 16:25:32 · 7098 阅读 · 0 评论 -
vue-Scroller上拉加载,下拉刷新 及 element-ui分页的使用
1.官方文档地址vue-Scroller github地址:https://github.com/wangdahoo/vue-scrollerelement分页地址:https://element.eleme.io/#/zh-CN/component/pagination移动端上拉加载,下拉刷新,及分页是基本业务场景中常见的需求,2.vue-Scroller的使用2.0.1 npm 安装...原创 2019-05-09 17:41:05 · 6766 阅读 · 0 评论 -
在vue中使用axios请求数据 v-for渲染数据的时候结构没有出来的问题
1.问题说明在使用axios向后台请求数据时,根据后台接口返回的数据,res.data.data 返回的是一个数组对象,并且将这个数组对象赋值给了在data定义的一个空数组,打印这个空数组,是真实存在的数据 res.data.data 使用v-for循环结构的时候,数据并没有出来以上都是常规操作,但是渲染的结构并没有出来2.问题截图说明2.0.1 js代码截图 并没有什么问题2.0.2...原创 2019-04-04 17:26:14 · 7899 阅读 · 7 评论 -
vue3.0 脚手架配置
版本需求vue cli 需求node.js版本8或者更高全局安装npm install -g @vue/cliyarn global add @vue/cli如果没有安装yarn的需要安装安装地址;https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable”检测安装1.vue项目创建1.0运行vue cre...原创 2019-02-28 15:27:55 · 3077 阅读 · 0 评论 -
vue 微信支付
微信支付1.相关官方文档https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=62.给支付按钮绑定点击事件<span class="three" @click="pay()" v-if="payshow">立即支付</span>3.调起微信支付的接口 pay() { ...原创 2019-02-22 12:00:12 · 2198 阅读 · 0 评论 -
qs 的使用 vue 的favicon.ico的配置
1.说明qs解决了axios向后台发送数据的默认格式为json。2.安装npm install qs --save-dev3.全局引入 main.jsimport Qs from 'qs'Vue.prototype.Qs = Qs4.引用this.$axios.post( "接口地址", this.Qs.stringify(...原创 2019-02-11 10:23:47 · 353 阅读 · 0 评论 -
在vue中使用swiper,vue轮播图插件vue-awesome-swiper
参考官方文档:https://github.com/surmon-china/vue-awesome-swiper附上 swiper 中文网:https://www.swiper.com.cn/1.npm安装npm install vue-awesome-swiper --save2在main.js中引入import VueAwesomeSwiper from 'vue-awesome...原创 2019-02-01 14:22:19 · 2701 阅读 · 1 评论 -
vue第二篇
vue day02v-for中key的使用在使用v-for渲染列表时, 如果涉及到数据顺序变化, 那么跟随数据的一些状态(例如: 勾选状态), 默认情况下不会跟随数据的顺序改变而改变, 也是vue默认的策略: 就地复用, 好处: 可以提高效率减少DOM操作, 问题: 一旦数据的顺序发生变化了, 状态不会随着数据改变而跟随着改变, 依旧会根据索引去勾选原位置的数据key的出现就是为了告诉vue...原创 2018-11-14 19:49:50 · 155 阅读 · 0 评论 -
webpack初始化配置 (史上最详细版本)
webpack官网: https://www.webpackjs.com/注意:因为webpack一些插件总是不断更新,所以在以后的工作中建议用vue脚手架生成!,此文章的目的只是介绍一些底层的原理,文章插入了一些简单的案例,适合新手学习,欢迎阅览!1 简单介绍webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具,借助于webpack这个前端自动化构建...原创 2018-11-18 22:00:18 · 11986 阅读 · 2 评论 -
vue 使用钩子函数完成购物车小球案例
1.本文直接上代码,基础请看个人其他文档<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&原创 2018-11-15 21:58:02 · 306 阅读 · 0 评论 -
vue基础总结 钩子函数,组件,路由,过滤器,动画
vue的官网:https://cn.vuejs.org/1.基本指令{{msg}} 插值表达式v-cloak 解决插值表达式的闪烁问题v-text 渲染文本v-html 渲染html标签v-bind 属性绑定 简化 :v-on 事件绑定 简化: @v-model 双向数据绑定 一般用于表单v-for 遍历数组或者对象 key用于属性绑定的唯一...原创 2018-11-15 21:54:36 · 412 阅读 · 0 评论 -
vue的基础指令
vue的介绍vue的官网:https://cn.vuejs.org/1.定义2.MVC和MVVM的概念MVC 是后端的分层开发概念;MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel下面用一幅图来分析他们之间的关系:3.常见的指令3.1插值表达式{{msg}} <...原创 2018-11-10 15:04:39 · 169 阅读 · 0 评论