1. 安装VueHelper插件2. 寻找 vue.json 按顺序点击vscode的： 文件首选项用户代码片段接着搜索框中输入 vue， 回车3. 填写模板内容 直接复制一下内容到 vue.json {"Print to console": {"prefix": "vue","body": ["<template>"," <div>\n"," </div>","</template>\n","<script>"," export default {"," name: ,"," data () {"," return {\n"," }"," },"," components: {\n"," }"," }","</script>\n","<style scoped>\n","...
前言 最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的...
先给大家介绍下VueJS取得URL参数 vuejs取得URL中参数的值 地址：http://localhost:3333/#/index?id=001结果：001console.log(this.$route.query.id)PS：下面给大家介绍下vue自定义表单生成器可根据json参数动态生成表单效果 介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。 文档...
先给大家介绍下vue中filters 传入两个参数 / 使用两个filters .vue 传入两个参数<van-col>{{第一个参数|formatVisitTime(第二个参数)}}</van-col>使用两个filters <van-tag plain :color="item.CreateTime（参数）|formatVisitDate（filters方法）|formatVisitDateColor（filters方法）">{{item.CreateTime|formatVisitDate}}</van-tag>format.js export const formatVisitTime = (beginTime, finishTime) => {if (!beginTime) {re...
前言几周前，我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。 通常，在将导航构建到应用程序中时，您会发现需要将数据从一个页面传递到另一个页面。（不通顺）例如，您遵循 master-detail 模式，其中您有一个数据列表，通过更深入地挖掘可以获得关于列表中特定项的更多信息。 我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据。 如果你还没有读过我之前的教程或者不...
Cookie详解Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制。从实现上说，Cookie是存储在客户端上的一小段数据，浏览器（即客户端）通过HTTP协议和服务器端进行Cookie交互。Cooke独立于语言存在，严格地说，Cookie并不是由PHP、Java等语言实现的，而是由这些语言对Cookie进行间接操作，即发送HTTP指令，浏览器收到指令便操作Cookie并返回给服务器。因此，Cookie是由浏览器实现和管理的。举例说，PHP并没有真正设置过Cooki...
前言 近期产品小哥哥给我提了一个新需求，在一个页面的滚动区中添加一组锚点定位按钮，点击按钮将对应的元素显示在页面的可视区中。当按钮组超出页面可视区的时候将其固定在滚动区域的头部，当滚动区滚动时，高亮距离滚动区顶部最近的元素所匹配的锚点按钮。拆分功能点 现在我们已经明确需求了，接下来我们总结一下这个需求有哪些功能点： 按钮组要有吸顶效果点击按钮要有锚点定位功能滚动内容区需要找到对应的按钮并高亮吸顶组件 ...
一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？ 没办法啊，资本主义的XX嘴脸啊 来吧，技术评审我俩把接口格式对一把，你先开发，我这边结束了我跟上，再联调 MMP，那又增加了我的工作量啊，每次我都要自己先把数据放在一个配置文件中，引入使用，然后对接的 时候还得删除无用代码，好气 你自己Mock接口啊，就向我们后端经常用PostMan一样模拟请求啊 Mock？？我去查查看 二：Mock的概念1：Mock的...
这里以网易云音乐作为示例，效果图：我们先一层一层写导航先设计第一层1.设计导航页面样式第一个导航页面为Discover Discover.vue： <!-- --> <template><div>发现</div> </template><script> export default {name: "discover",data() {return {};} }; </script> <style scoped> </style>第二个导航页面为Mymusic其余代码一样，注意要把name改为相应路由 name: "mymusic"2.配置路由 index.js： import DisCover from @/components...
收集日常开发中常用到的一些工具方法, 包含 vue 的公用过滤器、公用指令等 (PS: 懒人养成记) 公用自定义过滤器 import Vue from vue import moment from moment/*** @filter dateFormat 时间格式化* @param {String, Date} value 可被 new Date 解析的字符串* @param {String} formatStr moment 的 format 字符串* 使用方法 {{ 2019-1-1 | dateFormat() }}*/ Vue.filter(dateFormat, (value, formatStr) => {return moment(value)....
1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。 语法： navigator.geolocation.getCurrentPosition(success, error, options)参数： success: 成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。error: 获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项。options:一个可选的PositionOptions 对象,包含以下3个参数。enableHighAccuracy 是一个Boolean...
Vuex（2.3.0+）可以用store.registerModule方法在进入路由时进行注册，离开路由时候销毁 actions, mutations, getters, state，在一定范围内相同名称不会被覆写 例子index.js传this 的写法module.exports = {install(_this) {_this.$store.registerModule([abc], {namespaced: true,state: {rightTest: 999},actions: {setTest: ({commit}, val) => {commit(putTest, val)}},mutations: {putTest: (state, val) => {state.rightTes...
前言 前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易.需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方...
面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。 <template><div class="example-container"><el-breadcrumb separator="/"><el-breadcrumb-itemv-for="(item,index) ...
使用vue编写的分页器组件，支持输入页码跳转，效果如图： 1、点击前五页：2、点击中间部分页面3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效组件调用： //html调用 参数:pageSize(总页数);pageNo(当前页) <pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>//组件引入 import pager from ../../component/pager/pager.vue//组件调用声明 components:{ pager}//参数 data(){return {pageSize:...