![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue 相关知识
记录工作中的点滴,铸就成长。
微微暖风
这个作者很懒,什么都没留下…
展开
-
ES6-ES12常用语法汇总(下篇)
includes传入元素,如果数组中能找到此元素,则返回true,否则返回falseconst includeArr = [1,2,3,'小明','科比']const isKobe = includeArr.includes('科比')console.log(iskobe) // true跟indexOf很像,但还是有区别的const arr = [1,2,NaN]console.log(arr.indexOf(NaN)) // -1 indexOf找不到NaNconsole.lo.原创 2021-09-02 21:42:23 · 494 阅读 · 0 评论 -
vue 学习总结笔记(二)
一、事件处理1.监听事件: v-on指令监听DOM事件2.事件处理方法 a.在触发时运行一些简单的javascript代码 <button v-on:click="counter += 1">Add 1</button> b.接收一个需要调用的方法名称 <button v-on:click="greet...原创 2018-06-21 10:43:19 · 215 阅读 · 0 评论 -
vue 相关面试题总结
伴随着互联网的寒冬,2019年的金三银四随之到来。相信vue技术栈的小伙伴们,有的已经开始踏上找工作的征程中,结合自己的所学和理解,想把有关vue的面试题做下汇总,以此来记录自己的成长并且希望能给需要的小伙们一些帮助。谈谈你对MVVM开发模式的理解MVVM分为Model、View、ViewModel三者;Model代表数据模式,数据和业务逻辑都在Model层中定义;View代表UI...原创 2019-02-22 18:07:18 · 4126 阅读 · 0 评论 -
vue ali-oss 视频播放、下载封装组件
上面文章 https://blog.csdn.net/cxz792116/article/details/96906166 讲到了 ali-oss 视频上传组件的封装单如果想播放或者利用浏览器下载,还需要进一步的调用ali-oss 的接口文档,下面就开始这方面的介绍。1、获取 oss-ali , client 对象参数import OSS from "ali-oss" // 说明,直...原创 2019-07-27 10:30:56 · 1477 阅读 · 1 评论 -
vue 中 axios 的全局封装
import axios from 'axios';import qs from 'qs';import { Message } from 'element-ui';const proxyserver = 'proxyserver';// axios 配置proxy// axios.defaults.timeout = 10000;axios.defaults.headers.pos...原创 2018-08-17 13:47:21 · 172 阅读 · 0 评论 -
echarts 在 vue 随浏览器窗口改变响应
代码基于element-ui框架<template> <el-row :gutter="40"> <el-col :span="9"> <el-card class="box-card"> <div slot="header" class="cle原创 2018-09-07 17:30:24 · 1555 阅读 · 0 评论 -
vue 学习总结笔记(五)
一、编写可复用的组件对于需要复用的组件,应当定义一个清晰的公开接口,同时也不需要对其外层数据做出任何假设。vue组件的api来自三个部分----prop、事件、插槽:a.prop 允许外部环境传递数据给组件。b.事件 允许从组件内部触发外部环境的副作用。c.插槽 允许外部环境将额外的内容组合在组件中。使用v-bind和v-on的简洁语法,模板的意图会更清晰。<...原创 2018-06-22 15:38:55 · 272 阅读 · 0 评论 -
vue-cli打包 vendor文件 或app.js文件 过大
使用vue-cli脚手架打包后(UI使用的是Element-UI),发现vendor.js 文件很大,将近5M之多。文件过大会导致浏览器加载过慢,及其影响用户的体验。下面提供几种方式来解决此问题把不常改变的库放到index.html中,通过cdn引入比如中间会发现bootcss提供的cdn并不稳定,老是访问不了导致项目崩溃,这里推荐两个比较稳定的CDN jsdelivr 和 unpk...原创 2019-10-15 14:38:55 · 1579 阅读 · 0 评论 -
vue 学习总结笔记(三)
一、如何使用组件 1.全局注册一个组件Vue.component('my-component',{ template:'<div>这是一个组件</div>'});// 注: 全局组件在任何实例中都可以使用。要在实例中使用全局组件,必须在初始化根实例之前注册组件,否则会报错。2.注册一个局部组件/**html**/<div id='a...原创 2018-06-21 14:44:36 · 244 阅读 · 0 评论 -
vue ali-oss 视频上传封装组件
注册阿里云oss 账号 地址(https://www.aliyun.com/)创建Bucket3.设置Bucket (允许跨域)4. 生产accessKeyId 和 accessKeySecret5. 创建vue项目,并安装ali-ossnpm install ali-oss --save 或者 cnpm install ali-oss --save 6.单文件上传...原创 2019-07-22 22:01:48 · 3974 阅读 · 3 评论 -
vue 开发中的技巧
1. Modal框的控制一个页面种通常会存在很多个不同功能的弹框,若是每一个弹框都设置一个对应的变量来控制其显示,则会导致变量数量比较冗余和命名困难,可以使用一个变量来控制同一页面中的所有Modal弹框的展示,比如某个页面中存在三个Modal弹框// bad// 每一个数据控制对应的Modal展示与隐藏new Vue({ data() { return { modal1: false, modal2: false,原创 2020-06-04 15:30:46 · 365 阅读 · 0 评论 -
vue 学习笔记(七)
1、初始渲染的过渡 // 可以通过appear 特性设置节点在初始渲染的过渡。和进入/离开过渡一样,同样也可以自定义css类名,自定义钩子函数<style> .slide-fade-enter-active { transition: all .3s ease; } .sli...原创 2018-07-02 14:49:21 · 329 阅读 · 0 评论 -
vue 学习总结笔记(六)
vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。包括以下工具:a、在css过渡和动画中自动应用classb、可以配合使用第三方css动画库,如 Animate.cssc、在过渡钩子函数中使用javascript直接操作DOMd、可以配合使用第三方javascript动画库,如 velocity.jsvue提供了transition的封装组件,下列情形中,可以给任...原创 2018-06-30 14:22:10 · 292 阅读 · 1 评论 -
vue 图片放大左右切换
html部分<div id="app"> <div class="imgList"> <img :src="value" v-for="(value,index) in imgList" :key="value" @click="bigImg(index)"> </div> <div class="imgMask" v-if="原创 2017-08-30 09:52:36 · 9908 阅读 · 0 评论 -
vue 学习总结笔记(一)
VUE学习及应用也有一年多了,但一直没能系统的总结过。多少有些遗憾。正好赶上找工作,就趁此巩固,总结下吧。一,VUE生命周期函数beforeCreate , created // 创建前, 创建完成beforeMount , mounted // 挂载前, 挂载完成beforeUpdate , updated ...原创 2018-06-20 16:07:24 · 301 阅读 · 0 评论 -
vue 三级控制
1、html代码<div id="app" class="container"> <div class="heade-box"> <div class="header"> <img src="images/logo.png" height="110" width="312"> <ul class=原创 2017-11-10 10:17:25 · 482 阅读 · 0 评论 -
vue 刷新或者加载闪烁
1、vue中绑定数据的时候,渲染页面时会出现变量闪烁 div id="app"> h2>{{message}}h2>div>//在页面加载的时候会看到 {{message}} 几秒过后才会渲染数据。2、解决方案// 方法一h2 v-html="{{message}}">h2> //这样就不出现闪烁的问题;// 方法二h2 v-cloak>{{messa原创 2018-01-18 14:42:40 · 2352 阅读 · 0 评论 -
vue 公共底部
1、公共底部组件放到一个js文件中,代码如下Vue.component('v-footer', { props: ['active'], template: '<ul class="v-footer">\ <li @click="goto(0)"><i :class="[active==0 ? \'icon-shouye-1\':\'icon-shouye\',\'原创 2017-09-12 17:34:45 · 4733 阅读 · 0 评论 -
vue 点击不在区域 隐藏
1、原生写法// html<div id="box" style="width:110px;height:110px;background-color:red"></div>//jsdocument.addEventListener('click',(e)=>{ alert('zhixing') var box = ...原创 2018-03-01 17:41:25 · 4307 阅读 · 4 评论 -
vue 资料合集
UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件Vux ★7503 - 基于Vue和WeUI的组件库iview ★5801 - 基于 Vuejs 的开源 UI 组件库mint-ui ★5517 - Vue 2的移动UI元素vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用muse...原创 2018-07-03 10:35:16 · 566 阅读 · 0 评论 -
vue 学习总结笔记(四)
一、自定义事件 父组件通过prop给子组件传递数据,子组件则通过自定义事件和父组件通信。1.使用v-on绑定自定义事件 每个vue实例都实现了事件接口,即 a.使用$on(eventName) 监听事件 b.使用$emit(eventName,optionalPayload)触发事件父组件可以在使用子组件的地方直接使用v-on来监听子组件出触发的事件,不能使用$...原创 2018-06-22 14:05:55 · 351 阅读 · 0 评论