前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：//www.gxlcms.com/article/135719.htm 首先下载引入cropper js， npm install cropper js --save在需要的页面引入：import Cropper from "cropper js" html的代码如下： <template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img id="image" :src="url" alt=...
1、前戏吧 先看看前两篇文章： 父组件传给子组件 子组件传给父组件 看图 看图 看图！！！ 个人理解： 这明显是生活中弟弟打电话哥哥一样，双方都需要手机，需要信号发射塔。 弟弟 => A组件哥哥 => B组件弟弟的手机 => $emit发送数据哥哥的手机 => $on监听并接收数据信号发射塔 => 中间事件线App.vue => 不用说都知道是地球2、 代码 2.1、在src/asstes下新建中间事件线ligature .js （注意后缀.js） import Vue from Vue export d...
在大多数网站中，实现登录注册都是结合本地存储cookie、localStorage和请求时验证token等技术。而对于某些功能页面，会尝试获取本地存储中的token进行判断，存在则可进入，否则跳到登录页或弹出登录框。 而在vue单页中，我们可以通过监控route对象，从中匹配信息去决定是否验证token，然后定义后续行为。 具体实现代码如下： 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from vue ...
1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by="$index"来实现。 2、不使用track-by="$index"的数组插入，数组不支持重复数据的插入 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() { vm = new Vue({ el: #app, data: { arrMsg: [apple, orage, pear] }, methods: { add: function(...
最近一直在撸一个给大学生新生用的产品，在撸的时候有时候会发现自己力不从心，是不是我的能力下降，是不是我该放弃我的最热爱的事业了？这对我的心灵造成了巨大的伤害，所以我决定向苍老师起誓一定练好我这双手——好好写代码（想多的同学赶紧去面壁5秒钟再过来往下看）～～～ 我做的这个产品是课堂在线编程教学工具，由于涉及到商业问题，这里就不能和大家分享了，但是我可以把里面我认为很牛（zhuang）X（bi）的技术和大家分享分...
案例知识点： 1.vue.js基础知识 2.HTML5 本地存储localstorage store.js代码 const STORAGE_KEY = todos-vue.js export default{fetch(){return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || [])},save(items){window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));} }App.vue代码 <template><div id="app"><h1 v-text="title"></h1><input v-model="newItem" v-on:keyup.enter="addNew"/><ul><li v-for="...
整理文档，搜刮出一个vue 计时器组件的代码，稍微整理精简一下做下分享。<template><div><span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal">{{countString}}</span></div> </template> <script> export default {data() {return {isStart: false,globalTimer: null,//获取setInterval对象值countString: 0秒, //用来显示时间day: 0,hour: 0,minute: 0,second: 0,millisecond: 0,countVal: this.default...
左滑删除在移动端很常见。下面我们一起来封装一下这个简单的小组件。我们想要是： 当滑块没有超过删除按钮的一半时自动回到起点位置。滑动距离超过一半滑动到最大值（删除按钮宽度）尽量精简代码效果如下：在开始之前，我们先得将 [touchEventApi][1]弄清楚了。这个小组件中，用到了： 1. TouchEvent.touches （表示一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的Touch对象） 2. TouchEvent.changedTouches （一个 T...
项目使用的饿了么的Element-Ui，权限树使用其树形控件： <el-tree :data="data" ></el-tree> 刚开始没有特殊需求，三级分支，效果看着还可以。但是接下来的新需求：增加页面操作按钮权限，即达到四级分支，同时要求四级权限布局方式为横向，而且操作按钮权限非固定四级树，但是样式要求一致。这样子就很难操作了，如果单单是四级树为横向，还可以调调样式完成。本来想修改element的tree控件源码来实现，网上查了一些资料，还没有很...
本文实例为大家分享了vue.js异步上传文件的具体代码，供大家参考，具体内容如下上传文件前端代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8" /><script src="../js/vue.js"></script><script src="../js/vue-resource.js"></script><script src="../asset/js/jquery.js"></script></head> <body><div id="app"><input type=...
实现效果：实现代码以及注释： <!DOCTYPE html> <html> <head><title>按钮绑定</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">*{margin: 0;padding: 0;}body{font: 15px/1.3 Open Sans, sans-serif;color: #5e5b64;text-align: center;}a, a:visited{outline: none;color: #3b9dc1;}a:hover...
前面的话有时候需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。 在组件实例中，Vue提供了相应的属性，包括$parent、$children、$refs和$root，这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问 $parent $parent表示父组件的实例，该属性只读下面是一个简易实例 <div id="example"><parent-component></parent-component> </div> <template id="parent-component"><div class="parent"><h3...
本文主要介绍了Vue-Cli中自定义过滤器，分享给大家，也给自己做个笔记vue2里面移除了内置过滤器，所有过滤器都需要自己定义。 以下例子是使用webpack模版自定义一个日期格式过滤器的例子。 文件结构. ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ...所有过滤器都放在Filters文件夹下，剩下的就是webpack模版的文件结构，在这里就不完全写出来。 Filters/DataF...
这篇文章主要讲的是路由切换的时候动画效果的实现，可以根据不同的路径去改变动画的效果，以下就是源码，可供参考：<template> <div id="app"> <transition :name="transitionName"> <router-view class="child-view"></router-view> </transition> </div> </template> <script> export default { name: app, data () { return { transitionName: slide-left } }, mounted () { }, //监听路由的路径，可以通过不同的路径去选择不同...
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。定义的方法如下： 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。 Vue.filter(filtername,function(value,参数){return 参数+value.split().reverse().join();});1234123 完整代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <script src=./vue2.js></script> <script> window.onload=f...