![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
02-Vue.js
Noble Wang
这个作者很懒,什么都没留下…
展开
-
Vue中数据请求
数据请求数据请求在前端开发中的使用有两种形式使用原生javascript提供的数据请求- ajax( 四部曲,一般需要我们结合Promise去封装,使用不是很便利,但是效率很高 )- fetch( 本身结合了Promise,并且已经做好了封装,可以直接使用 )使用格式:使用别人封装好的第三方库目前最流行的,使用率最高的是 axiosvue中我们最常使用的vue 1...原创 2019-05-24 22:09:58 · 197 阅读 · 0 评论 -
自定义(组件、指令、事件)和组件通信
1. 自定义组件( 插件 )案例: 封装一个 Loading 组件Loading是用来做什么的?提升用户体验loading使用方式很多第三方的ui库/组件库自定义封装过程:创建一个目录文件夹,称之为Loading在loading中创建一个叫做component目录,用来放模板在Loading目录下创建一个index.js~ import Vue from 'vue' ...原创 2019-05-29 21:08:25 · 233 阅读 · 0 评论 -
vue-router进阶
vue-router 进阶动态路由 & 路由传参 & 路由接参动态路由:url中路由是改变的,但是改变路由公用一个组件举例:localhost:3000/detail/001?a=1&b=2localhost:3000/detail/002?a=2&b=3detailvue cli3 配置反向代理在根目录下面新建一个 vue.c...原创 2019-05-31 23:39:01 · 138 阅读 · 0 评论 -
vue-router基础
RouterSPA ( single page App ) 单页面应用多页面应用有多个html文件,通过a标签的连接联通各个页面缺点开发起来太冗余,编译、压缩很耗时间页面之间的跳转速度太慢单页面应用不需要刷新页面,因为它就是一个页面这个页面内容在切换单页面内容之间的切换要想实现我们就是用路由了如今我们的app主要的开发形式就是spavue路由功能...原创 2019-05-31 23:37:46 · 82 阅读 · 0 评论 -
cli3的使用方法
clicli是什么?cli是vue提供的一个快速(自动化) 构建项目的一个脚手架 ,类似于我们之前所学的 express-generatorcli的版本目前最新 3.x老版本是 2.xcli的底层的自动化工具是: webpackcli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本...原创 2019-05-31 23:36:03 · 1248 阅读 · 0 评论 -
swiper的使用和优化
swiper开源、免费、强大的触摸滑动插件swiper使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2019-05-28 23:28:35 · 1328 阅读 · 1 评论 -
过滤器和生命周期
过滤器vue 1.x内部提供提供了 10 个过滤器, 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化什么叫过滤器?格式化数据的一个工具举例:12.22225 —> 12.2Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28过滤器一样也有两种声明形...原创 2019-05-28 23:27:47 · 715 阅读 · 0 评论 -
slot和transition动画
slotslot 插槽作用: 可以让我们在组件中书写内容transition动画vue中实现过渡或是动画一共提供了这样四种形式:- 在 CSS 过渡和动画中自动应用 class — 自己写css3动画- 可以配合使用第三方 CSS 动画库,如 Animate.css – 别人写好了类名,我们用- 在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原...原创 2019-05-28 23:26:41 · 295 阅读 · 0 评论 -
Vue基础事件
事件指令v-on格式v-on:eventType = “事件处理程序名称”简写@eventType = ‘事件处理程序名称’参数如果参数中需要事件对象,在方法调用的时候,使用一个叫做 $event的作为实际参数事件修饰符修饰符事件的修饰符格式: v-on:click.xxx = ‘handler’xxx指的是修饰符的名称问题: 修饰符使用有什么好处...原创 2019-05-23 22:48:01 · 226 阅读 · 0 评论 -
Vue基础指令
指令格式:v-xxx = “mustache语法”v-xxx = “msg”v-xxx = “{{msg}}” ×v-html 将一个数据展示在一个DOM内容中, innerHTML( html属性 )- 防止脚本攻击 xss CSRFv-bind 单项数据绑定- 使用技巧: 凡是 DOM 的属性要和数据进行绑定,那么我们就可以使用 v-bind- 格式...原创 2019-05-23 22:46:10 · 123 阅读 · 0 评论 -
模板语法 mustache语法 (双大括号语法)
模板语法 mustache语法 双大括号语法指令Vue指令组件作用: 是用来操作DOM的,指令就是绑定在DOM身上的一个属性,这个属性具备一定的功能,这个功能用来操作DOM以后我们不在像以前一样,先获取DOM,在操作了,我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持,所以我们采用jsx语法糖模板语法模板语法支持性还是很高的,数据类型都是支持的,但是不支持...原创 2019-05-23 22:38:39 · 1238 阅读 · 0 评论 -
Vue中组件使用方式
组件组件化组件化是当今最为流行的一种可复用性增加的方法,随着当今前端开发的复杂度更加,这个组件化变得越来越流行组件的基础组件是一个具备html css img js …等的一个聚合体组件的表现形式就类似一个标签组件至少得有模板注册组件Vue.js通过Vue.extend() 方法来扩展 组件的 使用Vue.extend( options ) 里面的options参...原创 2019-05-27 22:21:07 · 340 阅读 · 0 评论 -
前端发展史+初识Vue
1. 前端框架的发展历史前端工程师( 攻城狮 )12年: html css + div13年: js 加入 jquery14年: MVC angular1.0 react16年: vue 微信小程序2. Vue.js第一次使用什么是框架?什么是库框架是有一套自己的生态系统的库是没有自己的生态系统的, 它就是一个工具查看vue.js的源代码目前学习使用的是全局...原创 2019-05-22 21:26:23 · 260 阅读 · 0 评论 -
Vue基础属性
computedcomputed 计算属性案例: 为什么vue中要使用计算属性?比如: 让一个字符反向分析: <p> {{ msg.split('').reverse().join('') }} </p> 上面代码的写法,有些违背关注点分离,而且会让我们的DOM结构看起来不简洁解决方案:从上面的案例得出两个结论:1. 我们的使用结...原创 2019-05-24 22:14:56 · 460 阅读 · 0 评论 -
cli的安装
clicli是什么?cli是vue提供的一个快速(自动化) 构建项目的一个脚手架 ,类似于我们之前所学的 express-generatorcli的版本目前最新 3.x老版本是 2.xcli的底层的自动化工具是: webpackcli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本...原创 2019-05-29 21:09:28 · 339 阅读 · 0 评论