- 博客(14)
- 收藏
- 关注
原创 浅析Vue中swiper的实现
浅析Vue中swiper的实现大家都知道swiper是第一个第三方的库,可以用来实现移动端、pc端的滑动操作,十分方便(官方文档 https://www.swiper.com.cn/)本文将简单讨论下vue中的swiper的具体实现方式一、swiper的基本使用下面先通过一个简单的案例看一下它的使用:<head> <meta charset="UTF-8">...
2019-06-27 22:12:08
3189
原创 浅析Vue中的生命周期
浅析Vue中的生命周期一、介绍1. 什么是生命周期? vue中的声明周期指的是 组件 从创建到销毁的一个过程,在这个过程中,我们在每一个特定的阶段会触发一些方法( 这些方法具备一些功能 ),我们给这些方法起了个名字叫做 “ 生命周期钩子函数/组件钩子 ”2. 我们为什么要了解生命周期呢? 因为我们想在生命周期钩子中实现项目功能,那么我们必须知道每一个钩...
2019-06-27 22:10:48
373
原创 浅谈Vue中的过渡效果 && 动画
浅谈Vue中的过渡效果 && 动画一、使用形式(4种)1. 在 CSS 过渡和动画中自动应用 class一个过渡或是一个动画我们分为两个大阶段 :(1) 进入(2) 离开我们使用Vue提供的 transition 组件时,vue会提供6(2.1.8版及以上移除了v-enter和v-leave,现在只有4个)个类名,8个 钩子函数 给大家使用6个过渡的类名:v-e...
2019-06-26 22:09:08
395
原创 框架级的数据请求
框架级的数据请求vue中的数据请求包括axios和fetch :axios 和 fetch 没有jsonp 数据请求类型的axios 和 fetch 都是promise一、axios(第三方库——别人封装好的库)axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )案例:axios 中 get请求: new Vue({ el: '#app',...
2019-06-26 22:07:35
162
1
原创 对前端中的虚拟dom和diff算法的一些理解
对前端中的虚拟dom和diff算法的一些理解一、虚拟dom是什么?我们先看一下下面的这个需求:有一个变量 count 的初始值时 0,经过一系列运算,得到10001,然后将结果写入box中我们可能会这么写: var box = document.querySelector( '.box' ) var count = 0 ; console.time( 'a' ) for( va...
2019-06-26 22:05:19
1023
1
原创 对Vue组件化的一些理解
对Vue组件化的一些理解一、基础概念1、概念:组件是html、css、js等的一个聚合体2、为什么要使用组件? 1、组件化将一个具备完整功能的项目的一部分进行多处使用加快项目的进度可以进行项目的复用2、要想实现组件化,我们使用的这一部分必须是完整的,这个完整的整体称之为组件3、vue将html、css、js、img等聚合体放在一起组成的文件称之为单文件...
2019-06-26 22:01:38
3993
原创 对Vue中组件通信的一些理解
对Vue中组件通信的一些理解一、介绍1. 为什么要进行组件通信? 组件可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起时,这些组件互相之间要建立联系,这个联系我们就称之为通信。2. 组件通信的方式有以下几种:(1)父子组件通信: 使用props来实现(2)子父组件通信: ...
2019-06-26 22:00:58
468
原创 Vue中的属性验证
Vue中的属性验证一、为什么要有props验证?当一个开发人员要使用component组件的时候,他可能会对其要接受的参数有什么要求不是很清楚,因此传入的参数可能会在开发子组件的人的意料之外,程序就会发生错误,就像我们在函数调用之前先检查一下函数一样,props也可以进行一个预先检查二、使用props验证:在组件通信时,作为接收值的容器(数组,当这个值要进行属性验证时要写成对象形式)p...
2019-06-26 22:00:06
1208
原创 Vue中的过滤器
Vue中的过滤器一、什么是过滤器?用来格式化数据的一个函数vue 1.x 版本借鉴了 angular , 提供 10 个过滤器, 包括有: 日期 小数点位数保留 货币 大小写 等Vue 2.x 废弃了这 10个过滤器,但是它提供了自定义过滤器的方式二、使用方式全局定义过滤器<body> <div id="app"> <p>...
2019-06-26 21:59:28
2419
原创 Vue中的动态组件
Vue中的动态组件1. 什么是动态组件? 可以改变的组件2. 使用 通过 Vue 提供了一个 component + is 属性3. 动态组件指的就是 component 这个组件4. 案例点击一个按钮进行两个组件的切换:<body> <div id="app"> <button @click = "ch...
2019-06-26 21:58:30
658
原创 slot插槽
slot插槽一、作用/概念预先将将来要使用的内容进行保留<body> <div id="app"> <Hello> <div> 这里是1903 </div> </Hello> </div> <template id="hello">...
2019-06-26 21:57:33
181
原创 CSS3弹性盒
CSS3弹性盒一、介绍: css3引入一种新的布局模式——Flexible Box布局,即伸缩布局盒模型(弹性盒布局),用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者动态的。 主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小),flex...
2019-06-21 11:44:36
211
1
原创 Class及Style的绑定
Class 与 Style 绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。一、类名的绑定1. vue中...
2019-06-19 22:05:54
153
原创 Vue 指令(一)
Vue 指令(一)指令:绑定在dom属性上1. v-html更新元素的 innerHTML可以解析标签型数据( 可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML ))eg:<body> <div id="app"> <p v-html = "h"></p> </div></b...
2019-06-19 22:03:42
470
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人