在前端开发的项目中。难免会遇到需要在页面上集成一个富文本编辑器。 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器，在百度上搜索一圈没有发现详细的说明，决定自己尝试，忙活了一天终于搞定了。 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化，我们可以通过模块化实现页面和逻辑的复用。所以可以把Ueditor重新封装成一个.vue的模板文件。其他组件通过引入这个模板实现代码复用。 1.2 数据传输 首先父组件需要设...
最近写vue2.0项目中用到了轮播图的一个插件，也就是vue-awesome-swiper，个人感觉还是比较强大的，swiper官网中的API及配置均可使用(支持3.0)，以下说下使用该插件的一些步骤：第一步安装npm install vue-awesome-swiper --save第二部在main.js中引入import Vue from vue import VueAwesomeSwiper from vue-awesome-swiper Vue.use(VueAwesomeSwiper)然后就可以在组件中使用该插件 <template> <div> <swiper :options="swiperOptio...
之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。当然，使用就安装 npm install cropperjs接着再引入 import Cropper from 'cropperjs'下面是源码<template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img id="image" :src="url" alt="Picture"> </div> <button type="button" id="button" @click="crop">确定</button> </div> <div style=...
前言 公司的项目中需要对数据做可视化处理，高级点的D3.js目前还没接触到，因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts，但是使用现成的就意味着必须使用它定制好的数据结构，我也没办法对他进行一些修改。我个人也偏向于原生JS编程，因此没有采用，而是自己在vue中实现了对数据的可视化处理，先来看看效果图 以下数据已做脱敏处理这是目前用到的三种图。可以看到，我在图表的外部添加了标题及说明，以...
这篇文章主要讲的是路由切换的时候动画效果的实现，可以根据不同的路径去改变动画的效果，以下就是源码，可供参考：<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...
之前在用vue写子父组件通信的时候，老是遇到问题！！！ 子组件传值给父组件：子组件：通过emit方法给父组件传值，这里的upparent是父组件要定义的方法 模板： <div v-on:click="switchViewBtn">切换视图</div> 在data中定义：switchStatus = true;方法： switchViewBtn(){let that=this;this.$emit("parentView",that.switchStatus);}, 父组件：模板： <div @parentView="changeView" :msg="msg"></div> 方...
首先让我们从最简单的一个实例Vue入手:const app = new Vue({// options 传入一个选项obj.这个obj即对于这个vue实例的初始化})通过查阅文档，我们可以知道这个options可以接受: 选项/数据datapropspropsData(方便测试使用)computedmethodswatch选项 / DOM选项 / 生命周期钩子选项 / 资源选项 / 杂项具体未展开的内容请自行查阅相关文档，接下来让我们来看看传入的选项/数据是如何管理数据之间的相互依赖的。const app = new Vue({e...
由于我们公司是主营业务是海淘，所以每个项目都是类似淘宝天猫之类的商城，那么购物车就是一个重点开发功能模块。介于之前我都是用jq来写购物车的，这次就用vuejs来写一个购物车。下面我就从全选，数量控制器，运费，商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑。1.一层数据结构-全选下面这段代码和vuejs官网里面checkbox绑定很像。不明白的可以直接上vuejs官网看看。<...
根据Vue.js + Element UI + MongoDB进行开发P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run devVue.js 主要目录结构 . ├── build # 一些webpack的文件，配置参数什么的，一般不用动 ├── config # vue项目的基本...
vue.js 源代码学习笔记 core scedule.js，供大家参考，具体内容如下/* @flow */import type Watcher from ./watcher import config from ../config import { callHook } from ../instance/lifecycleimport {warn,nextTick,devtools } from ../util/indexconst queue: Array<Watcher> = [] let has: { [key: number]: ?true } = {} let circular: { [key: number]: number } = {} let waiting = false let flushing = false let ind...
目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。前言： 使用 cnpm 安装 axios cnpm install axios -S安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时 引入 为了解决这个问题，是在引入 axios 之后，修改原型链具体的实施请往下看~ 改写原型链 首先在 main.js 中引入 axios import axios from axios这时候如果...
1，使用save会在package.json中自动添加。 npm install node-sass --save-devnpm install sass-loader --save-dev 注： 通常使用npm安装会出现以下报错，安装失败。（网路问题）可以通过淘宝的npm镜像安装node-sass，解决以上问题。 $ npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）$ cnpm install node-sass --save （使用淘宝镜像安装node-sass） 2.进入webpack.base.config.js 配置scss ...
1. Vue的组成文件(.vue) 分为三部分，分别对应html,js,css <template></template><script></script><style></style> 2. Vue的生命周期函数 beforeCreate() 创建数据之前created() 创建数据 我们在这里的得到我们在data里面创建的数据beforeMount() // Dom渲染完成前mounted() //Dom渲染完成beforeUpdate() // 更新视图 在beforeUpdate触发时，视图已经更新完成Updated() //更新数据调用的函数、。<div id=app><p>{{msg}}</p><input...
在vue开发中，不可避免要整合axios，简单记录一下整合中的文件，方便以后使用查找。 整合文件axios.js import axios from axios;// 适配vue-resourceconst instance = axios.create(); instance.interceptors.request.use(config=> { //Serialize.decode(config); return config; }); instance.interceptors.response.use(response=> { return response.data; }, err=> { if (err.response) { axios.post(/v1/error, err.response)...