vue2.0全家桶
vue经验总结
落花流雨
这个作者很懒,什么都没留下…
展开
-
vue项目经验积累
vue功能:数组、对象深拷贝// 数组深拷贝var array=[1,2,453,12,432]var newArray=JSON.parse(JSON.stringify(vs))newArray.push(0)console.log(array) //此时array值不会变化,两个值是独立存在的*********************************************************************// 对象深拷贝let origin = { na原创 2020-12-20 15:33:23 · 2374 阅读 · 1 评论 -
Vue Router 的params和query传参的使用和区别
Vue Router 的params和query传参的使用和区别知识补充:router和router和router和route的区别$router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象//操作 路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//读取 路由参数接收this.name =转载 2020-06-29 11:36:02 · 260 阅读 · 1 评论 -
vue项目之功能模块
其他功能模块:拓展内容:webpack是不是有关于配置不打包文件路径海报合成相关资料base64 转blobbase64图片的优点图片为什么要转化为base64格式Vue.js结合Canvas制作二维码和图片的合成(qrcanvas + html2canvas)vue2.0 webApp保存图片到相册mui扩展插件mui.showLoading加载框vue开发APP,结合vue-scroller实现上拉加载更多,下拉刷新数据的功能vue 实现发送短信验证码后按钮的倒计时及禁用功能复原创 2020-05-15 00:24:19 · 1188 阅读 · 0 评论 -
vuex基础
Vuex基础Vuex概述Vuex基本使用使用Vuex完成todo案例小范围内的数据共享组件之间共享数据的方式父向子传值:v-bind 属性绑定子向父传值:v-on 事件绑定兄弟组件之间共享数据: EventBus数据接收方通过 on 自定义接收事件 接收数据的那个组件数据发送方通过 emit 发送数据 发送数据的那个组件以上只适合,如果需要大范围的进行数据共享使用vuexVuex概述概念:Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的原创 2020-05-14 23:49:43 · 106 阅读 · 0 评论 -
计算属性computed
vue官方文档:计算属性计算属性和方法的区别第 1 章:计算属性的基本用法<template> <div class="computed"> <p>{{ number }}</p> <p>double: {{ double1 }}</p> <input type="text" v-model="double2" /> </div></template><原创 2021-02-24 22:03:09 · 159 阅读 · 0 评论 -
watch 侦听器
vue官方文档-watch讲解Vue中计算属性和watch的区别侦听字符串 和 侦听对象的属性 用法的区别第 1 章:watch 侦听器 基本用法侦听字符串 和 侦听对象的属性 用法的区别<template> <div class="watch"> <input type="text" v-model="name" /> <p>{{ name }}</p> <input type="text" v-mod原创 2021-02-24 21:40:55 · 698 阅读 · 0 评论 -
watch 侦听器
vue官方文档-watch讲解侦听字符串 和 侦听对象的属性 的区别第 1 章:watch 侦听器 基本用法<template> <div class="watch"> <input type="text" v-model="name" /> <p>{{ name }}</p> <input type="text" v-model="info.age" /> <p>{{ info原创 2021-02-24 21:16:17 · 145 阅读 · 0 评论 -
【H5】解决ios禁止缩放失效的方法(亲测有效)
【H5】解决ios禁止缩放失效的方法 <script> window.onload=function () { document.addEventListener('touchstart',function (event) { if(event.touches.length>1){ event.preventDefault(); } }); var la转载 2021-01-14 17:09:01 · 841 阅读 · 5 评论 -
基于vue实现可拖动弹框
基于vue实现可拖动弹框el-dialog弹框拖拽在 utils 中新建 directives.js 文件import Vue from 'vue'// 自定义元素实现弹框拖拽[重点]Vue.directive('draw', { inserted: function (el, binding, vNode) { el.setAttribute('style', 'position: fixed; z-index: 9999') }, bind: function (el转载 2021-01-13 16:17:26 · 3774 阅读 · 4 评论 -
vue父子兄弟之间的组件通信
vue组件通信的方式父子组件通信父组件:father.vue<template> <div class="father"> <h1>父组件</h1> <!-- 父组件 接收 子组件的数据 --> <p :style="{ fontSize: fontsize + 'px', color: setColor }"> 改变颜色和字体大小 </p> <!-原创 2021-01-02 22:51:32 · 352 阅读 · 0 评论 -
基于swiper和vue实现:点击和滑动页面实现tab切换
点击和滑动页面实现tab切换components / tabItem下面有 swiper.vue nav.vue one.vue two.vue …router.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', redirect: '/原创 2020-10-27 20:42:56 · 3415 阅读 · 1 评论 -
基于vue手动实现折叠面板(展开一项,其他项收起)
<template> <div class="report"> <ul class="years"> <li class="years_item" v-for="(item, index) in menuList" :key="item.name"> <div class="title" @click="showToggle(item, index)"> <span>{{ it转载 2020-10-22 20:08:21 · 4915 阅读 · 0 评论 -
自定义加载loading效果(带图片)
加载中图片,底色为白色(看不到)使用方法this.tool.showLoading('加载中', this)this.tool.showLoading('合成中', this)this.tool.hideLoading()引用文件在App.vue中<style scoped>@import './common.css';</style>在main.js中import tools from './tools'Vue.prototype.tool原创 2020-09-13 11:03:28 · 2136 阅读 · 0 评论 -
自定义加载中的loading组件
自定义加载中的loading组件components / loading.vue页面<template> <div class="loading-container" v-if="showWrap" :class="showContent ?'fadein':'fadeout'"> <div class="loading-mask"></div> <div class="loading-content"> <原创 2020-09-04 14:29:18 · 1061 阅读 · 0 评论 -
功能:登录和退出(表单重置和预验证、路由导航守卫、路由重定向)
3.登录/退出功能3.1登录概述3.1-1.登录业务流程①在登录页面输入用户名和密码②调用后台接口进行验证③通过验证之后,根据后台的响应状态跳转到项目主页3.1-2.登录业务的相关技术点http 是无状态的(需要记录用户的登录状态)通过 cookie 在客户端记录状态通过 session 在服务器端记录状态通过 token 方式维持状态3.2登录–token原理分析1.如果前端和后台接口之间不存在跨域问题,推荐使用Cookie或者session记录登录状态。2.如原创 2020-08-01 15:43:33 · 1375 阅读 · 0 评论 -
js汇编总结
js 基础篇项目功能1.本地存储将json格式的字符串转换为数组或者对象:JSON.parse(json字符串)将字面量对象或者数组转换为json格式的字符串:JSON.stringify(对象或者数组)存数据:本地存储只能存储字符串localStorage.setItem(‘key’, JSON.stringify(对象或者数组));取数据:localStorage.getItem(‘key’) ;keyArr = JSON.parse(localStorage.getItem(原创 2020-07-26 01:04:40 · 1621 阅读 · 0 评论 -
vue-router的基本使用
vue-routervue-router的基本使用<!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-Compatible" content="ie=edge原创 2020-07-26 00:59:23 · 208 阅读 · 0 评论 -
vue组件化开发:调试工具、组件通信、插槽
Vue调试工具调试工具安装官方文档:https://github.com/vuejs/vue-devtools克隆仓库安装依赖包构建打开Chrome扩展页面,选中开发者模式加载已解压的扩展,选择:shells / chromevue组件化开发组件化开发核心思想:把不同的功能封装到不同的组件中,然后组件通过组合的方式形成完整意义上的应用。组件注册注意事项组件参数的data值必须是函数,return一个对象。原因:使用函数会形成一个闭包的环境,这样就保证每一个组件都拥有原创 2020-07-26 00:43:13 · 244 阅读 · 0 评论 -
vue常用特性:指令、计算属性、侦听器、过滤器
vue常用特性:表单的基本操作:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-chi原创 2020-07-25 21:41:31 · 363 阅读 · 0 评论 -
Vue基础语法
Vue基础语法v-cloak指令的用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> [v-cloak]{ display: none; } </style></head><body&原创 2020-07-19 23:55:41 · 164 阅读 · 0 评论 -
vue功能:样式scoped的作用 和 深度选择器
vue功能:样式scoped的作用scoped 会给当前组件模板中的所有的元素都添加一个随机的属性scoped 会给当前组件中所有的样式,添加一个对应的属性选择器<style lang="scss" scoped></style>vue深度选择器:官方文档:https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors原理:样式前面使用深度选择器后,就不会在样式前面添加 随机的属性深度选择器原创 2020-07-14 23:30:24 · 216 阅读 · 0 评论 -
vue功能:过滤器 filter
vue功能:过滤器 filter声明:本文章仅是用于自我记录学习。参考下面文档:https://blog.csdn.net/qq_42778001/article/details/95613371https://blog.csdn.net/sinat_17775997/article/details/56495373https://blog.csdn.net/weiweismile123/article/details/70226319https://blog.csdn.net/qappleh/a原创 2020-07-14 13:19:17 · 310 阅读 · 0 评论 -
优化 iconfont字体图标用法 和 使用 sync修饰符(优化:父子组件通信)
vue功能:优化iconfont字体图标方法:第一步:将选择好的字体图标,添加项目。第二步:然后点击更多操作,选择编辑项目第三步:修改FontClass/Symbol前缀 和 Font Family,统一修改为:vh-icon-第四步:将字体图标文件,复制粘贴到项目iconfont.css将初始的iconfont类改为了[class*=‘vh-icon-’],当类名中有one-icon时使用,如下/* 其中 class*= 表示包含[class*='vh-icon-']:表示只要类别包原创 2020-07-12 15:16:22 · 167 阅读 · 0 评论 -
vue的省市区选择 vue-area-linkage
vue的省市区选择 vue-area-linkage使用文档地址:https://www.npmjs.com/package/vue-area-linkage安装依赖包:npm i --save vue-area-linkage area-data在main.js里调用import VueAreaLinkage from 'vue-area-linkage'// 全局引用样式import 'vue-area-linkage/dist/index.css'Vue.use(VueArea转载 2020-07-10 10:47:59 · 1988 阅读 · 1 评论 -
vue刻度尺组件
vue刻度尺组件刻度尺:参考文档:https://python.ctolib.com/328921371-ruler.htmlnpm install cs-ruler// 在 main.js 中引入import CsRuler from 'cs-ruler'Vue.use(CsRuler)// 在.vue文件中使用<cs-ruler @post-NumValue="rulerNum" :NowNum='100' :maxNum='2000' :minNum='0'>&l转载 2020-07-09 09:32:23 · 8129 阅读 · 7 评论 -
上拉加载更多和下拉刷新,功能分析和实现方法
上拉加载更多功能分析:上拉加载下一页用户上滑页面 滚动条触底 开始加载下一页数据判断还有没有下一页数据获取到总页数 = Math.ceil(数据总条数 / 页容量 pagesize)`获取到当前的页码 pagenum判断当前的页码是否大于等于总页数,如果是:表示 没有下一页数据假如没有下一页数据,弹出提示假如还有下一页数据,加载下一页数据当前的页码 ++重新发送请求数据请求回来(要对data中的数组进行拼接,而不是全部替换!!!)// 上拉加载更多get原创 2020-06-14 21:47:22 · 816 阅读 · 0 评论 -
Vue网页版-基础篇
Vue网页版–基础篇:疑难点:vue组件的属性使用和不使用冒号的区别:加冒号的,说明后面的是一个变量或者表达式;没加冒号的后面就是对应的字符串字面量!<button :disable="true">打开</button> 输出:true 或者 false 值是变量或者Boolean类型<button disable="true">打开</button> 输出:true 值是String类型子组件标签的位置:将原创 2020-05-15 00:28:44 · 1585 阅读 · 0 评论 -
vue项目搭建方法
通过vue脚手架 vue-cli搭建项目1. 基于交互式命令行的方式(vue-cli)重要提示:vue/cli3搭建的新项目,没有vue-cli2 的build和config文件夹所以有什么配置可以在根目录新建一个vue.config.js写上配置项这里是修改接口和关闭eslint检查module.exports = { lintOnSave: false, devServer: { port: 8081 }}反向代理:vue.config.jsmodu原创 2020-05-15 00:14:24 · 198 阅读 · 0 评论 -
vue项目之axios
配置axios发起登录请求在main.js中:配置axios导入axios包配置请求的根路径把axios包挂载到vue原型对象上:这样每一个vue组件都可以通过this直接访问到$http,从而去发起ajax请求// 导入axios包import axios from 'axios'// 配置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'Vue.prototype.$http = axio原创 2020-05-15 00:07:19 · 546 阅读 · 0 评论 -
vue-router
路由基础篇:vue-router1. 编程式导航this.$router.push('/home');this.$router.push({ name: "home" });this.$router.push({ path: "mine/mineFabu" });// 路由导航接收路由传递的参数this.$router.push({ name: 'Product_detail',params:{pid:pid}});var productId = this.$route.params.pi原创 2020-05-15 00:02:57 · 120 阅读 · 0 评论 -
vue项目之CSS样式
vue项目中CSS样式初始化页面样式注意:element-UI中提供的组件,组件名称就是类名.el-header{} 页面单独的样式,从外部引入css <style scoped> @import '../assets/css/member.css'; </style>初始化默认标签样式在public文件夹下面:新建public/css/reset.css然后在index.html引入reset.css<link rel="s原创 2020-05-14 23:56:51 · 3150 阅读 · 0 评论