vue
文章平均质量分 92
Chestnut*
这个作者很懒,什么都没留下…
展开
-
el-input 实现模糊查询
<el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect" > <el-button>搜索</el-button></el-auto原创 2020-10-09 16:02:53 · 2951 阅读 · 0 评论 -
Vue中下载 execl 表格
在项目下载 execl 表格的功能实现逻辑:前端请求后端接口,后端返回 execl 文件流,前端对文件流进行下载操作;前端封装请求一定要设置responseType:‘blob’;封装请求:export function getDownloadTable(data){ return { url:'请求接口', method:'POST', responseType:'blob', params:data }}组件中请求接口:methods:{ // 点击下载表格事件原创 2020-09-28 16:36:36 · 474 阅读 · 0 评论 -
Vue2和Vue3开发组件有什么区别(个人学习记录)
Vue2和Vue3开发组件有什么区别记得收藏哦~转载 2020-09-28 10:36:45 · 199 阅读 · 0 评论 -
vue路由拦截
通常在项目中,我们需要用户登录才能使用户正常访问vue 中的beforeEach 对路由做拦截。如未登录跳转登陆页面,登录成功的正常访问const router = new Router({}) //正常配置路径router.beforeEach((to, from, next) => { // 通过 js-cookie 设置、保存、删除 cookie // 判断是否登陆 let token = Cookies.get('token'); var nowTime = new原创 2020-08-13 15:07:40 · 125 阅读 · 0 评论 -
Vue上传文件到 oss
VUE项目中遇到将文件上传到阿里 oss中1.安装 ali-ossnpn install ali-oss --save2.在utils 文件下创建 client.js//Client.js const OSS = require('ali-oss');export default function Client(data) { //后台返回数据 return new OSS({ region: data.region, accessKeyId:原创 2020-06-19 14:27:09 · 1455 阅读 · 1 评论 -
记录一次vue-cli3踩坑
解决vue-cli3不停请求 /sockjs-node/info?t= 问题如果你的项目没有用到 sockjs,那么就找到报错的地方,将其注释掉即可。路径在/node_modules/sockjs-client/dist/sockjs.js,第1606行: // try { // self.xhr.send(payload); // } catch (e) { // self.emit('finish', 0, ''); // self._cleanup(false);转载 2020-05-21 15:10:20 · 374 阅读 · 0 评论 -
Axios 响应拦截
Axios 响应拦截 methods: { sendAjax() { // 添加请求拦截器 // 简单做配置 this.$axios.interceptors.request.use(config => { // 请求之前做的内...原创 2019-10-12 11:34:41 · 395 阅读 · 0 评论 -
Vue中 全局守卫
Vue 全局守卫使用全局守卫简单举个例子 实现用户是否需要登陆 <div id="app"> <router-link to="home">首页</router-link> <router-link to="blog">我的博客</router-link> <!-- <a h...原创 2019-05-12 17:34:45 · 868 阅读 · 0 评论 -
Vue 获取DOM元素 ,给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象ref属性值不能重名 Vue.component('subCom',{ template:`<div class="subCom"></div>` }) var App = { temp...原创 2019-05-12 17:23:58 · 4632 阅读 · 0 评论 -
Vue 生命周期
Vue 生命周期举了个例子,可以在控制台看输出的结果,就一目了然了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2019-05-12 17:18:00 · 92 阅读 · 0 评论 -
Vue 计算属性
Vue 计算属性(computed)简单实现利用计算属性的方法实现点击切换音频 <div id="app"> <audio :src="getCurrentSrc" autoplay controls></audio> <ul> <li v-for="(item,index) in...原创 2019-05-12 17:14:47 · 233 阅读 · 0 评论 -
Vue Watch监听
Vue Watch监听watch监听单个属性基本数据类型是简单监视,复杂的数据类型深度监视 <div id="app"> <input type="text" v-model="msg"> <h3>{{msg}}</h3> <button @click="arr[0].name='小板栗'">点击</bu...原创 2019-05-12 17:11:00 · 191 阅读 · 0 评论 -
Axios
AxiosAxios是基于Promise的HTTP请求,可以用在浏览器和node.js中。Features1.从浏览器中创建XMLHttpRequests2.从node.js中创建http请求3.支持Promise API4.拦截请求和相应5.转换请求数据和响应数据6.取消请求7.自动转换JSON数据8.客户端支持防御XSRFAxios官方API拦截器在请求或响应被 th...原创 2019-05-14 10:12:03 · 87 阅读 · 0 评论 -
Vue 过滤器的使用
Vue 过滤器的使用作用:为页面中数据进行添油加醋的功能有两种:1.局部过滤器 2.全局过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2019-05-04 21:52:07 · 154 阅读 · 0 评论 -
Vue父子组件之间的通信
Vue父子组件之间的通信创建两个全局组件1.Parent 2. Child父组件往子组件通信现在父组件中绑定自定义属性在子组件中使用props接收父组件传递的数据在子组件中可以任意使用Vue.component('Child',{ template:`<div> <p>我是子组件</p> <input type="...原创 2019-05-03 14:37:46 · 110 阅读 · 0 评论 -
Vue全局组件的创建
Vue全局组件的创建//全局组件Vue.component("App",{ data(){ return { msg:"我是全局组件" } }, template:`<div>{{msg}}</div>`})new Vue({ el:"#app", components:{ App }, template:`<App>&...原创 2019-05-03 14:13:04 · 192 阅读 · 0 评论 -
Vue指令系统
Vue指令系统1: v-test: innerText2: v-html: innerHTML3: v-if: 数据属性对应的值,如果为假不渲染,如果为真则渲染 appendChild()、removeChild();4:v-show: 控制DOM元素显示隐藏,display:none|block;项目中如果频繁使用切换,建议使用v-show, 如果运行条件很少改变,则使用v-if,...原创 2019-05-02 22:19:32 · 83 阅读 · 0 评论