Gomeer的博客

解决此问题，发博客记录一下（happy ending~）富文本框项目中是采用了wangeditor，具体引用可看wangeditor官方文档。 刚开始一直纠结于如何获取文本框中光标的位置，找了网上很多的例子，但在wangeditor中都不能适用。深度扒了下wangeditor文档，没找到对应方法。在官方文档搜索栏死马当活马医的搜了下“insertHTML””，还真有这个方法TAT。一行代码搞定~html<div id='wangeditor'> <di...

在style有scoped属性时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如.conBox /deep/ .el-input__inner{ padding:0 10px;}如果/deep/报错，可采用::v-deep.conBox ::v-deep .el-input__inner{ padding:0 10px;}...

入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为bundles的文件中，我们将在下一章节详细讨论这个过程。可以通过在webpack 配置中配置entry属性，来指定一个入口起点（或多个入口起点）。默认值为./src。接下来我们看一个entry配置的最简单例子：webpack.co...

什么是跨域  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子：协议跨域http://a.baidu.com访问https://a.baidu.com；#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80；#域名跨域http://a.baidu.com访问http://b.baidu.com；代理服务器实现前端跨域请求后端地址1.config

在下面的例子中可以看出，普通函数的this指向的就是Vue的实例，this.message可以获取到data中的值，而箭头函数的this指向了window，不能获取到值<script> new Vue({ el : '#app', data : { message : "hello vue!" }, ...

注意调取导入的请求Content-Type为multipart/form-datahtml代码注意input的type属性为file，input的id和label的for属性相同<input style="display:none;" id="up" ref="file" type="file" class="form-control" @change="tap"> ...

封装的axios请求const axiosInstance = axios.create({ baseURL: window.g.URL, responseType: 'json', timeout: 50000});export function fetch(url, params,type){ let promise = new Promise((r...

未添加图片时样式图如下添加图片后，多了编辑和查看的按钮html代码中分两个部分：无图片（如图1）/原本存在图片（图2）。根据绑定的firImg判断是否有图片<el-form-item label="产品图标："> <span v-if="firImg" class="spanImg"> <img v-if="firImg...

token:token的意思是“令牌”，是用户身份的验证方式，最简单的token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名，由token的前几位+盐以哈希算法压缩成一定长的十六进制字符串，可以防止恶意第三方拼接token请求服务器)。还可以把不变的参数也放进token，避免多次查库。token在服务器端并不保存，当服务器端收到token时，使用服务器端的特...

进入模块后的效果图列表html代码这里需要注意的是el-table一定要有ref属性，比如ref="table" <div style="padding:0 1%;"> <el-table :data="lists" v-loading="loading" ref="table" tooltip-effect="dark" @se...

设置height: 100%;是无效的，在chrome的Elements中发现height仍然是0px.设置高度100%时，div的高度会等同于其父元素的高度。而上面中id为app的div（vue挂载的div）的父节点是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然...

<input class="search-ipt" type="search" autocomplete="off" name="search" value="" @focus="inFocus()" @blur="inBlur()" v-model="val" @keydown.enter="search()"><ul class="search-result clearf...

子组件子组件通过$emit触发父组件中的自定义函数，第一个值为自定义函数名，后面的参数是向父组件传的值<van-button @click="emitGetList" type="info">搜索</van-button>emitGetList(){ this.$emit('refreshList',this.cityValue...

Parent.vue<template id=""> <child @refreshList="onRefresList"></child></template><script> export default { components: { Child },...

使用@sort-change监听排序变化,设置sortable='custom'<el-table :data="tableData" @sort-change='sortChange'> <el-table-column prop="startDate" sortable='custom' label="出票日期"></el-table-column&...

使用.native修饰符，（native修饰符的作用：你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on的修饰符.native，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，但对于普通的HTML标签是没作用的）html<el-radio-group v-model="selects.xc"> <el-radio-bu...

html 在需要处理的列上加formatter自定义函数，如下 对票号进行后8位截取<el-table ref="multipleTable" :data="tableData" :height="height-165" @selection-change="handleSelectionChange"> <el-table-column label="票号后8位" ...

全选按钮<th style="width:5%;text-align: center"> 全选 <input type="checkbox" @click="checkAll($event)" name="" id="selectAll"></th>单选按钮<td class="fatherTd"> <input ty...

src根目录下创建config/axios.js1.引入axios，vue，routerimport axios from 'axios'import router from '../router'import Vue from 'vue';2.创建实例使用自定义配置创建axios的新实例const axiosInstance = axios.create({ ...

每次路由跳转时，若无token则重定向至登陆页router.beforeEach(({name}, from, next) => { // 获取 JWT Token if (localStorage.getItem('JWT_TOKEN')) { // 如果用户在login页面 if (name === 'login') { next('/')...

何为动态路由？能够提供参数的路由即为动态路由我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。例如：图书商品：   /goods?type=book   汽车商品：   /goods?type=car     美食商品：   /goods?type=food路由地址相同，都是...

vue 监听路由变化immediate:true   //在组件初始化的时候也会执行handler处理函数$route在这里不是函数，是对象handle：当路由发生变化执行的操作str中保存了路由，根据不同的路由，发起axios请求，对页面进行渲染watch:{ $route:{ handler(){ console.log(t...

需求：     首页：   /index     订单：   /order    美食：   /food         美食中有：                 蛋糕：   /food/cake                                                              大米：   /food/rice           ...

只要加了全局守卫，每次路由的跳转都要经过全局守卫，一般是用的都是前置守卫全局导航守卫——前置守卫找到router路由对象，调用router对象上的beforeEach方法（强调一下，全局守卫不要写在钩子函数中，踩了坑深有体会）router.beforeEach((to,from,next)=&gt;{})to 我们要跳转的路由from 表示我们从哪个路由跳转过来next...

售票处  指登录动物园  指需要登录才能进入的页面公园      指不需要登录就能进入的页面如果没有在售票买票，可以进入公园，但是如果要进入动物园，将直接跳转到售票处5个路由组件 （Tiger是Zoo的子路由）Ticket中点击btn，往localStorage中添加一个属性，用来判断是否买票const Index={ template:` &lt;div&gt; ...

cd进入cli创建的项目文件夹npm install axios 在src下创建axios.js，在axios.js下配置环境import axios from 'axios'; //引入axiosaxios.defaults.baseURL='http://localhost:8080/api' //配置默认路径（可选）export default axios //导出...

1.设置前端路由跳转router.beforeEach((to, from, next) =&gt; { if (to.matched.some(route =&gt; route.meta.auth)) { // 判断token是否存在，如果存在则正常跳转 if (localStorage.getItem('token')) { next() } e...

vuejs的核心是一个允许使用简洁的模板语法声明式的将数据渲染进dom元素的系统1.基础构建&lt;div id="app"&gt;&lt;/div&gt; //相当于模板&lt;script type="text/javascript" src="js/vue.js" &gt;&lt;/script&gt; //vuejs引入//声明数据&lt;script&amp

用vue写简单的轮播图直接上代码css *{ margin: 0; padding: 0; } ul,li{ list-style: none; } .banner{ width: 500px; margin: 0 auto; position: relative; border: 1px solid black; overflow: hidden;...

解决前端接口和后端接口跨域问题比较简单假设后端接口是是http://localhost:3000/api在前端文件的根目录下创建vue.config.js(代理服务器)vue.config.js:module.exports={ devServer:{ proxy:"http://localhost:3000" }}注意：如果之前在axios...

创建需要引用的reset.css文件在public下创建css文件夹，在创建好的css文件夹下创建reset.css，按需求写reset.css以下有两种方法引用1.在main.js下引入import '../public/css/reset.css'2.在public中的index.html中通过<link rel="stylesheet" href="./css/...

用vue组件封装todolistcssbody {margin:0;padding:0;font-size:16px;background: #CDCDCD;} header {height:50px;background:#333;background:rgba(47,47,47,0.98);} section{margin:0 auto;} ...

axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF1.axios通常在vue中作为...

1.最简单的一种是使用 router-link在document中，router-link会自动转化为a标签，使用tag属性，可以转化为其他标签，比如：tag='span'通过 to=“要跳转的路由” 设置要跳转的路由地址注意：如果需要传参数，to的前面需要加“：”，改为动态路由&lt;router-link tag='span' :to=" '/v1/' + id "&gt;路...

提示报错信息handlers[i].call is not a function.....虽然提示报错了功能还是目前来说还是可以使用，但是给后面留下来了非常大的风险性那么首先你得知道这个提示是什么原因引起的~从报错的handlers[i].call 入手查找原因--这个错误是 调用相关的生命周期钩子函数引起来的错误生命周期钩子函数---那么有了方向我们去找相应报错页面查看你...

前提是安装了node 和 webpack安装webpack: npm install webpack webpack-cli -g通过webpack -v查看版本号是否安装成功全局安装vue-cli，在cmd中输入命令:npm i -g @vue/cli@3.0.0-beta.6安装成功后,输入vue -V   注意是大写的V 出现版本号，说明安装成功通过vue cr...

watch的作用1.watch可以用来监测Vue实例上的数据变动。<template> <div> <el-input v-model="demo"></el-input> {{value}} </div></template><script> export default...

SPA （单页应用程序）       只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。   浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。特点速度：更好的用户体验，让用户在...