一.时间格式 1.安装Moment模块 npm i moment -S2.main.js中设置全局过滤器 import moment from 'moment' Vue.filter('ctime',function(data,timeset='YYYY-MM-DD HH-mm-ss'){ return moment(data(不传数值即为现在时间)).format(timeset) })3.过滤器使用设置 <span>发表时间:{{item.add_time | ctime('YYYY-MM…

a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'></login> 父组件向自定义的子组件中传值var myvue = new Vue({ el:"#myvue", data:{ flag:'reg', msg:'这是父组件' }, methods:{ }, components:{ login:{ template:'&…

一.故事背景 现在很多人都喜欢玩文艺,特别是我身边的UI们,拍照一分钟修图半小时.就是为了能够在朋友圈显得逼格高,不过的确是挺好看的,修图的软件太多了就不多说了,而且一般都没有水印啥的.相比较短视频有一个比较有逼格的编辑工具「Vue」个人已经用了很长时间了,拍出来的视频借助强大滤镜真的很好看,显得逼格也高,更重要的是他有我最喜欢的功能就是可以添加视频背景音乐,选择自己喜欢的音乐,然后还可以编辑这段背景音乐,反正我个人觉的这个是我最喜欢用的产品了.但是好用的东西必定有它不好的地方,因为他真的很强大…

vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请求"一说的. 前端路由是找到地址匹配的一个组件或者对象将其渲染出来.改变浏览器地址不向服务器发送请求有两种方法, 一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航:二是使用HTML5的window.history功能,使用URL的hash来模拟一个完整的URL. vue-router…

1.引用mui.js无效,top-bar划动,numbox点击无效等问题 解决办法: -main.js中import mui from './lib/mui/js/mui.js' Vue.prototype.$mui = mui -vue组件中 mounted(){ this.$mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006 }); },2.解决上…

vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Please pick a preset: (Use arrow keys)> default (babel, eslint) Manually select features移动上下键选择“Manually select features”:表示手动选择创建项目的特性. 显示如下: ? Check the…

1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.state.token) { next() } else { next({name: 'log',query: {backUrl: to.fullPath}}) } }else( next() ) }) 2.路由设置 { path: '/course',component: Course,meta: { r…

Vue-routerrouter-link active-class类型: string默认值: "router-link-active"设置 链接激活时使用的 CSS 类名.默认值可以通过路由的构造选项 linkActiveClass 来全局配置.路由传参:a.query方式 <router-link to='/login?id=10&name=zs' >登录</router-link> var login = {template:'<h2>…

Vue的生命周期 beforeCreate---created---beforeMount---mounted---(beforeupdate---updated :数据有更新时才会执行)---befordestory---destory有些函数需要加载即执行或其他需求时可以调用上述方法如:created(){ this.getList()},…

#全局自定义指令1.使用Vue.directive()定义全局的指令 v-focus2.参数1 指令的名称,在定义的时候,指令的名称前面不需要加v-前缀3.但是在调用的时候必须在指令名称前 加上v-前缀进行调用4.参数2是一个对象,这个对象身上,有一些指令相关的函数,这些函数在特定阶段执行相关操作例1:获取DOM聚焦Vue.directive('focus',{ bind:function(el){ 1.每当指令绑定到元素的时候,就立即执行这个bind函数,只执行一次 2.每个函数中,第一个参数…

vue.config.keyCodes.f2 = 113 设置完成后就可以绑定f2的按键操作@keyup.f2="add" 自带的有enter esc delete 空格 上下左右键…

#全局过滤器要写在var vue之前<td>{{item.time | ctime }}</td>Vue.filter('ctime'(过滤器名),function(data(过滤器前面的数据),timeset(过滤器传入的方法,可以默认)=''){ var dt = new Date(data) var y = dt.getFullYear() var m = dt.getMonth() +1 var d = dt.getDate() var h = dt.getHours()…

1.button发起点击请求<mt-button type='primary' size='large' plain @click="topdcmt(id)">商品评论</mt-button>2.methods定义方法topdcmt(id){this.$router.push({ name: 'pdcmt', params: { userId: id } })}3.router.js定义导航路径import Pdcmt from './components/pr…

1.安装axiosnpm i axios -S2.main.js中设置import axios from 'axios'Vue.prototype.$axios = axiosPS:这里有个小坑,axios一定要小写,不知道为什么,大写会出错3.基本使用created(){this.showlunbo()},methods:{showlunbo(){ this.$axios.request({url:'http://www.liulongbin.top:3005/api/getlunbo',me…

应用于监视路由地址改变,如有新地址(即路由地址改变)即执行自定义方法 methods: { itemShow() { this.$axios.get('item/item/'+this.id+'?token='+this.$store.state.token).then(ret => { console.log(ret) }) }, }, watch: { '$route.path'(newVal,oldVal) { if (newVal) { this.itemShow() } } },…

1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件配置相关内容(自行百度,配置APP图标等选项) 5.点击软件顶上的发行--原生APP-云打包进行打包 6.打包后下载安装即可 ---------------------------------------------------------------------------------------…

1.构造函数 大写开头的,能被NEW一个新实例,实例即执行回调函数 异步返回数据.then指定回调函数的时候,成功的回调函数必须传,失败的回调可以不传 var fs = require('fs') function getfileBypath(fpath){ var p = new Promise((resolve,reject)=>{ fs.readFile(fpath,'utf-8',(err,datastr)=>{ if (err) return reject(err) resolve(…

nrm使用只是单纯的提供了几个常用的下载包的URL地址,并能让我们在这几个地址之间很方便的切换,但是我们每次装包的时候,使用的装包工具都是npmnpm i nrm -g 安装nrmnrm ls 查看镜像地址nrm use cnpm 更换镜像地址…

v-cloak:v-text:插值表达式v-html:v-bind:提供用于绑定属性的指令,可以简写为:,可以写合法的JS表达式v-on:事件绑定,可以简写为@,v-model 只能应用在表单元素中 input select checkboxv-for item in (数组,含字典数组,字典,数字) (v,k)循环时,V在前,K在后 循环的时候key必须是num或str 2.2以后for循环必须有key,保证数据标识的唯一性 v-for='i in list' :key='i.id'v-if…

修饰符stop阻止冒泡 --> <!-- <div id="myvue" @click="divc" class="d1"> <input type="button" name="" id="" value="大按钮" @click.stop="btn"/> </div> --> <!--…

问题: v-html生成的图片调整大小属性没用<div class="content" v-html="pdinfo.content"></div><style lang="scss" scoped>.pddescribe-row{ margin: 0 5px; h3{ font-size: 16px; text-align: center; } img{ width: 100%; height: 100%;…

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言 尚妆大前端团队使用 weex 进行三端统一开发有一段时间了,截止本文发表「达人店」APP大部分页面都已经用 weex 进行了重构,在此期间也积累了一些基础组件和业务组件. 之前维护组件的方式是在达人店项目的工程内维护一个 components 文件夹,随日常开发迭代,并行需求与开发人员的增多,这种维护方式也暴露出一些问题. 1.开发人员可以随意跟随需求开发修改 components 内的组件,破坏约定好的规范,或埋入 bug…

先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的年夜饭. 说吧,人家在上班,我在家里过年,那肯定就不同步了. 不同步会发生什么? 拖拽组件 大概三四个月以前,我写了一篇<「实战」React实现的拖拽组件>,只不过,这个组件比较基础,仅仅支持电脑端的使用,而且不能支持拖拽排序,显然不是很符合要求. 也尝试找了几款组件,想改吧改吧就上了,但是一些组…

一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. Vue 的异步组件 webpack代码分割 建议首先熟读这两个知识点,会更容易理解懒加载的原理.本文的源码地址在-->lazyLoad,如果对你有帮助,欢迎star(・ε・●) 二.实战 话不多说,我们来一步步实践一下路由懒加…

三年多前Runner团队在德国汉堡的骇客松上第一次发布了Sketch插件Runner的beta版本.从那以后,这个团队的目标一直很清晰: 创造一个加速设计工作流的工具. 他们只给Runner添加真正能帮设计师工作提速的功能,而非来者不拒.今天,Runner团队发布了史上最大一次版本更新:Runner Pro. 相关参数 依赖工具:Sketch 插件官网:Runner Pro → The Essential Sketch Plugin 插件试用:Download Runner Pro → The…

从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低学历的人来说,自学编程其实不是件容易的事情,不过庆幸的是自己坚持下来了. 目前工作还算不错,收入在目前所在的城市不算高,不算低,生活也还过得去,继续加油努力,也希望自己在今后更上一层. 从 16 年下半年开始,我真正接触前端,到现在 2 年多的时间.开始之初,我没有任何的语言基础,完全从零的小白开始…

「MoreThanJava」 宣扬的是 「学习,不止 CODE」. 如果觉得 「不错」 的朋友,欢迎 「关注 + 留言 + 分享」,文末有完整的获取链接,您的支持是我前进的最大的动力! Hi~ 这里是 我没有三颗心脏,一个兴趣爱好广泛的 96 年 自由技术人. 都说九月十月是跳槽的高峰期 (也有金九银十的说法),所以 近期 计划出一些 面试求职 相关的文章,这里是系列的第二篇「高质量撰写简历指南」,手把手地说明了如何来编写一个高质量的简历,也算是学习分享,真心的希望对大家有所帮助,如果 觉得不错…

Cloud Insight 此前已然支持 Linux 操作系统,支持20多中数据库中间件等组件,多种操作,多种搭配,服务器监控玩的其乐无穷啊!但想想还有许多 Windows 的小伙伴没有体验过,所以在程序员哥哥的努力加班加点的赶工下,我们隆重推出了监控 Windows 系统的功能. 安装方法 在 OneAPM Ci 官网注册,登录,进入 Ci 首页 选择合适的版本(32/64),下载探针,点击安装 或者下载探针,在 cmd.exe 里面执行命令行进行安装 是不是简单的让人无法相信,只要这样简单的…

Spring Cloud 是一个基于 Spring Boot 实现的微服务框架,它包含了实现微服务架构所需的各种组件. 注:Spring Boot 简单理解就是简化 Spring 项目的搭建.配置.组合的框架.因为与构建微服务本身没有直接关系,所以本文不对 Spring Boot 进行展开.另外本文有一些例子涉及到 Spring 和 Spring Boot,建议先了解一下 Spring 和 Spring Boot 再阅读本文.本文的阅读对象主要是没有接触过服务架构,想对其有一个宏观的了解的同学.…

原文:https://webfe.kujiale.com/spring-could-heart/ Spring Cloud 是一个基于 Spring Boot 实现的微服务框架,它包含了实现微服务架构所需的各种组件. 注:Spring Boot 简单理解就是简化 Spring 项目的搭建.配置.组合的框架.因为与构建微服务本身没有直接关系,所以本文不对 Spring Boot 进行展开.另外本文有一些例子涉及到 Spring 和 Spring Boot,建议先了解一下 Spring 和 Spri…