Vue基础
关注
分享
扫一扫
QQ_1440277049
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue中两大特性指令和组件创建流程
指令 – 用来操作dom 组件 – 组件是html css js 等的一个聚合体 为什么要使用组件？ 组件化 将一个具备完整功能的项目的一部分进行多处使用 加快项目的进度 可以进行项目的复用 要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件 插件： index.html img css js 如果能将 html css js img...原创 2019-07-03 17:17:18 · 276 阅读 · 0 评论 -
Vue基本指令v-for,v-show/if,v-else/else-if,v-bind,v-on以及综合业务
mutache 语法糖 基础模板语法 v-for v-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 · 547 阅读 · 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 · 480 阅读 · 0 评论 -
Vue中数据双向绑定原理王者级附带青铜级mixins组件混入
原理（ 王者 ） 数据驱动 当数据发生改变时，视图也会进行更新，这叫做数据驱动，也就是数据驱动视图 深入响应式原理 数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新 双向数据绑定原理 当我们使用 v-model 指令绑定了表单元素时，那么我们可以在视图直接获得数据，当视图发生改变时，数据也会进行更新 综上： 三者都是应用了同一个底层原理，这个底层原理由es5的...原创 2019-06-29 18:41:19 · 411 阅读 · 0 评论 -
Vue中事件高级用法 （ 修饰符 ）
事件高级用法 （ 修饰符 ） 修饰符的由来 业务： 阻止事件冒泡 这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为,但是我们发现，e.stopPropagation() 我们书写了三次， 总结： 这么书写会导致代码重复，浪费性能 new Vue({ el: '#app', methods: { bigHandler ( e ) { ...原创 2019-06-29 18:53:01 · 528 阅读 · 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 · 292 阅读 · 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 · 851 阅读 · 0 评论 -
Vue生命周期过程详解
生命周期 （ 王者 ） 什么是生命周期？ vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ） 为什么要学习生命周期？ 因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途 这个生命周期是谁的生命周期？ 组件 项目中...原创 2019-06-27 16:33:31 · 975 阅读 · 0 评论 -
Vue初步认识，前端发展历史
html html [1990]----> html5 [2008.1.12] css css 1.0 1996 css 2.0 1998 css 3.0 2001 EcmaScript 1997年诞生 2015 EcmaScript 2015 2016 EcmaScript 2016 dart语言 vs javascript 随着前端项目的逻辑越来越复杂和难以维护...原创 2019-06-21 19:54:27 · 1542 阅读 · 0 评论 -
Vue组件通信
组件通信 为什么要进行组件通信？ 组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系 ，这个联系我们就称之为通信 组件通信的方式有以下几种（ 王者级 ） 父子组件通信 使用props来实现 子父组件通信 自定义事件 自定义事件 1. 自定义的 通过 $on 定义 $emit触发 ...原创 2019-06-26 08:31:57 · 224 阅读 · 0 评论 -
虚拟dom && diff算法 （ 王者 ）
1. 虚拟dom是什么？ 简称vdom,它是一个Object对象模型，用来模拟真实dom节点的结构 2. 虚拟dom的使用基本流程 获取数据（ ajax fetch ） 创建vdom vdom的由来？ 但是我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型 // 太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好...原创 2019-06-24 22:32:43 · 188 阅读 · 0 评论 -
fetch简介及其和axios区别
fetch ( javascript 原生提供 ) fetch要手动进行一次数据格式化，但是axios是内部进行了数据的格式化 fetch get 方法请求数据，参数要直接连接在url上 fetch 格式化数据 有三种 处理方法 .json() 格式化 json 类型数据， 将 json类型 string 转换成 json 对象 .text() 格式化文本 .blob() 格式化二进制数据...原创 2019-06-22 17:32:09 · 1048 阅读 · 0 评论 -
Vue过滤器(局部和全局过滤)
过滤器 什么是过滤器？ 用来格式化数据的一个函数 例如: $ 10 ‘$’ + price 日期的格式化 Vue 1.x 版本借鉴了 angular , 提供 10 个过滤器， 包括有： 日期 小数点位数保留 货币 大小写 等 Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式 使用方式 全局定义过滤器 <p> ...原创 2019-06-26 19:28:49 · 1546 阅读 · 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 · 229 阅读 · 0 评论 -
Vue中slot 插槽（新旧版本）
slot 插槽 作用/概念: 预先将将来要使用的内容进行保留 具名插槽： 给slot起个名字 slot 作用域插槽 旧： slot-scope 使用流程 在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上 在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据 通过 slotProp.xxx 就可...原创 2019-06-26 11:36:35 · 591 阅读 · 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 · 202 阅读 · 0 评论