分类：vue

2020
11-25

Vue组件生命周期运行原理解析

Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。beforeCreate(创建前)在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el和data并未初始化，因此无法访问methods，data，computed等上的方法和数据。created(创建后）实例已经创建完成之后被调用... 继续阅读 >
2020
11-25

vue element-ul实现展开和收起功能的实例代码

vue element-ul实现展开和收起功能的实例代码 实现效果如下： 需求：由于后台搜索选项有很多，影响页面美观，所以一进来要隐藏一部分搜索项，只保留1行，点击【展开搜索】按钮的时候才显示全部，点击【收起搜索】按钮又收起部分，保留1行。需求分析：由于不太好控制行数，因为不同屏幕尺寸展示的1行的内容并不相同（不考虑移动端），所以考虑用显示高度来控制。解决思路：所以这里通过控制搜索区域的高度来实现展开和收起搜索功能。页面一进来是收起搜索状态，控制搜索区... 继续阅读 >
2020
11-25

在Vue中使用mockjs代码实例

在Vue中使用mockjs代码实例 前言前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回，此时需要使用到mockjs。安装npminstallmockjs--save-dev目录结构配置1、api下的config.js：配置axios的拦截处理importaxiosfrom'axios'//创建一个axios实例constservice=axios.create({//请求超时配置timeout:30... 继续阅读 >
2020
11-25

Vue使用Element实现增删改查+打包的步骤

在我们进行项目开发期间，避免不了使用各式各样的组件，Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。效果：组件使用我们利用vue-cli创建一个项目，然后只需要安装element-ui即可安装：npmielement-ui-S然后在main.js中引用一下样式即可，可以选择按需加载，我们这边因为是演示一下，所以不去进行调整，项目中如果使用到的组件不多，可以选择按需加载。main.jsimportVuefrom'vue';importAppfrom'./... 继续阅读 >
2020
11-25

浅析VUE防抖与节流

防抖和节流到底是啥函数防抖（debounce）解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。案例：持续触发scroll事件时，并不立即执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发一次handle函数。functiondebounce(fn,wait){lettimeout=nullreturnfunction(){if(timeout!==null)clearTimeout... 继续阅读 >
2020
11-25

解决vue页面刷新，数据丢失的问题

在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：解决方法一：最先想到的应该就是利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存，下面是利用localStorage存储的具体方案：... 继续阅读 >
2020
11-22

Vue 的 v-model用法实例

Vue框架早已经不是MVVM（Mode-View-View-Model）双向绑定了。早在Vue1.0时代，Vue在刚出世的时候的确是MVVM双向绑定。自Vue2.0以来，Vue就不再是双向绑定了，而是像React一样是单向绑定MV（Model-View）了。但是，在Vue中仍保留了双向绑定的接口，v-model就是。1.基本用法<template><divid="app"><inputv-model="x">{{x}}</div></template><script>exportdefault{data(){return{x:'init'}... 继续阅读 >
2020
11-22

Vue实现购物小球抛物线的方法实例

本文介绍的是利用Vue实现购物小球抛物线的相关内容，下面话不多说了，来一起看看详细的介绍吧css片段.shop{position:fixed;top:300px;left:40px;}.ball{position:fixed;left:32px;bottom:22px;z-index:200;transition:all0.4scubic-bezier(0.49,-0.29,0.75,0.41);/*贝塞尔曲线*/}.inner{width:16px;height:16px;border-radius:50%;background-color:rgb(0,160,220);transition:... 继续阅读 >
2020
11-22

vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

这次封装基于vuecli3+typescript实现，javascript也是同理，没有区别；自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现，而不是只在.vue文件。1、实现toast插件封装（类似简易版的elementUi的message）先书写一个toast组件<template><divref="toastRef"class="toastMessageBox">{{message}}</div></template><scriptlang="ts">import{Component,Vue,Watch}from'vue-property-de... 继续阅读 >
2020
11-22

详解vue 组件注册

一、了解组件注册的两种方式1.1全局组件的注册方法//main.jsimportVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip=falseletHello={name:'hello',template:'这是全局组件hello'}Vue.component('hello',Hello)newVue({el:'#app',router,components:{App},template:''})上面我们就通过Vue.component()注册了一个全局组件hello，接下来分析... 继续阅读 >
2020
11-22

Django vue前后端分离整合过程解析

最近接到一个任务，就是用django后端，前段用vue，做一个普通的简单系统，我就是一搞后端的，听到vue也是比较震惊，之前压根没接触过vue.看了vue的一些文档，还有一些项目，先说一下django与vue的完美结合吧！首先是创建一个django项目django-adminstartprojectmysite#创建mysite项目django-adminstartappblog#创建blog应用一、接下来就是安装关于vue的东西了1、首先安装node.js，官网地址：https://nodejs.org/zh-cn/dow... 继续阅读 >
2020
11-19

Vue 打包的静态文件不能直接运行的原因及解决办法

问题吾辈使用vue-cli直接生成的vue模板项目，在模板之上继续开发的。然而在使用npmrunbuild打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？原因查看了一下打包后的index.html源码，终于发现了一个重要的点：所有涉及到路径的地方全都是以/开头的下面是吾辈打包后生成的dist目录dist:.│index.html│└─static├─css│app.b7bce283257fbd427fb1dc3fea80cee1.css│app.b7bce283257f... 继续阅读 >
2020
11-19

vue 获取到数据但却渲染不到页面上的解决方法

能获取到数据数据却渲染不到页面上问题描述：我数据全部拿到了，js里面写console.log(musics)数据打印出来都正确，但是页面里面就是不显示。很多时候对数据进行处理了，但是页面上就是没变化，没效果，用console.log打印数据都没问题，特别是数组、对象容易出现这个问题；1、this.$set(xxx)保存变量2、this.$forceUpdate(xxx)强制更新，迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不... 继续阅读 >
2020
11-19

vue 插槽简介及使用示例

Vue的插槽，是一种内容分发机制，但是我感觉它更加像组件的一种占位符的概念，通过插槽，等待组件外部传入复杂的内容。使用插槽的好处在以前的例子中todo-item插槽直接写在了todo-list插槽中，其实是比较不合理的，它会导致todo-list插槽比较死板，无法重用更多的其他组件。Vue.component("todo-list",{template:`<ul><todo-itemv-on:delete="handleDelete"v-for="iteminlist"data-wen="wen":title... 继续阅读 >
2020
11-19

详解Vue的mixin策略

我之前一直以为mixin的合并是以组件内的优先，即mixin的内容如果和组件内有冲突的，以组件内为准，确实存在这种情况，但是vue指定的策略更详细，下面分别记录各种情况对应的合并策略基本当一个组件使用mixin的时候，所有mixin的选项会被混入到组件自己的选项中，这部分没什么好说的，直接看代码//defineamixinobjectconstmyMixin={created(){this.hello()},methods:{hello(){console.log('hellofrommixin!'... 继续阅读 >