Vue基础
QQ_1440277049
这个作者很懒,什么都没留下…
展开
-
Vue中两大特性指令和组件创建流程
指令 – 用来操作dom组件 – 组件是html css js 等的一个聚合体为什么要使用组件?组件化将一个具备完整功能的项目的一部分进行多处使用加快项目的进度可以进行项目的复用要想实现组件化,那么我们使用的这一部分就必须是完整的,我们把这个完整的整体就称之为组件插件: index.html img css js如果能将 html css js img...原创 2019-07-03 17:17:18 · 241 阅读 · 0 评论 -
Vue基本指令v-for,v-show/if,v-else/else-if,v-bind,v-on以及综合业务
mutache 语法糖基础模板语法v-forv-for数组 v-for = " (item,index) in arr " item是arr中每一个元素对象 v-for = "(item,key,index) in obj " item是obj的属性值json类型数据嵌套类型数据key:给没一个循环的列表添加一个唯一的标识使用指...原创 2019-06-29 16:52:42 · 508 阅读 · 0 评论 -
Vue中watch侦听器&&computed计算属性以及 methods用法(核心)
watch作用用来监听data中定义的数据,当data中定义的数据发生了变化,那么watch中的key就会触发watch是一个对象watch: {}watch中可以设置多个类型的键值使用方式( 重点 )方法<div id="app"><div class="container"> <div class="row"> &l...原创 2019-06-29 18:25:47 · 457 阅读 · 0 评论 -
Vue中数据双向绑定原理王者级附带青铜级mixins组件混入
原理( 王者 )数据驱动当数据发生改变时,视图也会进行更新,这叫做数据驱动,也就是数据驱动视图深入响应式原理数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新双向数据绑定原理当我们使用 v-model 指令绑定了表单元素时,那么我们可以在视图直接获得数据,当视图发生改变时,数据也会进行更新综上: 三者都是应用了同一个底层原理,这个底层原理由es5的...原创 2019-06-29 18:41:19 · 383 阅读 · 0 评论 -
Vue中事件高级用法 ( 修饰符 )
事件高级用法 ( 修饰符 )修饰符的由来业务: 阻止事件冒泡这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为,但是我们发现,e.stopPropagation() 我们书写了三次,总结: 这么书写会导致代码重复,浪费性能new Vue({ el: '#app', methods: { bigHandler ( e ) { ...原创 2019-06-29 18:53:01 · 477 阅读 · 1 评论 -
动态组件切换及其Vue提供的is属性和keep-alive高性能组件
动态组件什么是动态组件?可以改变的组件使用通过 Vue 提供了一个 component + is 属性动态组件指的就是 component这个组件案例<div id="app"> <button @click = "change"> 切换 </button> <keep-alive include=""> ...原创 2019-08-05 09:52:38 · 249 阅读 · 0 评论 -
swiper和自定义指令
swiper作用: 用来实现移动端,pc端滑动操作swiper是一个第三方的库学习 swiper 官网文档 https://www.swiper.com.cn/ <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper...原创 2019-06-27 22:07:25 · 793 阅读 · 0 评论 -
Vue生命周期过程详解
生命周期 ( 王者 )什么是生命周期?vue中的生命周期指的是 组件 从创建到销毁一个过程,在这个过程中,我们在每一个特定的阶段会触发一些方法( 这些方法具备一些功能),我们给这些方法起了个名字叫做( 生命周期钩子函数/ 组件钩子 )为什么要学习生命周期?因为我们想在生命周期钩子中实现项目功能,那么我们必须知道每一个钩子函数的具体用途这个生命周期是谁的生命周期?组件项目中...原创 2019-06-27 16:33:31 · 932 阅读 · 0 评论 -
Vue初步认识,前端发展历史
htmlhtml [1990]----> html5 [2008.1.12]csscss 1.0 1996css 2.0 1998css 3.0 2001EcmaScript1997年诞生2015 EcmaScript 20152016 EcmaScript 2016 dart语言 vs javascript随着前端项目的逻辑越来越复杂和难以维护...原创 2019-06-21 19:54:27 · 1481 阅读 · 0 评论 -
Vue组件通信
组件通信为什么要进行组件通信?组件可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起时,这些组件相互之间要建立联系,这个联系我们就称之为通信组件通信的方式有以下几种( 王者级 )父子组件通信使用props来实现子父组件通信自定义事件 自定义事件 1. 自定义的 通过 $on 定义 $emit触发 ...原创 2019-06-26 08:31:57 · 202 阅读 · 0 评论 -
虚拟dom && diff算法 ( 王者 )
1. 虚拟dom是什么?简称vdom,它是一个Object对象模型,用来模拟真实dom节点的结构2. 虚拟dom的使用基本流程获取数据( ajax fetch )创建vdomvdom的由来?但是我们的网页结构一般都是很复杂的,这时我们使用vdom去模拟dom结构,发现vdom这个对象模型// 太大了,也长了,所以我们想,如果能在js中也能够书写 dom标签结构那就好...原创 2019-06-24 22:32:43 · 173 阅读 · 0 评论 -
fetch简介及其和axios区别
fetch ( javascript 原生提供 )fetch要手动进行一次数据格式化,但是axios是内部进行了数据的格式化fetch get 方法请求数据,参数要直接连接在url上fetch 格式化数据 有三种 处理方法.json() 格式化 json 类型数据, 将 json类型 string 转换成 json 对象.text() 格式化文本.blob() 格式化二进制数据...原创 2019-06-22 17:32:09 · 984 阅读 · 0 评论 -
Vue过滤器(局部和全局过滤)
过滤器什么是过滤器?用来格式化数据的一个函数 例如: $ 10 ‘$’ + price 日期的格式化Vue 1.x 版本借鉴了 angular , 提供 10 个过滤器, 包括有: 日期 小数点位数保留 货币 大小写 等Vue 2.x 废弃了这 10个过滤器,但是它提供了自定义过滤器的方式使用方式全局定义过滤器 <p> ...原创 2019-06-26 19:28:49 · 1506 阅读 · 0 评论 -
Vue过渡效果 && 动画
使用形式在 CSS 过渡和动画中自动应用 class <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="../../Vue@2.6.10.js">&l...原创 2019-06-26 21:22:50 · 193 阅读 · 0 评论 -
Vue中slot 插槽(新旧版本)
slot 插槽作用/概念: 预先将将来要使用的内容进行保留具名插槽: 给slot起个名字slot 作用域插槽旧: slot-scope使用流程在组件的模板中书写slot插槽,并将当前组件的数据通过 v-bind 绑定在 slot标签上在组件使用时,通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据通过 slotProp.xxx 就可...原创 2019-06-26 11:36:35 · 549 阅读 · 0 评论 -
动态组件中Vue提供的is属性和keep-alive高性能组件
动态组件什么是动态组件?可以改变的组件使用通过 Vue 提供了一个 component + is 属性动态组件指的就是 component这个组件案例<div id="app"> <button @click = "change"> 切换 </button> <keep-alive include=""> ...转载 2019-08-05 09:56:35 · 177 阅读 · 0 评论