Vue学习
文章平均质量分 75
vue
云中、漫步
+ --> -
展开
-
Vue学习(四十五)——Element-UI
文章目录一、概述二、基于命令行方式手动安装一、概述Element-UI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 官网地址为: http://element-cn.eleme.io/#/zh-CN二、基于命令行方式手动安装1、打开项目,安装依赖包:npm i element-ui –S...原创 2020-11-07 00:26:47 · 399 阅读 · 0 评论 -
Vue学习(四十四)——Vue脚手架
文章目录一、概述一、概述原创 2020-10-29 01:04:50 · 511 阅读 · 0 评论 -
Vue学习(四十三)——Vue 单文件组件
文章目录一、传统组件的问题和解决方案1、问题2、 解决方案二、Vue 单文件组件的基本用法三、 webpack 中配置 vue 组件的加载器四、在 webpack 项目中使用 vue五、webpack 打包发布一、传统组件的问题和解决方案1、问题全局定义的组件必须保证组件的名称不重复;字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \;不支持 CSS 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏;没有构建步骤限制,只能使用 HTML 和 ES5原创 2020-10-21 23:02:12 · 658 阅读 · 0 评论 -
Vue学习(四十二)——webpack
文章目录一、概述1、webpack的概念一、概述1、webpack的概念webpack 是一个流行的前端项目构建工具(打包工具),可以解决当前 web 开发中所面临的困境。webpack 提供了友好的模块化支持,以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。目前绝大多数企业中的前端项目,都是基于 webpack 进行打包构建的。...原创 2020-10-21 00:15:46 · 375 阅读 · 1 评论 -
Vue学习(四十一)——前端模块化相关规范
文章目录一、概述1、什么是模块化?2、ES6模块化规范3、Node.js 中通过 babel 体验 ES6 模块化A.安装babelB.创建babel.config.jsC.创建index.js文件D.使用npx执行文件4、默认导出 与 默认导入A、默认导出B、默认导入5、设置按需导入/导出A、按需导出B、按需导入6、直接导入并执行模块代码一、概述1、什么是模块化?模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块;模块化开原创 2020-10-19 21:43:22 · 258 阅读 · 0 评论 -
Vue学习(四十)——后台管理路由案例
文章目录一、前言一、抽离并渲染 App 根组件二、将左侧菜单改造为路由链接三、创建左侧菜单对应的路由组件四、在右侧主体区域添加路由占位符五、添加子路由规则六、通过路由重定向默认渲染用户组件七、渲染用户列表数据八、需要创建一个组件,用来展示详情信息九、编程式导航,点详情链接跳转至详情组件十、完整代码一、前言下面是一个基于路由的后台管理的案例,页面效果如下,我们按步骤实现一下:实现的功能:1、点击左侧的"用户管理",“权限管理”,“商品管理”,“订单管理”,"系统设置"都会出现对应的组件并展示内容2原创 2020-10-18 22:48:20 · 1191 阅读 · 0 评论 -
Vue学习(三十七)——async/await函数
文章目录前面我们说到,promise用于控制异步流程,但是它本身还是需要回调函数,这不太方便。因此,在es7中新增了一个函数——async函数。async function queryData() {}用这种方式声明的函数为异步函数,不会阻塞后面代码的执行。async作为一个关键字放到函数前面任何一个 async 函数都会隐式返回一个 promise在async函数中使用awaitawait 关键字只能在使用 async 定义的函数中使用;await后面可以直接跟一个 Promise原创 2020-10-15 22:28:05 · 272 阅读 · 0 评论 -
Vue学习(三十六)——接口调用axios用法
文章目录一、前言二、axios概述1、什么是axios?2、为什么要用axios?3、axios的主要特征三、基本语法1、发送get请求2、发送delete请求3、发送post请求4、发送put请求四、axios全局配置五、axios拦截器1、请求拦截器2、响应拦截器一、前言JQuery时代,我们使用ajax向后台提交数据请求,Vue时代,Axios提供了前端对后台数据请求的各种方式。二、axios概述1、什么是axios?Axios是基于Promise的Http客户端,可以在浏览器和node.j原创 2020-10-15 00:46:09 · 986 阅读 · 0 评论 -
Vue学习(三十五)——fetch的用法
文章目录一、fetch API 中的 HTTP 请求二、fetchAPI 中 响应格式Fetch API是新的ajax解决方案 Fetch会返回Promisefetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。-fetch(url, options).then()<script type="text/javascript"> // Fetch API 基本用法 fetch(url).then() 第一个参数请求的路径 // Fe原创 2020-10-14 21:29:24 · 11396 阅读 · 2 评论 -
Vue学习(三十四)——Promise
文章目录一、前后端交互模式1、接口调用方式2、异步调用二、Promise1、什么是Promise2、Promise的基本用法3、基于Promise发送Ajax请求三、Promise常用的API1、实例方法2、对象方法一、前后端交互模式1、接口调用方式原生ajax基于jQuery的ajaxJQuery为dom操作,Vue很少涉及dom操作,Vue中用不到fetch可以看做是ajax的升级版,标准化组织制定的APIaxios第三方类库,更加强大2、异步调用JavaSc原创 2020-10-14 00:55:26 · 2549 阅读 · 0 评论 -
Vue学习(三十三)——基于组件的案例:购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .原创 2020-10-10 00:29:13 · 876 阅读 · 0 评论 -
Vue学习(三十一)——组件间的数据交互
目录一、父组件向子组件传值1、父组件发送的形式是以属性的形式绑定值到子组件身上。2、组件内部通过属性props接收传递过来的值3、props属性名规则4、props属性值类型二、子组件向父组件传值1、子组件向父组件传值2、父组件监听子组件的事件一、父组件向子组件传值1、父组件发送的形式是以属性的形式绑定值到子组件身上。 <div> <!--静态传值--> <menu-item title="父组件中传过来的值"></me原创 2020-10-07 00:56:12 · 221 阅读 · 1 评论 -
Vue学习(三十)——Vue 调试工具
目录首先将插件安装,出现下面的图标,说明已经安装成功。我们通过准备的例子看下如何使用这个工具,F12打开控制台,最右边有一个vue,点开就可以进行组件调试:可以看到,组件之间的层级关系十分清楚,数据也十分直观, 而且我们可以直接修改数据:...原创 2020-10-06 18:15:30 · 306 阅读 · 0 评论 -
Vue学习(二十八)——Vue组件化开发
目录一、组件化开发1、什么是组件化?2、使用组件的好处?3、组件化规范:Web Components一、组件化开发1、什么是组件化?所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的,所以组件在系统内部可复用,组件和组件之间可以嵌套,如果项目比较复杂,可以极大简化代码量,并且对后期的需求变更和维护也更加友好。2、使用组件的好处?提高开发效率方便重复使用简化调试步骤提升整个项目的可维护性便于协同原创 2020-10-06 14:24:02 · 262 阅读 · 0 评论 -
Vue学习(二十六)——综合案例:图书管理(一)
目录一、图书列表的展示功能1、实现静态列表效果2、基于数据实现模板效果3、处理每行的操作按钮二。添加图书1、实现表单的静态效果2、添加图书表单域数据绑定3、添加按钮事件绑定4、实现添加业务逻辑三、修改图书1、修改信息填充到表单① JS中的Array.filter()方法2、修改后重新提交表单3、重用添加和修改的方法②JS中的Array.some()方法③Js中的箭头函数接下来我们结合之前我们所学到的知识,完成一个图书管理的案例,大致如下,完成对图书的増、删、改操作:一、图书列表的展示功能1、实现静态原创 2020-10-05 21:48:52 · 1387 阅读 · 1 评论 -
Vue学习(二十六)——Vue动态处理响应式数据
目录上一节我们学习了如何处理数组的一些方法。那么,我们想要修改了数组中的内容,页面会动态响应吗?我们看下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><div id="app"> <input type="t原创 2020-10-05 14:14:44 · 485 阅读 · 0 评论 -
Vue学习(二十一)——侦听器
目录一、侦听器的基本用法二、侦听器的应用场景一、侦听器的基本用法数据变化时执行异步或开销较大的操作。下面这个例子我们就可以使用侦听器来完成,很简单,就是名和姓的输入框的值发生改变的时候,全名也会发生变化。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head&g原创 2020-10-04 21:34:50 · 372 阅读 · 0 评论 -
Vue学习(十六)——案例:tab选项卡
目录原创 2020-10-04 11:47:58 · 523 阅读 · 0 评论 -
Vue学习(十三)——分支结构用法
目录一、v-if二、v-show三、v-show 和 v-if 区别四、v-show和v-if如何选择一、v-if作用:过条件判断展示或者隐藏某个元素。或者多个元素。通常搭配 v -else或 v-else-if来使用。使用场景举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <原创 2020-10-03 16:03:18 · 883 阅读 · 0 评论 -
Vue学习(八)——案例:简单计算器
要求:使用Vue语法,实现一个简单的加法计算器,实现步骤如下:通过v-model 实现 数值a 和 数值b 的双向绑定给按钮绑定事件 让 输入框中的值 相加将拿到的结果渲染到页面上<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body>原创 2020-10-02 23:43:17 · 444 阅读 · 0 评论 -
Vue学习(二)——模板语法
目录一、模板语法概述一、模板语法概述1、如何理解前端渲染?简单来说,就是将数据填充到HTML标签当中2、前端渲染的方式利用原生js拼接字符串利用模板引擎拼接利用Vue模板语法3、原生js拼接字符串基本上就是将数据以字符串的方式拼接到HTML标签当中,代码风格如下:缺点:不同开发人员的代码风格差别很大,随之业务的复杂,后期的维护变得逐渐困难起来。4、为了让程序员拥有相同的一套规范,模板引擎应运而生。与字符串拼接相比,代码明显规范了很多 ,维护也比较方便。缺点:没有提供专门的事原创 2020-10-02 10:23:01 · 183 阅读 · 0 评论 -
Vue学习(一)——概述及入门
1、vue是什么?Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。也可以说是一个类库。用于构建用户界面的渐进式框架声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建vue 的核心库只关注视图层特别注意,Vue还是一款国产框架,非常难得啊。它的作者–尤雨溪。Vue诞生于2014年,2015年10月27日才正式发布1.0.0版本。2、Vue有哪些优点?易用、灵活、高效简单易上手...原创 2020-06-07 22:08:18 · 371 阅读 · 0 评论 -
Vue工程代码解析
对于开发者来说,以后 99.99% 的工作都是在 src 中完成的,src 中的文件目录如下:1、assets 目录用来存放资产文件2、components 目录用来存放组件(一些可复用,非独立的页面),当然开发者也可以在 components 中直接创建完整页面。3、推荐在 components 中存放组件,另外单独新建一个 page 文件夹,专门用来放完整页面。4、router 目录中,存放了路由的js文件5、App.vue 是一个Vue组件,也是项目的第一个Vue组件6、main.js相原创 2020-06-05 00:25:47 · 533 阅读 · 0 评论 -
node.js 安装及vue工程创建
1、下载安装包Node.js 官方网站下载:https://nodejs.org/en/2、安装打开安装,傻瓜式下一步即可,安装成功,文件夹结构如下,并在上面安装过程中已自动配置了环境变量和安装好了npm包,此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:3、安装 Vue的工具执行 npm install 命令时,默认使用的是国外的下载源 ,可以通过如下代码配置为使用淘宝的镜像:npm config set registry https://registry原创 2020-06-04 00:13:33 · 285 阅读 · 0 评论