<template> <div>简单说就是里面只能有一个跟的div button1.vue <template> <div> <Button>Default</Button> <Button type="primary">Primary</Button> <Button type="dashed">Dashed</Button> <Butto

前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用Vue开发一个实时性的时间转换指令? 接下来正文从这开始~ 如上图所示(我是截取的某技术社区首页的部分页面),大家看到用红色边框勾选中的时间文字了吧.很多网站发布动态的时候,都会有一个相对本机时间转换后的相对时间.那你知道这个功能实现的背后原理是什么吗?如果有兴趣的,请备好瓜子,茶水,继续往下读.

原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._compile() t

原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.可以将轮播图看成两个,如图所示: 写好每个class的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $sWidth: $width - $bWidth; // 小图片宽度 $sHeigh

Vue实现一个markdown编辑器 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大而全的项目,倒不如实现一个 简单的,易于在源码上修改的项目,核心功能都有的,以供修改使用 本文的源码地址如下 https://github.com/jiulu313/HelloMarkDown 喜欢的朋友可以帮忙star一下,欢迎交流学习 先看一下本项目的效果图(图片经过压缩) 本文的目的就是实现一

本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和资源分享. 写在前面 每一篇文章都希望您有所收获,每一篇文章都希望您能静下心来浏览.阅读.每一篇文章都是作者精心打磨的作品. 如果您觉得杨戬这个小白还有点东西的话,杨戬希望正在看文章的您可以帮忙点亮那个点赞的按钮(效果更加),对于杨戬这个暖男来说,真的真的非常重要,这将是我持续写作的动力. 前言 写

昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有router Vue.config.productionTip = false 关闭生产模式下给出的提示   然后下面这些是做什么的..   new Vue({ el: '#app', router, template: '<App/>', components: { App } }) 这边我找到了一些v

我上一篇关于vue的文章和这一篇时间隔了有点久了.最近终于写完了. 因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西.结合最近在项目中学到的经验和我的一点创意. 首先介绍下这是个什么! H5直播平台! 不是一个标题,我已经开发完了. 接着这里是登录注册的流程图 这边微信登录,因为没有我个人没有权限开通服务号,所以没有测试.用的还是16年我上个公司的代码. 验证码我用的是aliyun的短信平台,大部分短信平台都有个需要企业资质的东西. 因为这是个个人站,只有腾讯云和阿里云有个人的 简单

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式.使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用:也可以整个用它全家桶开发,当Angular用:还可以用它的视图,搭配你自己设计的整个下层用.你可以在底层数据逻辑的地方用OO和设计模式的那套理念.也可以函数式,都可以. 它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已.   你不必一开始就用Vue所有的全家桶

div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800px;           height:500px;           border:2px solid #000;           position:relative; }  .child {             width:200px;             height:200p

知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: 核心代码说明(样式代码可自行修改,详细代码请参照源码): <div v-for="(v,i) in list"> <div class="form-group m-form__group row" style="padding-top: 1

在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome #identifier-pannel { bottom: 345px; margin-left: 512px; position: fixed; _position: absolute; left: 50%; width: 110px; _top: expression(eval(document.documentElement.scrollTop || document.body.scrollTop) +eval

1.easyui的树的根节点一般是几个平级的,怎样获取这些父节点的id? 可以将获取到的平级根节点放在一个数组中 var roots=[]; roots=$("#tree1").tree("getRoots",node.target); 这样得到的roots是一个包含了所有平级的根节点的数组 然后就可以遍历这个数组 for(var i=0;i<roots.length;i++){ roots[i].id } 2.怎样选择性地展示easyui树的一个根节点? 思

效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡 新建 vue-water-easy.vue  组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(items,clos) in list" :key="clos" :style="waterStyle"

效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-certify{ /*上下左右居中*/ height: 100%; width: 100%; .centerPosition { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transform:

需求从helloworld.vue页面跳到good.vue页面 1.helloworld.vue页面代码 <template> <div class="hello"> 我是小可爱 <router-link :to="{ path: '/cute'}" replace>点我啊,傻</router-link> </div> </template> <script> import Good

vue是一个渐进式的框架,我是这么理解的 原文地址 时间:2017-10-26 10:37来源:未知 作者:admin 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 使用vue,你 可以在原有 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式.使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQu

记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框选实现 div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div.[注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位.不然,鼠标框选区域和被框选区域很难保持

build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: '../../static', assetsPublicPath: './', config/index.js 问题是这样改完了,根index.html路径也不对,最

实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$data 访问. var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data// => true vm.$el === document.getElementById('example'

概述 之前写vue的时候,对于下拉框,我是通过在组件内设置标记来控制是否弹出的,但是这样有一个问题,就是点击组件外部的时候,怎么也控制不了下拉框的关闭,用户体验非常差. 当时想到的解决方法是:给根实例创建一个标记来控制,然后一级一级的把这个标记传进来.但是这样每次配置都要改根组件,非常不灵活. 最近看museUI库,发现它的下拉框Select实现的非常灵活,点击组件外也能控制下拉框关闭,于是想探究一番,借此机会也深入学习一下vue. museUI源码 首先去看Select的源码: directi