vue
文章平均质量分 65
杨爽的博客
本人已转行,此账号内容不会删除!一些基础皮毛,有需要者可自行观看,私聊不回,勿扰谢谢!
展开
-
Vue组件传值(8种传值方式)值得收藏!
前言:vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与E是堂兄关系(非直系亲属)针对以上关系我们归类为原创 2021-09-09 10:01:36 · 8388 阅读 · 0 评论 -
async/await和promises的区别及怎么去使用
1、Async/await 是建立在 Promises上的,不能被使用在普通回调以及节点回调2、Async/await 和 Promises 很像,不阻塞3、Async/await 代码看起来像同步代码。语法假设函数getJSON返回值是 Promise,并且 Promise resolves 有一些JSON 对象。我们只想调用它并且记录该JSON并且返回完成。使用Promiseconst makeRequest = () => getJSON() .then(data =.原创 2021-09-02 10:26:40 · 417 阅读 · 1 评论 -
vue防止按钮重复点击(自定义指令)
vue防止按钮重复点击(自定义指令)我们在提交的时候 , 重复点击会一直触发!问题效果截图:解决方案:(vue自定义指令)直接在main.js中写入// 复制粘贴在main.js里// 自定义指令:解决element-ui按钮重复点击Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if (!el.disab原创 2021-07-15 11:26:44 · 2441 阅读 · 4 评论 -
vue实战:时间格式化插件moment
Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率。日常开发中,通常会对时间进行下面这几个操作:比如获取时间,设置时间,格式化时间,比较时间等等。官方网址:Moment.js官网一、安装moment可以使用安装命令:npm install moment --save直接安装moment当然也可以直接下载moment.js文件然后在项目中引入。npm install moment --save// 或者 yarn 命令yarn a.原创 2021-07-09 16:40:24 · 5894 阅读 · 0 评论 -
微信小程序入门简单讲解
小程序简介:小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验微信发布了一款自己研发的小程序开发工具:微信Web开发者工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html集合了开发,预览,发布为一体的开发工具。首先展示并介绍一下小程序开发的文件目录结构:pages:项目开发目录 相当于vue脚手架中的src目录。utils:存放封装的工具函数的目录原创 2020-10-23 01:26:27 · 431 阅读 · 0 评论 -
Vue实现获取验证码60秒倒计时
效果如下:(嘘,页面写的有点简陋,看效果!)html:<!--手机号输入框--><div class="login_box"> <input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile"/> <span v-if="codeShow" style="color:red;" @click="getPhoneCode">获取验证码</sp原创 2020-10-13 10:56:18 · 4013 阅读 · 3 评论 -
Vue项目使用rem布局方法
在 index.html 或者 main.js 中添加以下代码:在使用vue-cli 开发 H5 项目时,需要进行 rem 适配,(以750 设计稿为例)const setHtmlFontSize = () => { const htmlDom = document.getElementsByTagName('html')[0]; let htmlWidth = document.documentElement.clientWidth || document.body.clientW原创 2020-10-08 10:34:22 · 756 阅读 · 0 评论 -
Vue封装axios以及使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。为什么选择axios在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http 请求支持 Promise API拦截请求和响应转换请求和响应数据axiox请求方式axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(u原创 2020-10-07 17:24:05 · 3001 阅读 · 0 评论 -
Vuex实现购物车功能
Vuex实现购物车功能(附:效果视频) 功能描述:加购删除加减全选反选选中计算总价存储 整体演示效果如下:首先介绍一下Vuex:Vuex 实例对象属性 主要有下面5个核心属性:state : 全局访问的state对象,存放要设置的初始状态名及值(必须要有)mutations : 里面可以存放改变 state 的初始值的方法 ( 同步操作–必须要有 )getters: 实时监听state值的变化可对状态进行处理,返回一个新的状态,相当于store的计算属性(不是必须的原创 2020-08-15 00:16:10 · 1650 阅读 · 6 评论 -
vue简单实现tab切换
tab切换效果如下:注:(图片用的public静态资源管理)上方的标题和下方的图片用的是两个块,是兄弟节点,所以需要点击tab标题和下方的图片一一对应利用vue提供的v-for指令遍历得到索引和值html结构(两块结构):<template> <div id="app"> <!-- 导航 --> <ul class="tab-tilte"> <li v-for="(item,inde原创 2020-08-03 09:18:28 · 1692 阅读 · 0 评论 -
vue实现TodoList效果完整版
TodoList完整效果演示效果如下:整体思路分析:1.在input框中输入内容后按enter键,把内容添加到正在进行的任务中(如果内容为空则不添加)2、动态计算有几个正在进行和已经完成的任务3、点击复选框,实现选中或不选中4、点击删除按钮即可删除列表内容5、双击列表中的内容,可对列表内容进行修改(按enter键完成编辑,或者当input框失去焦点的时候也是完成编辑,如果想要取消修改,按esc键即可取消修改)6、选择下拉菜单可以查看全部、正在进行、已经完成的任务状态7、已经添加的列表任务,原创 2020-08-01 14:27:03 · 4111 阅读 · 5 评论 -
vue简单实现 点击变色和隔行变色
简单实现li点击变色,代码如下<template> <div id="app"> <ul> <!-- 通过切换索引值改变class --> <li v-for="(item,index) in list" :key="index" @click="changeColor(index)原创 2020-07-30 20:45:01 · 2375 阅读 · 0 评论 -
vue理论简单汇总
vue.js是什么?Vue.js 是一套用于构建用户界面的渐进式框架简述MVVM和MVC?(1)MVC:是后台的框架模式分为M:(model模型)、V(view试图)、C(controller控制器)(2)MVVM是为了实现MVC中的VMVVM分为:M(model数据)、V(view试图)、VM(viewModel控制数据的改变和控制试图)渐进式框架的理解?主张最少;----没有多做职责之外的事;可以根据不同的需求选择不同的层级;简述虚拟DOM?对复杂的文档DOM结构,提供一种方便的工具原创 2020-07-20 16:25:31 · 562 阅读 · 0 评论