vue

vue开荒

vue开荒

位卑未敢忘忧国,愿疫情平息,愿与疫情抗争过的斗士们安息。所以使用pathRewrite进行路径重写替换/api/请求响应:作者:Lupin. »

Vue—父子组件间的传值

父子组件间传值父→子: 父组件绑定数据,子组件接收数据父组件:data() }子组件:props:子→父: 子组件以emit方法发布事件,父组件设置自定义事件监听。点击计数Child:handleClick () Parent:VUE单向流数据简述:父子组件传值,子组件只可以接收来自父组件的数据而不能修改父组件的数据,否则其他子组件引用相同父组件数据时会产生BUG。 »

在这里插入图片描述

自制天气预报查询网页

利用vue加天气预报接口搭建一个查询天气预报的网页,先用html+css做出基本布局,如下页面布局应该都能搞定,接下来是功能实现,利用vue的双项数据绑定以及数据驱动页面的特性,可以加页面功能实现,此处建议用axios向接口请求数据,接口可以去百度上找一些免费的实现功能之后,暂时未作出输入有误的处理,效果如下:虽然页面简洁,但终归实现了效果。有兴趣的朋友可以一起讨论代码。 »

vue lifecycle destroyed

Python全栈(六)项目前导之9.Vue自定义组件和生命周期函数

数据流和时间流传递原理如下:其中,红色表示事件流,蓝色表示数据流;通过数据与事件的相互作用,达到了自定义组件中v-model的目的。Vue生命周期可以类比Python中的对象。 »

vue组件中的父子组件通信两种方式

子组件是不能引用父组件或者vue的实例数据的,但是在开发中一些数据需要从上层传递到下沉,比如在下面的页面中,我们从服务器请求到了很多的数据,其中一部分数据是需要子组件来进行展示的,这个时候,并不会让子组件在次发送网络请求,而是直接将大组件的数据传递给小组件父子通信的两种方式1,用props向子组件传递数据(vue实例是根组件,最大的父组件)num就是父传子的 »

vue.js从入门到深入再到随心而用——————vue.js中的(组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法)

(这篇小总结主要总结了veu中组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法) 1.组件 定义: 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代 1.1组件的基本使用 Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象 全局组件注册后,任何vue实例都可以用 代码: //... »

在这里插入图片描述

Vue 商城购物车 细节处理优化版 :组件化开发综合案例 (详细代码分析在底部)

需求:案例展示: } &nbsp-&nbsp +&nbsp × `, metho »

在这里插入图片描述

axios在企业级vue项目中的应用(附带axios正确打开方式)

在一个大型的vue项目中,需要编写请求接口实在太多太多了,如果每一个接口都从创建实例开始,那代码将会相当庞大以及十分臃肿,后期很难维护,那我们来看看企业级项目中,http请求是怎么抽离出来的吧。 首先是request.js,这个文件是用来处理axios的配置、设置拦截器等等,它创建了一个实例,并将这个实例导出。代码如下,注释都写在里面啦 import Vue from 'vue' import a... »

image

vue 首页加载缓慢、白屏现象

vue项目打包上线后,首次打开会发现加载很慢,出现白屏的问题, 一、问题原因 打开控制台查看文件加载情况,会发现app.js/vendor.js这两个文件加载时间较长 二、解决办法 1、图片压缩 使用webpack打包文件时,可以看到图片资源显示过大,使用工具进行压缩 2、去掉.map文件 webpack打包文件时,会看到有一些.map文件生成 修改: 找到config文件夹下的index.js文... »

在这里插入图片描述

Vue 生命周期

什么是vue的生命周期Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是 Vue 的生命周期vue的生命周期里边有八个生命周期钩子函数分别是beforeCreat() 创建前created()被创建beforeMount() 挂载前mounted()已挂载beforeupdate()更新前updated()更新beforeDestroy() 销毁前d... »

使用vuecli3.0 + ts + vue-test-unit + html分离 + tslint创建通用基础框架

根据vue-cli3创建一个基础项目 (技术栈为:node-sass, babel, typescript, router(我是忘记添加unit-jest了,后续手动加入) html文件分离,创建的新项目是使用.vue格式作为文件模板的,但是由于这样子html、ts、scss就放置于一个文件里了,这样子不便于阅读和管理,所以我还是建议把这三个文件分成三个文件比较好,这里需要用到html-loade... »

在vue中封装一个betterscroll组件,并解决ios、Android在微信页面上下拉出现滑动的问题

最近在开发微信公众号网页的时候,发现使用原生滚动的时候,ios在微信网页下,上拉,下拉都会出现一大片的空白,看起来极其的别扭,为了解决这一问题,找了许多参考资料,如下是解决方法。 1.首先在你需要禁止滑动的页面中添加如下代码 mounted(){ document.body.addEventListener( 'touchmove', function (e) { e.preventDefault... »

vue+axios+el-upload实现文件上传(带参数):

== 0) console.log; },第一次在这里发表博客比较简短,希望可以给大家一点帮助,有问题可以在下方一起交流;作者:w小博 »

在这里插入图片描述

vue实现模糊搜索功能

标题 使用计算属性来实现该功能 首先写好一个列表 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200331213310518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQxMz... »

在这里插入图片描述

vue源码学习总结 深入响应式原理

深入响应式原理图 请反复观看原理图,画这个图的人请收下我的膝盖。。。 从initState切入,发现有3种watcher Vue.prototype._init= function (options?: Object) { callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props ... »

vue 之不得不学的 插槽 slot

注意 v-slot 只能添加在 上 ,这一点和已经废弃的 slot attribute不同。只有组件可以访问user,在父组件中无法访问 } 为了让user能够在父级的插槽内容可用,可以将user作为元素的一个attribute进行绑定: } 绑定在 元素上的 attribute 被称为插槽 prop。在父作用域中,可以使用v-slot定义提供的插槽prop的名字:... »

在这里插入图片描述

自学Vue必看的v-model知识总结(超详细)

文章目录基本概念基本使用v-model原理使用v-bindv-bind和v-on同时使用v-model结合radio使用v-model结合checkbox使用单选框多选框v-model结合select使用值绑定v-model修饰符lazy修饰符number修饰符trim修饰符基本概念表单控件在实际开发中是很常见的,Vue中使用v-model指令来实现表单元素和数据的双向绑定基本使用最重要的特征是表... »

其他人如何查看前端工程师在本地跑的vue项目(0.0.0.0)

因为现在一般都是前后端分离开发的模式, 有时候后台的同事需要查看当前的项目,我们应该怎么办呢。例如我们现在开发的vue项目。其实很简单只要前端在项目中设置一下就行那就是在config文件夹下的index.js文件中 将 host : ‘localhost’,修改为 host: ‘0.0.0.0’ 就可以了。然后别人只需要访问 http:// + 前端电脑的IP地址 + 端口号 就可以直接访问他本... »

vue前端面试题汇总(常问-进阶篇)

vue中computed和watch的区别 1.computed的用法 是一个计算属性,类似于过滤器,对绑定到view的数据进行处理。computed上面的属性不可在vue data中声明,不能做异步处理 data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firs... »

从零开始做vue + element-UI 的后台(二)

这篇文档我们说一些插件的 安装在上个一篇文章 我们已经把最基本的框架搭好了接下来 我们来看一下 我们搭建的项目结构├── public // 静态资源├── src // 源代码│ ├── api // 所有请求│ ├── assets // 主题 字体等静态资源│ ├── components // 全局公用组件│ ├── models // 实体类│ »

在这里插入图片描述

vue生命周期

Vue实例生命周期函数 作者:风雨等归期 »

在这里插入图片描述

vue项目中使用天地图

1.首先打开天地图注册账号 申请自己所用的key 网址:http://lbs.tianditu.gov.cn/home.html 2.创建自己的vue项目,这里就不说了 3.将 引入到你项目中的index.html文件中 4.创建map.vue文件 <!-- 点击画多边形 --> export default { data(){ return{ } }, created(){ }, m... »

在这里插入图片描述

vue cl3、vuex、vue-router、ant design vue、axios搭建一个简易的单页面应用

要求如下:使用vue、vuex、vue-router、ant design vue、axios搭建一个简易的单页面应用,页面风格样式使用ant design vue默认风格1、有 登录页、人员列表、人员详情、人员编辑页面2、所有页面需要有面包屑导航、页面标题3、人员详情页有编辑按钮,可点击进入人员编辑页面4、编辑页面需要使用ant design vue 的 form组件,验证人员姓名为必填,验证手... »

vue源码学习总结 options合并策略

vue options合并流程 格式化数据 格式化props为小驼峰命名的对象 格式化inject为{key : { from: val}}形式对象 格式化directives为{ bind: defFn, update: defFn }形式对象 依次合并 parent, child.extends(单个继承组件), child.mixins(数组), child.options,取值越靠后越优先... »

vue判断安卓还是IOS

vue判断是安卓还是IOS 写博客是为了做笔记 最近工作上遇到这样一个需求:vue写的页面,需要同时跟安卓和ios进行交互; 若是安卓,执行代码:android.finishActivity(); 若是IOS,执行代码: try { window.webkit.messageHandlers.finishActivity.postMessage(""); }catch(error) { conso... »

Page 1 of 239123»