![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue框架
小楼昨夜那事
世界的温柔,是晚来的善意和干净的你。
展开
-
Vue中图片转base64格式
1.首先在main.js中写一个函数并将函数挂载在全局变量中// 图片转base64格式 挂载在全局Vue.prototype.$base64Img = (e) => { return new Promise(function (resolve, reject) { // 使用Promise进行异步处理 let fileSize = 0 const fileMaxSize = 1024 // 设置图片最大为 1M fileSize = e.target.files[原创 2021-01-12 16:58:35 · 2444 阅读 · 0 评论 -
vue中监听移动端滑动事件
第一步 下载kim-vue-touch包npm i kim-vue-touch -Dcnpm i kim-vue-touch -D第二步再main.js全局引入import vueTouch from 'kim-vue-touch'Vue.use(vueTouch)第三步 再vue组件中使用kim-vue-touch提供了点击、长按、左滑、右滑、上滑、下滑等事件, 当你不需要传参时可以通过v-tap="touch"的形式调用方法, 当你需要传参时v-tap="(e)=&.原创 2021-01-06 11:14:19 · 2180 阅读 · 1 评论 -
如何在Vue中将数据导出成Excel
如何在Vue中将数据导出成Excel1.下载xlsx插件$ npm install xlsx $ npm i xlsx -S2.在组件中调用该插件// 在调用的组件中引入(全局引入在这里无法调用)import XLSX from 'xlsx'data () { return { // 列表数据 tableData: [], // 导出Excel数据 data: [ ['id', 'name', 'value'原创 2020-11-12 19:18:53 · 256 阅读 · 0 评论 -
Vue面试题(更)
一、对于MVVM的理解?MVVM是Model-View-ViewModel的缩写。Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View代表UI组件,他负责将数据模型转化成UI展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View和Model的对象,连接Model和View。在MVVM架构下,VIew和Model之间并没有直接的联系,而是通过ViewModel进行交互,Model和ViewModel之间的交互是双向的,因原创 2020-11-02 09:52:28 · 271 阅读 · 1 评论 -
vue中监听页面滚动事件
页面监听滚动首先在data中return一个scrollTop数据用来存储滚动的高度其次在methods中定义一个方法用来进行你需要进行的操作接着就是在mounted中绑定事件于window上,这里只能使用事件监听addEventListener的方法最后就是离开这个页面时,销毁事件监听removeEventListener,因为如果我们不进行销毁的话,在离开当前页面会影响其他的页面操作代码如下;<script>export default { data () {原创 2020-10-25 17:53:32 · 1396 阅读 · 0 评论 -
Vue-Router 过度/切换动效
过渡动效<router-view>是基本的动态组件,所以我们可以用<transition>组件给它添加一些过渡效果:<transition> <router-view></router-view></transition>Transition 的所有功能在这里同样适用。单个路由的过渡上面的用法会给所有的路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路有组件内是由<tr...原创 2020-10-18 17:53:22 · 779 阅读 · 1 评论 -
Vue Router 导航守卫 /登录鉴权
Vue Router 高级导航守卫导航表示路由发生改变正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。全局前置守卫你可以使用router.beforeEach注册一个全局前置守卫:const router = ...原创 2020-10-18 16:53:39 · 578 阅读 · 0 评论 -
Vue路由基础
路由实现spa应用(singlepageapplication)优点:1.、整个应用只有一个html文件,所以的路由对应页面都是由组件来实现2、在切换路由时不需要重新加载页面只需要切换组件即可(切换效率较高)缺点:因为代码都在js中,html源码基本看不到内容,seo爬虫爬取的时html源码,不会爬取js中的内容对于seo不友好相对应的是(mpamultiplepageapplication多页面应用)路由基础配置语法如下co...原创 2020-10-14 14:57:35 · 160 阅读 · 0 评论 -
Vue中使用axios请求Ajax
Vue中使用aniox请求Ajaxaxios 是一个 封装好的 第三方ajax请求的库 特点:支持restfulapi 支持promise 解决回到地狱 支持ajax请求拦截get请求语法如下(不携带参数)axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{ //成功回调}).catch(err=>{ // 失败回调})<...原创 2020-10-13 20:14:53 · 235 阅读 · 0 评论 -
Vue中利用fetch请求ajax
Vue中利用fetch请求ajax我们来写一个demo,请求URl:https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=9532407中的数据;首先新建一个实例,在实例中写一个空的数组用于存储请求回来的json数据,方便将数据渲染到页面上;接下来在methods中写一个方法,在方法中定义一个请求函数fetch,fetch语法如下/* fet原创 2020-10-13 19:38:52 · 455 阅读 · 0 评论 -
组件生命周期详解
Vue生命周期图示原创 2020-10-12 15:01:24 · 303 阅读 · 0 评论 -
Vue mixin混入
基础混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。首先定义混入对象,再将混入对象挂载到自定义组件上,从而实现Vue组件中的复用功能<body> <div id="app"> <home></home> </div></body><script>/原创 2020-10-11 15:50:15 · 137 阅读 · 0 评论 -
Vue插槽
插槽利用<slot>标签可以实现组件在不同的父组件中使用有不同的html结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...原创 2020-10-10 10:50:14 · 108 阅读 · 1 评论 -
Vue组件多种通信方式
组件间关系组件间互相嵌套使用形成大概以下关系父子兄弟祖先后代组件分类容器组件(父组件)UI组件(子组件)状态提升(数据):一个容器组件中可以使用多个UI组件应该将UI组件需要用到的数据都提升到容器组件中管理(只负责展示数据和收集数据不做逻辑处理,逻辑应该在容器组件中处理)组件通信父-->子通信<body> <div id="app"> <home></home> &l...原创 2020-10-09 21:03:02 · 98 阅读 · 0 评论 -
Vue组件基础
这里有一个 Vue 组件的示例:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})组件是可复用的 Vu转载 2020-10-09 08:47:13 · 227 阅读 · 0 评论