vue2.0如何自定义全局变量的方法

方法一:http://www.jianshu.com/p/04dffe7a6b74 //在mian.js中写入函数 Vue.prototype.changeData = function (){ alert('执行成功'); } //在所有组件里可调用函数 this.changeData(); 方法二: // 写好自己需要的base.js文件 exports.install = function (Vue, options) { Vue.prototype.changeData = functi…

Vue2.0如何自定义时间过滤器

我们知道Vue2.0开始不再支持自带的过滤器,需要我们自己去自定义过滤器,方法如下: 我们可以自己定义一个时间过滤器,在此引用了一个日期处理类库(Moment.js)可以很快的实现我们要的结果.首先先安装这个类库的依赖,安装步骤官网上有详细说明在此不细说.主要就是看你想要转化成什么样的时间格式,一般来说我们从后台获取的应该都是时间戳,只需要很简单的几句代码即可,如图所示: 在html上的代码如下图所示: 这里的DateTime是后台获取的时间戳,t…

vue2.0 如何自定义组件（vue组件的封装）

一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话已经很不错了,但是坑也是不少,而且项目中很多功能仅凭这些也实现不了,这需要我们去封装自己的可复用组件. 二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备…

vue2.0父子组件通信的方法

vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传递.为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定.props方法传值比较简单,缺点是属性会比较多. (1)父传子 [ props传值 ] <template> <div> <input type="text" v-mode…

vue2.0 样式表引入的方法 css sass less

在引入样式之前,首先要了解static.assets两个文件夹的区别. 从字面上可以看出,static用来存放静态文件,assets用来存放资源文件: static存放的文件不会被编译,打包后直接赋值到项目中:assets文件会被webpack编译: 举个简单的栗子:static的图片资源会完全一样的被复制到打包文件中,而assets里面的图片资源会打上时间戳: 当然这里还有很多细节的地方,我就暂时不多说了: 本栗子中,我将same.css文件放在static下:而将common.scss文件放…

vue2.0 兄弟组件数据传递方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css"> <script src…

vue1.0和vue2.0的区别(二)

这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说四.循环学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西而vue2.0默认就支持添加重复数据,而且vue2.0还去掉了$index和$key这两个东西换成在循环里定义 v-for="val in array" 这是vue1.0 v-for="(val,index) in array" 这是vue2.0 五.自定义键盘指令 vue…

vue2.0中，由于页面完成之后dom还未加载完成如何进行操作

再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: created() { this.$nextTick(() => { //do somthing }); 其实这里还有一个小技巧,就是用settimeout(fn,20),来取代this.$nextTick,(20 ms 是一个经验值,每一个 Tick 约为 17 ms),对用户体验而言都是无感知的. 强烈推荐…

基于vue2.0前端组件库element中 el-form表单自定义验证填坑

eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未定义. 原因: 1:要验证的DOM,还没有加载出来. 2:有可能this.$refs[ruleForm].validate() 方式不识别.需要使用: this.$refs.ruleForm.validate(); 解决方法 1: 要验证的DOM,还没有加载出来. this.ticketDialog…

CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEditor5官网 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html CKEditor5 引入有四种编辑器可供下载,根据自己的需求选择,因为开发需求需要颜色笔,所以采用 Document editor. 如果之前有…

vue2.0自定义指令

前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对一些常见文本的格式化,而自定义指令主要是为了对底层DOM实现操作,虽然说vue主要是以数据驱动视图,但是总有一些只能操作DOM的应用场景,例如最常见的:拖拽.此时,就是自定义指令大显身手的时候了. 在移动端,常见这么一个需求,以微信为例,在微信主屏左右滑动时候,可以随着滑动法相更改工具栏,也就是随着…

Vue2.0 【第二季】第1节 Vue.directive自定义指令

目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令一.什么是全局API? 二. Vue.directive自定义指令三.自定义指令中传递的三个参数四.自定义指令的生命周期 Vue2.0 [第二季]第1节 Vue.directive自定义指令一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们…

Asp.net MVC4.0自定义Html辅助方法

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; using System.Web.Mvc; namespace MyEF.ExtentionHtmlHelper { public static class ImageHelper { //说明:因为C#3.0的扩充方法是一种特殊的静态方法,因此在开发Html辅助方法时必须声明为 //静态方…

Vue2.0的变化，组件模板，生命周期，循环，自定义键盘指令，过滤器

组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素,包裹住所有的代码例如: <script> var Home={ template:'#aaa' }; window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' },…

vue2.0移动端自定义性别选择提示框

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来. 效果图: 实现代码: <template> <div class="app"> <div class="boy"> <input type="radio" name="radios" value="1" v-model="param…

router-view在vue2.0中不显示，解决方法

学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦在此总结记录,以免以后在此遇到此问题 //配置路由 const router = new VueRouter({ //在vue2.0中这里是routes而不是routers,否则<router-view>标签是不会显示的 routes:[ {path:'/',component:Home}, {path:'/helloworld', componen…

vue-touch不支持vue2.0的替换方法

当你想用vue-touch时,却发现官网这句话 Touch events plugin for Vue.js. This plugin does not support Vue 2.0 yet. 但是却找不到好的替换方案,只能自己硬着头皮上了. 我这边有一个不成熟的解决方案: 自己写v-touch指令长按 press,向上 swipeup,向下 swipedown,向左swipeleft,向右 swiperight 使用 v-touch:swiperight="methodFunc"…

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单

前言哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交流,看到博客下边好多小伙伴提出问题,我又燃起了斗志,不过这两天感冒了,所以更新的比较晚,这里也提醒大家,节日要照顾好自己哟~~~,好多人说我写的上不了台面,哈哈这里表示赞同,本系列的宗旨就是,给大家一个学习的点,让大家去自学一个面,然后大家一起学,把面交流成一个立体,就达到一个体系了.好啦,言归正传…

重开Vue2.0

目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加载,减少服务器压力 2.v-show:调整css display属性,使客户端操作更加流畅 v-if: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&…

Vue2.0 官方文档学习笔记

VUE2.0官方文档基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在V层实现渲染.Vue让我们把精力更多的放在VM层上,即更多的关注业务逻辑,把DOM操作交给系统. 1)声明式渲染:在vue实例对象中进行数据声明,在V层响应式的进行DOM渲染. 2)条件与循环:v-if.v-for 3)处理用户输入:v-model 4)构建组件化应用:在大型应用中将应用程序划分为小…

vue2.0构建淘票票webapp

项目描述之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + vuex + mint-ui 后台技术栈:nodejs + express 项目地址:https://github.com/canfoo/vue2.0-taopiaopiao 废话先不多说,先晒晒预览效果,过过瘾: 项目架构本项目采用vue2.0栈构建前端页面,采用expre…

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,…

VUE2.0不可忽视的很多变化

今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急.然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本.马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了.看了下vue2.0的…

Vue2.0的通用组件

饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开…

Vue2.0表单校验组件vee-validate的使用

vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 npm install vee-validate@next --save 注意:@next,不然是Vue1.0版本 bower install vee-validate#2.0.0-beta.13 --save 二.引用 import Vue from 'vue'; import VeeValidat…