![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 84
vue学习笔记
MichstaBe-IMUT
一条菜狗罢了
展开
-
网络模块封装
网络模块封装Vue中发送网络请求有非常多的方式, 在开发中, 如何选择? 1.传统的Ajax传统的Ajax是基于XMLHttpRequest(XHR)缺点:1.配置和调用方式等非常混乱.2.编码起来看起来繁琐复杂3.所以真实开发中很少直接使用, 而是使用jQuery-Ajax2.jQuery-AjaxjQuery-Ajax相对于传统的Ajax非常好用.但是:1.在Vue的整个开发中都是不需要使用jQuery了.jQuery的代码1w+行.Vue的代码才1w+行.2.完全没有必.原创 2021-04-09 15:33:31 · 203 阅读 · 0 评论 -
Vuex
Vuex1.官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。2.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。3.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。状态管理1.可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。2.我们自己原创 2021-04-07 21:13:26 · 243 阅读 · 0 评论 -
Promise
PromisePromise是异步编程的一种解决方案。我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。当网络请求非常复杂时,就会出现回调地狱。这样代码难看而且不容易维护。我们更加期望的是一种更加优雅的方式来进行这种异步操作。Promise可以以一种非常优雅的方式来解决这个问题基本语法首先用一个原创 2021-04-06 21:45:05 · 215 阅读 · 0 评论 -
TabBar案例及思考
效果图vue init webpack TabBar目录结构结构搭建APP.vue<template> <div id="app"> <div class="tabbar"> <div class="tab-bar-item"> <img src="../assets/img/tabbar/home.svg" alt=""> 首页</div> <div class="ta原创 2021-04-06 15:34:39 · 198 阅读 · 0 评论 -
vue-router
vue-router路由路由是一个网络工程里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动.路由器提供了两种机制: 路由和转送.路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端.路由中有一个非常重要的概念叫路由表路由表本质上就是一个映射表, 决定了数据包的指向后端路由阶段1、早期的网站开发整个HTML页面是由服务器来渲染的2、服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.一个页面有自己对应的网址, 也原创 2021-04-05 17:21:20 · 417 阅读 · 0 评论 -
vue 脚手架
Vue CLI什么是Vue CLI写几个Vue的Demo程序, 那么不需要Vue CLI.如果开发大型项目, 那么需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是什么意思CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.Vue CLI是一个官方发布原创 2021-04-04 17:26:38 · 181 阅读 · 0 评论 -
Webpack
webpack官方的解释:At its core, webpack is a static module bundler for modern JavaScript applications.webpack 是一个流行的前端项目构建工具(打包工具),可以解决当前 web 开发中所面临的困境。webpack 提供了友好的模块化支持以及代码压缩混淆处理 js 兼容问题性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。前端模块化在ES6之前原创 2021-04-01 20:15:06 · 236 阅读 · 1 评论 -
Vue 前端模块化
JavaScript原始功能网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。直接将代码写在<script>标签中即可随着ajax异步请求的出现,慢慢形成了前后端的分离客户端需要完成的事情越来越多,代码量也是与日俱增。为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。但是这种维护方式,依然不能避免一些问题。比如全局变量同名问题:例子这种代码的编写方式对js文件的依赖顺序几乎是强制性的当js文件过多,比如有几原创 2021-04-01 16:42:44 · 215 阅读 · 0 评论 -
Vue 组件化
什么是组件化?任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。但是,我们人有一种天生的能力,就是将问题进行拆解。如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。组件化也是类似的思想:如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果,我们讲一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的功能那么之后整原创 2021-03-30 21:55:25 · 241 阅读 · 0 评论 -
Vue 常用特性
常用特性概览⚫ 表单操作⚫ 自定义指令⚫ 计算属性⚫ 侦听器⚫ 过滤器⚫ 生命周期表单操作⚫ Input 单行文本⚫ textarea 多行文本⚫ select 下拉多选⚫ radio 单选框⚫ checkbox 多选框<body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名:</span>原创 2021-03-28 17:59:22 · 178 阅读 · 0 评论 -
Vue基础 实现tab切换案例
目录结构代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0;原创 2021-03-28 15:41:54 · 198 阅读 · 0 评论 -
Vue 基础 模板语法
VueVue概述Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式javaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue灵活:在一个库和一套完整框架之间自如伸缩高效:20kB运行大原创 2021-03-27 18:21:17 · 217 阅读 · 0 评论