Radom&7

vue-simple-uploader 是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件，自带 UI，可覆盖、自定义。特点：支持文件、多文件、文件夹上传支持拖拽文件、文件夹上传统一对待文件和文件夹，方便操作管理可暂停、继续上传错误处理支持“快传”，通过文件判断服务端是否已存在从而实现“快传”上传队列管理，支持最大并发上传分块上传支持进度、预估...

在App.vue的里传递一个id参数到About.vue里:<template> <div id="root"> <router-link to="/home">首页 \</router-link> <router-link :to="{name: 'about',params:{id:'01'}}"&

extends对象跟mixins对象很类似区别extends只支持一个对象，而mixins支持的是数组 extends:countConsole, mixins:[countConsole]例子：<script> //1.定义一个extends对象 var countConsole = { created(){ console.log("这是...

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。 //1.定义一个mixins对象 var countConsole = { data() { return {...

watch用于监控自身属性变化和监控路由对象计算属性computed的特点计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性；如果他所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么性能要高一些，所以vue中尽可能使用computed替代watch。<template> <div id=...

demo:<template> <div id="root"> <div> <router-link to="/home">首页 \</router-link> &l

在App.vue添加两个router-view，使用name属性指定对象的页面<template> <div id="root"> <div> <router-link to="/home">首页 \</router-link> <router-link to="/

新建两个组件：about1.vue<template> <div> {{msg}} </div></template><script>export default { data(){ return{ msg:"这是about1页面" } },}</script&am

在App.vue里，定义三个按钮，指定各式的跳转规则<template> <div id="root"> <button class="button" @click="goback">后退</button> <button class="button" @click="fo

model属性当router的moder属性为hash时，访问路径会自动加上#/http://localhost:8080/about#/当router的moder属性为history时，访问路径不会自动加上#/http://localhost:8080/about1#/404页面定义一个Error.vue，用来显示404页面<template> <...

slot：向组件内部指定位置传递内容在App.vue引入子组件About.vue,在about标签加上一个div标签传递到子组件中：App.vue<template> <div id="root"> <about> <d

vue-resource 是实现Vue异步加载的库vue-resource特点体积小vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。支持主流的浏览器和...

简介Vuex(状态管理模式)是Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。作用解决不同组件之间的数据共享解决组件的数据存储问题实现首先，在store.js实例化一个Vuex，用来对数据进行存储：import Vue from 'vue'import Vuex from 'vuex'V...

默认的配置文件为router.jsimport Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'Vue.use(Router)export default new Router({ mode: 'history', base: process.env.BASE_U...

axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 1. 从浏览器中创建 XMLHttpRequest 2. 从 node.js 发出 http 请求从 node.js 发出 http 请求 3. 支持 Promise API支持 Promise API 4. 拦截请求和响应拦截请求和响应 5. 转换请求和响应...

在router.js定义需要传递的参数import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'import Error from './views/Error.vue'import About1 from './views/About1.vue'import Abo...

在router.js里定义钩子函数在router.js里添加beforeEnter和beforeLeave这两个钩子函数，beforeEnter这个钩子函数需要添加next（）；不然页面不能进行跳转；beforeLeave钩子函数在router.js是失效的，需要在组件里定义：钩子函数的三个参数：to:router即将进入的路由对象from:当前导航即将离开的路由next:Funct...

<template> <div id="root"> <!-- <p v-for="item in names" :key="item">{{item}}</p> --> <p v-for="item in list" :key="item&quo

继前文《Vue之Vuex(状态管理模式)》，在store.js添加getters和actions方法：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state:{ count:1 }, mutations:{ increment...

<template> <div id="root"> <!-- <div ref="title">{{title}}</div> --> <v-about v-if="flag"></v-about> <butto

新建一个VueEvent.js，创建一个Vue实例充当中间传输媒介//1.引入Vueimport Vue from 'vue'//2.实例化一个Vue对象var VueEvent = new Vue()//3.实例化的Vue对象暴露出去export default VueEvent在通信组件内分别引入VueEvent.js，这里是Home和About两个组件之间通信Home.vu...

父组件主动获取子组件的数据和方法父组件代码,this.$refs接收子组件数据和方法：<template> <div id="root"> <div> <input ref="name" name=""> </div> <div>

父组件写好需要接受的值和方法，使用:title="title"传title属性值给子组件， :go="go"传递go方法<template> <div id="root"> <!-- 3.引用组件 --> <v-header :title="title" :go="go">&a

创建一个组件Header.vue<template> <div class="header"> 这是header </div></template>在App.vue中引用Header.vue<template> <div id="root"> &a

v-if与v-show的区别v-if的显示和隐藏实在dom里创建和消除dom节点v-show是用css样式的display来控制dom节点的显示和隐藏例子:<div id="root"> <div v-if="isOk">{{content}}</div> <div class="button" @click="tog

绑定事件 v-on:click 简写：@click；为button添加一个change的点击事件，改变content的值 <div> <div class="button" @click="change">{{content}}</div> </div><script>export default {

属性绑定：v-bind:title，简写为：:title双向数据绑定:v-model绑定content的值，也可以改变content的值<div id="root"> <div :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</div> <input v-model="content"/>

{{}}:双大括号会将数据解析成纯文本<div id="app1">{{msg}} </div>v-text:会将数据解析成纯文本<div id="app2" v-text="msg"></div>v-html:输出真正的 HTML<div id="app3" v-html=&q