本代码已组件化,可以直接使用. 说明:本组件可以直接解析.vue文件,为了支持less语法解析,在组件中引入less.js,可在less官网下载. 组件代码 <template> <div class="remote"> <component :is="currentView" v-bind="$props"/> </div> </template> <script> imp

Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu

vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue init webpack-simple custom-global-component cnpm install npm run dev 1.自定义vue组件,首先要创建组件文件,在loading文件夹中Loading.vue直接按照vue template相关规则写即可 2.创建Loading.v

axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,params) .then(function(res){ console.log(res); alert(res.data); }) .catch(function(err){ console.log(err); }) 4. vue2.0 子组件和父组件之间的传值 Vue是一个轻量级的渐进式框架,对于它的一

手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/kiko/inde... 源码地址 https://github.com/rascalHao/... 搭建项目 vue-cli将你的vue项目初始化建好 vue init webpack my-project 平常我们引入插件的流程是: npm i <package> -S import Vue from 'vue' impor

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

上一篇文章讲到了负载均衡在Spring Cloud体系中的体现,其实Spring Cloud是提供了多种客户端调用的组件,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.我们可以使用JDK原生的URLConnection.Apache的Http Client.Netty的异步HTTP Client, Spring的RestTemplate.但是,用起来最方便.最优雅的还是要属Feign了.今天这一篇文章是系列教程中第五篇,也是对负载均衡的第二篇,主

父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></child> //注意这里用驼峰写法哦 </parent> data(){ return { content:'sichaoyun' }; } 子组件通过props来接受数据 第一种方法 props: ['childCom'] 第二种方法 props: { childCom: String //这里

父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></child> //注意这里用驼峰写法哦 </parent> data(){ return { content:'sichaoyun' }; } 子组件通过props来接受数据 第一种方法 props: ['childCom'] 第二种方法 props: { childCom: String //这里

从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?思路是通过子组件$emit发射一个方法  如下: this.$emit('imgDataCallback', callbackUrl); 在父组件使用子组件的地方用v-on绑定这个自定义事件 如下: 然后在父组件定义这个方法 //获取imgurl        getImgData:

vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { return { msg: "Hello Vue2.0.js" } } 比如每个组件我们都定义一个msg,当我们使用msg的时候,使用的都是各自组件内部的msg,而不会互相干扰. 而如果父子组件当中,如果需要实现数据的传递,父组件的数据需要通过 prop 才能下发到子组件中,子组件要显式

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

1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- 组件将被缓存 --> </component> </keep-alive> 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的在使用keep-alive的情况下 <keep-alive><router-view></router

从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆落.特别是在组件层级比较深的情况下.通过广播和事件分发的机制,就显得比较混乱了. 官方在废除的同时,也为我们提供了替换方案,包括实例化一个空的vue实例,使用$emit反应子组件上的状态变化 1.使用$emit触发事件 helloWorld.vue作为父组件,dialogConfigVi

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事件 和 向下广播事件; 事件 说明 $on(事件名) 事件名的类型是字符串(下同),调用它可以通过this.$on()来调用: $emit(事件名, 参数) 用于触发事件,参数是用于传递给事件的参数.这个用于触发同级事件(当前组件的) $dispatch(事件名, 参数) ①向上派发事件,用于向父组

源码地址 点击查看演示源码 Vue2父子传参:props 首先在父组件中引入子组件,然后以属性的方式将数据传递给子组件 父组件: <template> <div class="home"> <!-- 在子组件中使用 :变量名=value 的方式向子组件传递数据,子组件通过 props 接收--> <HelloWorld :msg="fatchData" ref="childEl"/> </di

目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button> 编写: template <template> <div class="cpdf"> <div class="cen

一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst

熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下   接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样   一 .我们先来创建中央事件总线,在src/assets/下创建一个e

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr