vue
布拉格的爱
哪有什么岁月静好,只不过是有人替你负重前行
展开
-
vue 数组转化为树
//数组转化为树arraytotree(arr) {var top = [], sub = [], tempObj = {}; arr.forEach(function (item) { if (item.parentId === 0) { // 顶级分类 top.push(item) } else { sub.push(item) // 其他分类 } item.children = []; // 默然添加child原创 2021-07-04 16:02:25 · 738 阅读 · 0 评论 -
vue el-upload 文件上传
el-upload 用到的一些参数参数 说明 类型 可选值 默认值 action 必选参数,上传的地址 string — — headers 设置上传的请求头部 object — — multiple 是否支持多选文件 boolean — — data 上传时附带的额外参数 object — — name 上传的文件字段名 string —原创 2021-04-30 13:58:30 · 812 阅读 · 0 评论 -
Vue中ref和$refs的介绍以及使用方法示例
一、在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。二、ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例通俗的讲,ref特性就是为元素或子组...原创 2021-04-30 11:04:24 · 765 阅读 · 0 评论 -
vue组件中数据传递 components props
组件不仅仅是要把模板的内容进行复用,更重要的是组件间的通信。通常父组件的模板中包含子组件,父组件要正向的向子组件传递数据或者参数,子组件接收到后根据参数的不同来进行对应的渲染。这个正向的数据传递在vue组件中就是通过props来实现的。子组件<template> <div> {{title}} </div></template><script> export default { props: ['tit原创 2020-12-30 23:36:33 · 1687 阅读 · 1 评论 -
vue路由中$route与$router,path与name,params与query的区别梳理
一、r o u t e r 和 router和router和route的区别$router : 是路由操作对象,只写对象r o u t e : 路 由 信 息 对 象 , 只 读 对 象 栗 子 : / / route : 路由信息对象,只读对象 栗子: //route:路由信息对象,只读对象栗子://router操作 路由跳转this.$router.push({ name:'hello', params:{ name:'word',转载 2020-12-29 22:11:00 · 2778 阅读 · 0 评论 -
Vuex中mapState的用法
Vuex中mapState的用法 index.jsimport Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations'import actions from './action'import getters from './getters'Vue.use(Vuex)const state = { userInfo: { phone: 111 }, //用户信息 orde..转载 2020-12-27 22:06:58 · 935 阅读 · 0 评论 -
VUE中的拦截器
import axios from 'axios'import { Notification, MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'import errorCode from '@/utils/errorCode'axios.defaults.headers['Content-Type'] = 'application/j.原创 2020-12-27 21:20:20 · 1382 阅读 · 1 评论 -
vue的v-model原理简述
一,v-model是什么v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。二,为什么使用v-modelv-model作为双向绑定指令也是vue两大核心功能之一,使用非常方便,提高前端开发效率。在view层,model层相互需要数据交互,即可使用v-model。三,v-model的原理简单描述v-model主要提供了两个功能,view层输入值影响data的属性值,data属性值发生改变会转载 2020-10-11 15:42:25 · 25112 阅读 · 1 评论 -
e.target.value理解
每次触发DOM事件时会产生一个事件对象(也称event对象),此处的参数e接收事件对象。而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示该DOM元素,然后在获取其相应的属性值。$('.target1').change(function(e) { $("#result").html(e.target.value) });e.target就等价于$('target1')故e.target.value就等价于$(原创 2020-10-11 15:36:19 · 9216 阅读 · 0 评论 -
vue请求数据放在created好还是mounted里好
vue请求数据放在created好还是mounted里好建议放在created里created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。如果在mounted钩子函数中请求数据可能导致页面闪屏问题其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了...原创 2020-10-10 16:17:44 · 2931 阅读 · 0 评论 -
vue中“:”、“.”、“@”意义
“:” 是指令 “v-bind”的缩写,“@”是指令“v-on”的缩写;“.”是修饰符。详细如下v-bind指令可以用于响应式地更新 HTML 特性: <divid="app-2"> <spanv-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! ...转载 2020-10-10 16:16:37 · 1801 阅读 · 0 评论 -
vue 路由跳转四种方式 (带参数)
1.router-link1. 不带参数<router-link :to="{name:'home'}"><router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。2.带参数...原创 2019-10-20 02:32:32 · 1185 阅读 · 0 评论 -
es6 import
index.js:import * as api from './api';export default api;api.js:import axios from 'axios';let base = '';export const requestLogin = params => { return axios.post(`${base}/login`, params)...原创 2019-10-20 02:16:41 · 701 阅读 · 0 评论 -
Vue.js在页面加载时执行某个方法
vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted<script> import { requestUserrList } from '../api/api_user'; export default { data() { return { name:"", tableDat...原创 2019-10-20 00:29:02 · 5863 阅读 · 0 评论 -
vue 拦截器使用
一,背景,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSR二,场景 每次都要在请求中加入,toke...原创 2019-03-26 21:43:04 · 19556 阅读 · 0 评论 -
vue 文件目录结构详解
基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、scss 等最新语言特性。项目包含:基础库: vue.js、vue-router、vuex、whatwg-fetch编译/打包工具:webpack、babel、node-sass单元测试工具:karma、mocha、sinon-chai本地服务器:express目录结构├── R...转载 2019-03-26 23:19:25 · 1315 阅读 · 0 评论 -
Vue开发工具
vscodeVSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。vscode安装进入vscode官网(https://code.visualstudio.com/Download)image双击下载的安装包,进入...转载 2019-03-27 20:10:42 · 511 阅读 · 0 评论 -
vue:路由实现原理
应用最显著特点之一就是采用的前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:利用URL中的hash("#"); 利用History interface在HTML5中新增的方法;vue-router是Vue.js框架的路由插件,它是通过mode这一参数控制路由的实现模...转载 2019-04-09 20:50:56 · 1731 阅读 · 0 评论 -
如何引用js 中的方法
一,api_user.jsimport axios from 'axios';axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';let base = 'http://127.0.0.1:8081/';export const requestLogin = params ...原创 2019-04-09 21:02:51 · 1088 阅读 · 0 评论 -
使用axios处理post请求时,出现的问题解决
默认情况下: axios.post(url, params).then(res => res.data);当url是远程接口链接时,会报404的错误:Uncaught (in promise) Error: Request failed with status code 404我们需要实例化一个新的axios,并且设置他的消息头为’content-type’: ‘applicat...转载 2019-03-23 00:00:39 · 5568 阅读 · 0 评论