随笔分类 - vue
vue相关
摘要：官方链接： http://npm.taobao.org/package/vue-photo-preview
阅读全文
摘要：Vera Vera Vera Vue中父子组件执行的先后顺序探讨（转载） 前几天，朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题，相信很多朋友在学习的过程中也会遇到这个问题，所以我就在此提出我自己的一些小看法。 问题如下：请问下图中父子组件执行的先后顺序？ 首先，我想先谈一谈vue的生命周
阅读全文
摘要：Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法，这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script>
阅读全文
摘要：当前是vue项目，想在tool.js（工具模块）中封装一个跳转页面的方法， 上面使用router，query传参的方式实现页面跳转 然后我在vue页面中调用，此方法如: 之后报错就来了，提示：push是undefined 然后console了一下goToUrl（）方法里面的this，指向的是tool
阅读全文
摘要：之前，为了实现router跳转的每个页面的url上都带上addressCode，然后用了一下router拦截器，很好用，当然也可以专门封装一个方法来实现（跳转的页面上带有addressCode），不过还是感觉router拦截器比较省事。 router拦截器就是在路由跳转前后，做一些事情，相当于一个钩
阅读全文
摘要：在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： 直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名： immediate和handler 这样使用watch时
阅读全文
摘要：将其在vue目录中用一个js文件存起来，哪个页面需要弹窗时引入 import eduAlert from '@/js/alert.js' 在方法中就可以使用了 alertmethos(){ // eduAlert.showAlert("我很好的的哈哈",null,true); // eduAlert
阅读全文
摘要：{ path: '/Index1', name: 'Index', component: () => import ('@/components/Index.vue') }, { path: '/Index1', name: 'Index', component: () => import ('@/
阅读全文
摘要：今天发现了个很奇怪的问题，我在做一个：点击列表 使点中的列表项变色的功能，而且是多个大列表项，在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项。 解决思路，因为这些大列表项是请求到的数据v-for出来的，大列表项里的小列表项也是用大列表项里的数据v-for出来的，所以我选择在请求导数据时
阅读全文
摘要：今天主要记录 vue中命名视图的用法 先奉上官网网址：https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下，一个页面里面可能有多个组件，比如侧边栏，内容区，侧边栏是一个组件、内容区是一个组件，我们普遍会将两个组件作为子
阅读全文
摘要：vue-cli3官方网址： https://cli.vuejs.org/zh/ 由于公司开始一个新项目，用到的是vue-cli3搭建的项目，所以自己想搭建一个项目，今天搭建的项目就是一个很简单的项目，没有自己配置的项目，我的目的是想把步骤记录下来，一是当做自己的一个笔记，而是，对初学者来说，看到这些
阅读全文
摘要：安装vue-scroller npm i vue-scroller -D 在main.js中： import VueScroller from 'vue-scroller' Vue.use(VueScroller) 主要是两个方法：:on-refresh="refresh"下拉刷新回调 :on-in
阅读全文
摘要：1、router.js配置 需要在路径后定义上要传的属性名 --》 /：属性名（query方式不需要） { path: '/CreateProgress/:name1', name: 'CreateProgress', component:CreateProgress } 2、传参 与query不同
阅读全文
摘要：router.js内的路由配置 { path: '/CreateProgress', name: 'CreateProgress', component:CreateProgress } 传参（query方式 在地址栏可以看到） <router-link :to="{path:'CreateProg
阅读全文
摘要：在index.html中 <style> @media all and (min-width: 0px) { html{font-size: 20px;}/* 12*4.6 */ } @media all and (min-width: 640px) { html{font-size: 50px;}
阅读全文
摘要：1，pagination的配置 pagination: { el: '.swiper-paginationfull', // type:'bullets', // bulletElement : 'span',//设置分页器小圆点标签，默认为span标签 // clickable:true, //
阅读全文
摘要：haha(){ var that=this; that.$refs.mySwiper.swiper.slideTo(1, 1000, false); } //以上代码是 获取ref值为myswiper的实例swiper，之后跳转到第二页，时间为1s，为false时不触发onSlideChange回调
阅读全文
摘要：swiperOption: {//swiper的配置项 notNextTick: true,//想获得swiper实例对象，这个必须为true direction: 'vertical', // grabCursor: true,//鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
阅读全文
摘要：1、先安装less-loader npm install less less-loader --save 2、再安装css-loader npm install css-loader --save 3、安装上面两个之后、再安装vue-awesome-swiper（必须在前两个安装过之后安装） npm
阅读全文
摘要：let routeData = this.$router.resolve({ name: "detail", query: {goodsId:'1111'} }); window.open(routeData.href, '_blank');
阅读全文
浙公网安备 33010602011771号