![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
蜗牛速度额
这个作者很懒,什么都没留下…
展开
-
Vue 导航守卫用法 动态路由 路由懒加载
<template> <div> 这是商品列表页面 <p> <span>{{$route.params.goodsId}}</span> <span>{{$route.params.name}}</span> </p&原创 2018-11-24 21:45:34 · 889 阅读 · 1 评论 -
Vue router 路由嵌套 路由重定向 路由别名 router-link传参数
<template> <div> 这是商品列表页面 <router-link :to="{ name: 'title'}">标题</router-link> <router-link to="/goods/image">图片</router-link>原创 2018-11-24 22:12:44 · 451 阅读 · 0 评论 -
Vue 编程式导航
// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: 123 }})// 带查询参数,变成 /register?plan=privaterouter.push({ path: 'register', que...原创 2018-11-24 22:41:53 · 310 阅读 · 0 评论 -
Vue router 命名视图 命名路由
命名路由<template> <div> 这是商品列表页面 <router-link v-bind:to="{name: 'cart', params: {cartId: '123'}}">跳转到购物车页面</router-link> </div></template>命原创 2018-11-25 11:36:27 · 238 阅读 · 0 评论 -
Vue vue-resource 全局拦截器 Post、Get、Jsonp跨域请求、配置请求 全局路径配置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js&原创 2018-11-25 15:02:32 · 1317 阅读 · 0 评论 -
Vue axios全局拦截 get请求、post请求、配置请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"原创 2018-11-25 15:41:07 · 2307 阅读 · 1 评论 -
Vue static 静态资源路径 和 style问题
// Paths assetsRoot: path.resolve(__dirname, '../dist'), // 静态资源输出到二级目录下 assetsSubDirectory: 'static', // 静态资源cdn地址 assetsPublicPath: '/',引用的时候可直接,不用返回上一级去查找,因为编译输出后的 static...原创 2018-11-26 19:47:27 · 4162 阅读 · 0 评论 -
Vue 点击对应的元素改变class
<div class="filter stopPop" id="filter"> <dl class="filter-price"> <dt>Price:</dt> <dd v-on:click.stop="price原创 2018-11-26 21:07:13 · 3042 阅读 · 2 评论 -
vue报错:There are multiple modules with names that only differ in casing.
client?b35b:147 ./src/utils/edit3d/ServerCabinet.jsThere are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other ca...原创 2018-12-07 10:16:41 · 2259 阅读 · 0 评论 -
vue Vuex 使用 state getters、mutations、actions、modules
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用: <!DOCTYPE html><html lang="en">...原创 2018-12-16 21:08:43 · 807 阅读 · 0 评论 -
vue 禁止双向数据流动
<template> <div class="hello"> <Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter> <p>parent: {{num}}&am原创 2018-11-24 20:43:45 · 785 阅读 · 0 评论 -
Vue class 和 style 绑定
对象语法我们可以传给 v-bind:class 一个对象,以动态地切换 class:<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>和如下 data:data: { isActive: true, hasErr...原创 2018-11-24 17:15:43 · 119 阅读 · 0 评论 -
Vue2.0 页面缓存和不缓存的方法
vue2.0页面缓存和不缓存的方法1、在app中设置需要缓存的div<keep-alive>//缓存的页面 <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAliv...原创 2018-09-29 16:28:40 · 8995 阅读 · 0 评论 -
vue 生命周期 生命周期钩子的函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2018-07-31 09:45:10 · 285 阅读 · 0 评论 -
vue iview UI组件的标签报错 x-invalid-end-tag
在Vue框架中,首先在.eslintrc.js文件中添加一条自定义规则rules: { //..... 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }] }但是发现还是有错误[eslint-plugin-vue][vue/no-parsing-error]Parsing error: x-i...原创 2018-08-04 17:31:24 · 9186 阅读 · 0 评论 -
vue axios实现文件上传
input元素type改为file类型, accept限制指定的文件类型,multiple可以多传送文件<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @getFile="update($event)"/>FormData私有类对象,访问不到,可以通过原创 2018-08-17 21:58:51 · 4453 阅读 · 0 评论 -
vue 常用的父子组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信。在组件化系统构建中,组件间通信必不可少的。父组件--> 子组件父组件关键代码如下:<template> <Child :childMsg="allProjectIdAndName"></Child></template><script> expor..原创 2018-08-20 16:18:49 · 331 阅读 · 0 评论 -
vue tab切换功能
<template> <div id="app"> <div class="radio-wrap"> <div class="radio-group" v-model="tabView"> <span v-for="(tab ,index) in ta原创 2018-09-06 16:32:37 · 1321 阅读 · 3 评论 -
vue 路由跳转传参数
router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', ...原创 2018-09-23 16:52:13 · 443 阅读 · 0 评论 -
Vue2.0 路由开启 keep-alive 时需要注意的地方
Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好。废话不多说直接上码,一般是在 src/App.vue 设置开启 keep-alive 实现页面数据缓存:...原创 2018-10-11 09:52:35 · 421 阅读 · 0 评论 -
vue 给自定义组件绑定原生事件
给组件绑定原生的事件很简单,只要在click后面加一个native就可以了。<div id="app"> <child @click.native="handleClick"></child></div>原创 2018-10-13 16:32:17 · 823 阅读 · 0 评论 -
vue watch的详细用法
在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: '' }, watch: { cityName(newName, oldN...原创 2019-08-20 11:02:56 · 2655 阅读 · 0 评论 -
vue watch一个对象或数组时,newvalue和oldvalue一样
在官方的代码改写了一下,当深度watch一个对象时,newval和oldval的值为什么是相等的呢?var vm = new Vue({ data: { a: 1, c:{ c1:1, c2:2 } }, watch: { 'a': function (val, oldVal) { ...原创 2018-10-14 13:53:29 · 14558 阅读 · 0 评论 -
vue axios 拦截器配置与封装
一、安装1、 利用npm安装npm install axios --save--save:安装在生产环境二、例子要想统一处理所有http请求和响应,就得用上 axios 的拦截器。axios.jsimport axios from 'axios'// @ == srcimport baseUrl from '@/config'/** 增加请求拦截器*/axi...原创 2018-08-04 13:07:04 · 3872 阅读 · 0 评论