vue
咸鱼最牛逼
这个作者很懒,什么都没留下…
展开
-
四十八、封装Axios网络请求
注意:当使用 Get 请求带参数时,参数的 key 和其他不一样,为 params,其他访问方式, key 为 data!!1.封装api.jsimport axios from 'axios'import router from '../router/index'import {Message} from 'element-ui'import {UN_LOGIN} from '....原创 2019-08-07 16:30:25 · 177 阅读 · 0 评论 -
三十四、Vue中多个元素或组件的过渡动画
一、Vue中多个元素的过渡关键点如下:为每个元素添加 key 属性,避免Vue的复用导致不出现动画为 <transition> 添加 mode 属性:3. in-out:先出现元素,再隐藏元素4. out-in:先隐藏元素,再出现元素<template> <div id="root"> <!-- mode="in-o...原创 2019-05-10 20:09:19 · 383 阅读 · 0 评论 -
三十三、Vue中JS动画与 Velocity.js 的结合
一、JS动画 JS动画的核心就是在<transition>标签中,利用@before-enter、@enter、@after-enter 和 @before-leave、@leave、@after-leave 实现入场、离场动画!<template> <div id="slot"> <!-- 入场动画:@before-enter、@ent...原创 2019-05-10 18:54:09 · 260 阅读 · 0 评论 -
三十七、Vue中更改vue.config.js配置文件,一定要重启!!
Vue中更改vue.config.js配置文件,一定要重启!!或者配置项更改并不会生效!!!原创 2019-05-14 20:16:30 · 7729 阅读 · 1 评论 -
二十八、Vue之template占位符
注意:这里的<template>与组件中的<template>不是一个概念,这里的<template>占位符相当于小程序的<block>节点! 当我们需要在遍历循环时,将数据绑定到多个Dom节点,这种情况下使用<template>占位符将极大的简化代码:<template v-for="(item, index) of l...原创 2019-04-29 22:40:33 · 7333 阅读 · 1 评论 -
二十七、Vue之Listt[index]添加数据,页面却没有更新的解决办法
一、问题 一般来说,Model层一旦改变,那么视图层也会随之改变,但是对于List集合有一种例外情况。当我们使用list[index] = 5 来向List中添加数据时,通过控制台我们可以看到数据已经添加成功,但是页面并没有随之刷新。二、原因 这是因为我们只有使用List方法操作数据,才能让视图层随之改变。List方法包括:push pop shift unshift splice so...原创 2019-04-29 21:47:39 · 2190 阅读 · 0 评论 -
三十二、在Vue中使用animate.css库
一、CSS3.0方式实现动画案例:使用css3.0动画实现文字出现、消失时的动画<template> <div id="slot"> <transition> <div v-if="show"> <h1>你好!</h1> </div> </tra...原创 2019-05-04 22:01:33 · 1403 阅读 · 0 评论 -
三十一、Vue中CSS动画原理
参见 初识 Vue(22)—(Vue中CSS动画原理)转载 2019-05-04 21:34:27 · 160 阅读 · 0 评论 -
三十、Vue之动态组件与 v-once 指令
一、动态组件<component :is="type"></component><script>Vue.component('child-one', { template: '<div>child-one</div>'});Vue.component('child-two', { template: '<div&...原创 2019-05-04 20:01:25 · 127 阅读 · 0 评论 -
二十九、Vue之插槽
一、适用场景 当子组件需要根据父组件传递的DOM元素来决定显示界面时,待传递的DOM元素就可以放到插槽中传递给子组件。二、案例演示 下面就是插槽的一种模式:“具名插槽”父组件:<template> <div id="app"> <div id="nav"> <v-slot> <!-- 传递D...原创 2019-05-04 17:10:53 · 190 阅读 · 0 评论 -
二十五、Vue之PC端UI框架Element
一、官网Element框架是PC端UI框架,网址:http://element-cn.eleme.io/#/zh-CN二、安装、引入项目(一)vue-cli3引入Element框架vue add element(二)vue-cli2引入Element框架1.安装cnpm i element-ui -S2.引入// 引入 element UIimport ElementUI ...原创 2019-04-02 22:52:55 · 572 阅读 · 0 评论 -
三十五、Vue中的列表过渡动画
<template> <div id="root"> <!-- 关键就是 <transition-group>,这样列表动画就出现了 --> <transition-group> <div v-for="(item, index) of list" :key="index">{{item}...原创 2019-05-10 20:27:53 · 897 阅读 · 0 评论 -
三十六、Vue中使用插槽实现动画封装
在做一个项目过程中,可能会出现多个重复动画,这样反复的使用 <transition> 包裹 DOM 元素实现动画显然是不合理的。为了解决这个问题,我们可以利用 插槽 <slot>传递DOM元素的特点实现动画的封装,多处复用的效果!1.动画封装模板CommonAnimation.vue注意:不要忘记使用 props: ['show'] 接收传值<temp...原创 2019-05-10 20:52:59 · 361 阅读 · 0 评论 -
四十七、Vue路由导航卫视之实例解析
路由导航卫视可以作为所有路由的拦截器,在这里,可以做一些相应的业务处理,比如拦截一些无权限的访问之类!1.路由导航卫士/** * 问题:为什么在这里使用“路由导航卫视”? * 原因: * 这个问题的核心就在于“数据请求时机”。 * 可能会有小伙伴说这有何难,登录成功之后请求不就可以了吗?是的,登录成功之后,请求菜单资源是可以的, * 请求到之后,我们将之保存在st...原创 2019-06-06 19:30:20 · 411 阅读 · 0 评论 -
四十三、Vue中使用 router-link 导致文字颜色变化的解决方案
案例: <ul> <!-- border-bottom:1像素边框 --> <li class="item border-bottom" v-for="item of list" :key="item.id"> ...原创 2019-05-23 18:07:03 · 8796 阅读 · 1 评论 -
四十二、Vue中使用keep-alive优化网页性能
问题一: 如上图所示,当我们在使用路由在首页和城市列表页之间进行切换时,它会反复访问 index.json(首页数据) 和 city.json(城市列表页数据),而大多数时候,这里的数据都是一样的,不需要反复请求。解决办法: 使用<keep-alive>将请求的数据缓存到内存中,当再次访问时,直接从内存中取数据即可!案例如下:<template> <d...原创 2019-05-23 16:36:24 · 241 阅读 · 0 评论 -
四十一、Vue中localStorage缓存
存: // 防止有的浏览器不支持 try { localStorage.city = city } catch (error) { }取:try { if (localStorage.city) { defaultCity = localStorage.city }} catch (e) {}...原创 2019-05-23 15:52:51 · 925 阅读 · 0 评论 -
四十、Vue中使用定时任务进行节流
一、问题 当用户在与设备进行交互时(比如点击、下滑。。。),同一个方法可能会反复触发,但并不是每次触发都是有意义的,这样只会导致损耗性能,降低用户体验。二、解决办法 使用定时任务,将当前任务延迟一段时间执行。在此期间若有新的任务,则清除老任务,新任务进入定时器。案例如下:<script>import { clearTimeout, setTimeout } from 't...原创 2019-05-21 20:54:55 · 1036 阅读 · 0 评论 -
四十六、Vue中路由切换时,滚动行为在组件之间相互影响的解决办法
一、问题 当我们在A组件中滚动到页面底部时,再通过路由到B组件,会发现显示的也是B组件的底部,而不是从头部开始显示?二、原因 组件之间的行为会相互影响。三、解决办法 在配置路由的地方加上如下代码,例如:router.jsimport Vue from 'vue'import Router from 'vue-router'import Home from './pages/...原创 2019-05-24 23:00:33 · 1562 阅读 · 1 评论 -
四十五、Vue之递归组件
一、递归组件的实现效果二、递归组件的实现效果数据: list: [{ title: '成人票', children: [{ title: '成人三馆联票', children: [{ ...原创 2019-05-24 21:55:36 · 173 阅读 · 0 评论 -
四十四、Vue中监听滚动事件
// 监听滚动事件window.addEventListener('scroll', this.handleScroll)//得到距离顶部的滚动距离const top = document.documentElement.scrollTop原创 2019-05-24 20:25:45 · 283 阅读 · 0 评论 -
三十九、Vue中监听器 watch 的使用
一、使用场景 当我们需要监听某个属性时在变化时触发一系列的逻辑,那么就可以利用监听器实现。二、案例 当父组件接收到子组件传递过来的值时,顺次加11.父组件传递数值给子组件<template> <div> ..... <city-list :letter="letter" /> </div></templat...原创 2019-05-15 22:35:40 · 793 阅读 · 0 评论 -
三十八、Vue中使用 v-for 遍历 对象(类似于Java的Map)
对象数据如下: "cities": { "A": [{ "id": 56, "spell": "aba", "name": "阿坝" }, { "id": 57, "spell": "akesu", "name": "阿克苏" }], "B": [{ "id": 58, "spell": "baiyin",...原创 2019-05-15 21:49:55 · 3946 阅读 · 0 评论 -
二十六、Vuex
一、基本功能介绍 Vuex 解决不同组件的数据共享和数据持久化!就是H5中的 LocalStorage 和 SessionStorage 的替代品!注意:Vuex一般用于大项目,小项目等不用就不用。二、Vuex的使用1、src目录下面新建一个vuex的文件夹2、vuex 文件夹里面新建一个store.js3、安装vuexcnpm install vuex --save4、在...原创 2019-04-11 21:53:49 · 122 阅读 · 0 评论 -
十四、Vue之父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
一、父组件主动获取子组件的数据和方法1.调用子组件的时候定义一个ref <v-header ref="header"></v-header>2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法二、子组件主动获取父组件的数据和方法 this.$parent.数据 th...原创 2019-03-28 22:58:56 · 660 阅读 · 1 评论 -
七、Vue生命周期函数之mounted()------页面刷新时调用
mounted()方法和data()和methods是同级别的<script>export default { name: 'app', data() { return { todo: '', list: [] } }, methods: { },...原创 2019-03-26 22:07:58 · 17444 阅读 · 1 评论 -
六、Vue之缓存
// 存入缓存,对象必须序列化才可以存入 localStorage.setItem('list', JSON.stringify(this.list));//取出缓存 因为存入的时候用JSON序列化了,所以取要反序列化var list = JSON.parse(localStorage.getItem('list'));...原创 2019-03-26 22:05:27 · 281 阅读 · 1 评论 -
五、Vue之Enter键触发事件
//@keydown 键盘按下事件<input type="text" v-model="todo" @keydown="addByEnterKey" /><script>export default { name: 'app', data() { return { todo: '', l...原创 2019-03-26 21:29:56 · 13279 阅读 · 1 评论 -
四、Vue之CheckBox绑定数据特别之处
<li v-for="(item,key) in list" :key='key' v-if="!item.isCompleted"> <input type="checkbox" v-model="item.isCompleted" /> {{item.title}} -------- <button @click="remove(key)">...原创 2019-03-26 20:59:51 · 627 阅读 · 1 评论 -
三、Vue事件 定义方法、执行方法、获取数据、改变数据、方法传值以及事件对象
1.获取data里面的数据<button @click="getInputValue">获取data里面的数据</button> <script> export default { data () { /*业务逻辑里面定义的数据*/ return { msg: '你好vue' },...原创 2019-03-26 19:46:18 · 778 阅读 · 1 评论 -
二、Vue常用属性
1.遍历 v-for<li v-for="(item,key) in list" v-bind:key="key"> {{item}}</li>2.取值 {{***}}<h2>你好Vue---{{msg}}</h2>3.DOM元素绑定数据 v-bind 或 :<div v-bind:title="title"...原创 2019-03-26 19:10:33 · 413 阅读 · 0 评论 -
十八、Vue之动态路由和get传值
一、动态路由(一)动态路由的基本概念 为了更好地理解动态路由,我这里举一个例子: 比如我搜索书籍,在搜索页面会出现好多书籍组成的列表,这个时候,若我点击某本书籍的列表,那么就会跳转到该书籍的详情页面,这里的动态跳转就是所谓的动态路由。(二)动态路由的使用1.创建详情页面组件(Detail.vue)<template> <div> 这里...原创 2019-03-29 20:46:12 · 217 阅读 · 1 评论 -
十七、Vue之路由
(一)安装 vue-router 插件cnpm install vue-router --save(二)引入 vue-router 并 Vue.use(VueRouter) (main.js)import Vue from 'vue'import VueRouter from "vue-router";Vue.use(VueRouter);(三)配置路由1.创建组件并引入组件...原创 2019-03-29 20:04:30 · 131 阅读 · 0 评论 -
十六、Vue之 template 中取data()中数据的注意点
在template 中取data()中数据注意DOM属性和非属性之间的区别:1.DOM属性中取数值<template> <div> <input type="text" v-model="todo" @keydown="addByEnterKey" /> </div></template>&l...原创 2019-03-29 19:17:50 · 9014 阅读 · 1 评论 -
十五、Vue之非父子组件传值
1.新建一个js文件,然后引入vue,实例化vue,最后暴露这个实例VueEvent.jsimport Vue from "vue";var VueElement = new Vue();export default VueElement;2.在需要广播传递数值的地方引入刚才定义的实例,并通过VueEvent.$emit(‘名称’,‘数据’)传递数值// 1.引入VueEvent...原创 2019-03-29 19:07:33 · 131 阅读 · 1 评论 -
八、Vue之封装通用方法
以封装缓存为例进行讲解:1.首先在 src 目录下新建 util 目录2.新建 storage.js 文件3.封装方法// 封装本地存储的方法var storage={ set(key, value) { //对象必须序列化才能存入缓存 localStorage.setItem(key, JSON.stringify(value)); },...原创 2019-03-26 22:25:58 · 4240 阅读 · 1 评论 -
十九、Vue之vue-cli3.0跨域问题解决
在项目的根目录新建一个vue.config.js文件(和package.json同层次目录),然后配置文件如下:module.exports = { devServer: { proxy: { // 所有的请求起始部分全部用 '/api'代替,比如访问"https://192.168.1.4/movie",那么简写成"/api/movie"即可 ...原创 2019-03-31 19:33:01 · 1056 阅读 · 0 评论 -
十三、Vue之 父组件传值给子组件 和 子组件传值给父组件
一、简要介绍 父子组件之间的传值主要有三种:传递数值、传递方法、传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍:(一)传递数值1.子组件:Header.vue<template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> &l...原创 2019-03-28 21:49:41 · 1180 阅读 · 2 评论 -
十二、Vue中安装插件一定要加上 --save
在安装组件时,一定要加上 --save ,这样该组件才会出现在 package.json 中,这样别人拿到把你的项目才能正确的把依赖下载完毕,才能成功运行项目!原创 2019-03-28 19:28:53 · 912 阅读 · 0 评论 -
十一、Vue之请求数据
一、vue-resource插件(一)安装vue-resource插件备注:在安装组件时,一定要加上 --save ,这样该组件才会出现在 package.json 中,这样别人拿到把你的项目才能正确的把依赖下载完毕,才能成功运行项目!cnpm install vue-resource --save...原创 2019-03-28 19:27:27 · 254 阅读 · 0 评论