![](https://img-blog.csdnimg.cn/20181110090633128.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 88
前端框架Vue.js学习
Radom7
一个正在驶向架构师的软件工程师
展开
-
Vue 之上传组件 vue-simple-uploader
vue-simple-uploader 是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖、自定义。特点:支持文件、多文件、文件夹上传支持拖拽文件、文件夹上传统一对待文件和文件夹,方便操作管理可暂停、继续上传错误处理支持“快传”,通过文件判断服务端是否已存在从而实现“快传”上传队列管理,支持最大并发上传分块上传支持进度、预估...原创 2018-11-13 10:08:44 · 32671 阅读 · 16 评论 -
Vue之参数传递
在App.vue的里传递一个id参数到About.vue里:<template> <div id="root"> <router-link to="/home">首页 \</router-link> <router-link :to="{name: 'about',params:{id:'01'}}"&原创 2018-11-08 12:02:12 · 260 阅读 · 0 评论 -
Vue之extends对象
extends对象跟mixins对象很类似区别extends只支持一个对象,而mixins支持的是数组 extends:countConsole, mixins:[countConsole]例子:<script> //1.定义一个extends对象 var countConsole = { created(){ console.log("这是...原创 2018-11-06 19:49:27 · 1701 阅读 · 0 评论 -
Vue之混入(mixins)
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先。 //1.定义一个mixins对象 var countConsole = { data() { return {...原创 2018-11-06 19:36:32 · 2984 阅读 · 0 评论 -
Vue之watch和computed
watch用于监控自身属性变化和监控路由对象计算属性computed的特点计算属性会依赖于他使用的data中的属性,只要是依赖的属性值有改变,则自动重新调用一下计算属性;如果他所依赖的这些属性值没有发生改变,那么计算属性的值是从缓存中来的,而不是重新编译,那么性能要高一些,所以vue中尽可能使用computed替代watch。<template> <div id=...原创 2018-11-06 16:37:47 · 166 阅读 · 0 评论 -
Vue之transition动画
demo:&lt;template&gt; &lt;div id="root"&gt; &lt;div&gt; &lt;router-link to="/home"&gt;首页 \&lt;/router-link&gt; &l原创 2018-11-08 17:06:18 · 502 阅读 · 0 评论 -
Vue之多个router-view应用
在App.vue添加两个router-view,使用name属性指定对象的页面<template> <div id="root"> <div> <router-link to="/home">首页 \</router-link> <router-link to="/原创 2018-11-08 14:30:21 · 17324 阅读 · 1 评论 -
Vue之子路由配置
新建两个组件:about1.vue<template> <div> {{msg}} </div></template><script>export default { data(){ return{ msg:"这是about1页面" } },}</script&am原创 2018-11-08 11:47:16 · 2019 阅读 · 0 评论 -
Vue之构造函数如何跳转页面
在App.vue里,定义三个按钮,指定各式的跳转规则<template> <div id="root"> <button class="button" @click="goback">后退</button> <button class="button" @click="fo原创 2018-11-08 11:28:04 · 403 阅读 · 0 评论 -
Vue之model属性和404页面的定义
model属性当router的moder属性为hash时,访问路径会自动加上#/http://localhost:8080/about#/当router的moder属性为history时,访问路径不会自动加上#/http://localhost:8080/about1#/404页面定义一个Error.vue,用来显示404页面<template> <...原创 2018-11-08 10:24:35 · 1118 阅读 · 0 评论 -
Vue之插槽(slot)
slot:向组件内部指定位置传递内容在App.vue引入子组件About.vue,在about标签加上一个div标签传递到子组件中:App.vue&amp;lt;template&amp;gt; &amp;lt;div id=&quot;root&quot;&amp;gt; &amp;lt;about&amp;gt; &amp;lt;d原创 2018-11-06 20:35:21 · 192 阅读 · 0 评论 -
Vue之vue-resource插件使用
vue-resource 是实现Vue异步加载的库vue-resource特点体积小vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。支持主流的浏览器和...原创 2018-11-09 10:40:24 · 187 阅读 · 0 评论 -
Vue之Vuex(状态管理模式)
简介Vuex(状态管理模式)是Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。作用解决不同组件之间的数据共享解决组件的数据存储问题实现首先,在store.js实例化一个Vuex,用来对数据进行存储:import Vue from 'vue'import Vuex from 'vuex'V...原创 2018-11-06 10:17:23 · 380 阅读 · 0 评论 -
Vue之路由
默认的配置文件为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...原创 2018-11-05 20:50:39 · 165 阅读 · 0 评论 -
Vue之axios
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 1. 从浏览器中创建 XMLHttpRequest 2. 从 node.js 发出 http 请求从 node.js 发出 http 请求 3. 支持 Promise API支持 Promise API 4. 拦截请求和响应拦截请求和响应 5. 转换请求和响应...原创 2018-11-08 20:18:43 · 307 阅读 · 0 评论 -
Vue之url传参
在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...原创 2018-11-08 13:55:15 · 1241 阅读 · 0 评论 -
Vue之路由里的钩子函数
在router.js里定义钩子函数在router.js里添加beforeEnter和beforeLeave这两个钩子函数,beforeEnter这个钩子函数需要添加next();不然页面不能进行跳转;beforeLeave钩子函数在router.js是失效的,需要在组件里定义:钩子函数的三个参数:to:router即将进入的路由对象from:当前导航即将离开的路由next:Funct...原创 2018-11-08 11:15:17 · 1068 阅读 · 0 评论 -
Vue之实例方法set使用
<template> <div id="root"> <!-- <p v-for="item in names" :key="item">{{item}}</p> --> <p v-for="item in list" :key="item&quo原创 2018-11-06 20:07:07 · 297 阅读 · 0 评论 -
Vue之Vuex的getters和actions的使用
继前文《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...原创 2018-11-06 10:41:38 · 7462 阅读 · 0 评论 -
Vue之生命周期函数
<template> <div id="root"> <!-- <div ref="title">{{title}}</div> --> <v-about v-if="flag"></v-about> <butto原创 2018-11-05 20:15:03 · 137 阅读 · 0 评论 -
Vue之非父子组件的通信
新建一个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...原创 2018-11-05 19:40:21 · 137 阅读 · 0 评论 -
Vue之父子组件主动获取数据和方法
父组件主动获取子组件的数据和方法父组件代码,this.$refs接收子组件数据和方法:<template> <div id="root"> <div> <input ref="name" name=""> </div> <div>原创 2018-11-05 18:56:25 · 237 阅读 · 0 评论 -
Vue之父组件给子组件传值和方法
父组件写好需要接受的值和方法,使用:title="title"传title属性值给子组件, :go="go"传递go方法<template> <div id="root"> <!-- 3.引用组件 --> <v-header :title="title" :go="go">&a原创 2018-11-04 15:50:06 · 235 阅读 · 0 评论 -
Vue之使用组件
创建一个组件Header.vue<template> <div class="header"> 这是header </div></template>在App.vue中引用Header.vue<template> <div id="root"> &a原创 2018-11-04 15:22:49 · 238 阅读 · 0 评论 -
Vue之v-if与v-show的区别
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原创 2018-11-04 14:22:53 · 966 阅读 · 0 评论 -
Vue之绑定事件
绑定事件 v-on:click 简写:@click;为button添加一个change的点击事件,改变content的值 <div> <div class="button" @click="change">{{content}}</div> </div><script>export default {原创 2018-11-04 12:52:21 · 890 阅读 · 0 评论 -
Vue之属性绑定和双向数据绑定
属性绑定:v-bind:title,简写为::title双向数据绑定:v-model绑定content的值,也可以改变content的值<div id="root"> <div :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</div> <input v-model="content"/>原创 2018-11-04 12:47:34 · 218 阅读 · 0 评论 -
Vue之数据三种显示在模板上的方法
{{}}:双大括号会将数据解析成纯文本<div id="app1">{{msg}} </div>v-text:会将数据解析成纯文本<div id="app2" v-text="msg"></div>v-html:输出真正的 HTML<div id="app3" v-html=&q原创 2018-11-04 12:07:18 · 2047 阅读 · 0 评论