vue学习
关注
分享
扫一扫
文章平均质量分 94
vue 的学习
code_dream_wq
这个作者很懒，什么都没留下…
展开
-
Vue缓存路由（keep-alive）以及新的生命周期
。原创 2023-01-17 14:29:53 · 13768 阅读 · 0 评论 -
37.axios请求
axios基础用法- get和 delete请求传递参数 - 通过传统的url 以 ? 的形式传递参数 - restful 形式传递参数 - 通过params 形式传递参数- post 和 put 请求传递参数 - 通过选项传递参数 - 通过 URLSearchParams 传递参数1. 发送get 请求axios.get('http://localhost:3000/adata').then(function(ret){ # 拿到 ret ...原创 2020-12-08 10:45:57 · 151 阅读 · 0 评论 -
36、组件插槽
- 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力匿名插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"><!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传原创 2020-12-02 14:55:46 · 159 阅读 · 0 评论 -
36、兄弟之间的传递
- 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据 - 提供事件中心 var hub = new Vue()- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)- 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名- 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据<!DOCTYPE html><html lang="en"><head> <meta cha...原创 2020-12-02 14:30:25 · 309 阅读 · 0 评论 -
35、子组件向父组件传值
子组件向父组件传值- 子组件用`$emit()`触发事件- `$emit()` 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据- 父组件用v-on 监听子组件的事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> ...原创 2020-12-02 14:24:48 · 189 阅读 · 0 评论 -
34、父组件向子组件传值
父组件向子组件传值- 父组件发送的形式是以属性的形式绑定值到子组件身上。- 然后子组件用属性props接收- 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><bod...原创 2020-12-02 14:13:16 · 127 阅读 · 0 评论 -
33、组件的基本使用
组件- 组件 (Component) 是 Vue.js 最强大的功能之一- 组件可以扩展 HTML 元素，封装可重用的代全局注册- Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象- **全局组件**注册后，任何**vue实例**都可以用组件基础用```html<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <...原创 2020-12-02 14:01:07 · 154 阅读 · 0 评论 -
31.图书管理案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid t..原创 2020-11-30 09:41:28 · 197 阅读 · 0 评论 -
30.动态数组响应式数据
动态数组响应式数据- Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来- a是要更改的数据 、 b是数据的第几项、 c是更改后的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id...原创 2020-11-28 14:24:28 · 154 阅读 · 0 评论 -
29.数组变异方法
- 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变- 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展| `push()` | 往数组最后面添加一个元素，成功返回当前数组的长度 || ----------- | ------------------------------------------------------------ || `pop()` | 删除数组...原创 2020-11-28 14:23:32 · 314 阅读 · 0 评论 -
28.生命周期
生命周期- Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数####常用的 钩子函数| beforeCreate | 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 || ------------- | ------------------------------------------------------------ || created | ...原创 2020-11-28 14:23:21 · 106 阅读 · 0 评论 -
27.过滤器中传递参数
过滤器中传递参数```html <div id="box"> <!-- filterA 被定义为接收三个参数的过滤器函数。 其中 message 的值作为第一个参数， 普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。 --> {{ message | filterA('arg1', 'arg2') }} </div> <script>原创 2020-11-28 14:23:10 · 496 阅读 · 0 评论 -
26、过滤器filter
过滤器- Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。- 过滤器可以用在两个地方：双花括号插值和v-bind表达式。- 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示- 支持级联操作- 过滤器不改变真正的`data`，而只是改变渲染的结果，并返回过滤后的版本- 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的<!DOCTYPE html><html lang="en"><head>原创 2020-11-28 14:22:55 · 317 阅读 · 0 评论 -
25.侦听器 watch
侦听器 watch- 使用watch来响应数据的变化- 一般用于异步或者开销较大的操作- watch 中的属性 一定是data 中 已经存在的数据- **当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">..原创 2020-11-27 14:47:46 · 117 阅读 · 0 评论 -
24.计算属性 computed
- 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁- **计算属性是基于它们的响应式依赖进行缓存的**- computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化```html <div id="app"> <!-- 当多次调用 reverseString 的时候 只要里面的 num 值不改变 他会把第一次计算的..原创 2020-11-27 14:41:28 · 201 阅读 · 0 评论 -
23.自定义指令
自定义指令- 内置指令不能满足我们特殊的需求- Vue允许我们自定义指令Vue.directive 注册全局指令```html<!-- 使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 --><input type="text" v-focus><script>// 注意点： // 1、 在自定义指令中 如果以驼峰命名的方式定义 如 Vue.directive('..原创 2020-11-27 14:37:09 · 194 阅读 · 0 评论 -
22.表单修饰符 .number .trim .lazy
- .number 转换为数值 - 注意点： - 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值 - 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。- .trim 自动过滤用户输入的首尾空白字符 - 只能去掉首尾的 不能去除中间的空格- .lazy 将input事件切换成change事件 - .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上-...原创 2020-11-27 14:24:43 · 237 阅读 · 0 评论 -
22.综合小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2020-11-30 09:42:09 · 116 阅读 · 0 评论 -
21.表单基本操作
表单基本操作- 获取单选框中的值 - 通过v-model ```html <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值，我们只需要实时监控他的值就可以了..原创 2020-11-27 14:21:41 · 284 阅读 · 0 评论 -
21.选项卡案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margi.原创 2020-11-27 14:14:20 · 218 阅读 · 0 评论 -
20.循环结构-遍历对象
- **不推荐**同时使用 `v-if` 和 `v-for`- 当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id原创 2020-11-27 14:14:08 · 196 阅读 · 0 评论 -
19.循坏结构-遍历数组
v-for- 用于循环的数组里面的值可以是对象，也可以是普通元素- key 的作用 - **key来给每个节点做一个唯一标识** - **key的作用主要是为了高效的更新虚拟DOM**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><bod...原创 2020-11-27 14:13:57 · 181 阅读 · 0 评论 -
18.v-if 和 v-show
v-if 使用场景- 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素- 2- 进行两个视图之间的切换#### v-show 和 v-if的区别- v-show本质就是标签display设置为none，控制隐藏 - v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。- v-if是动态的向DOM树内添加或者删除DOM元素 - v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件...原创 2020-11-27 14:13:46 · 128 阅读 · 0 评论 -
17.样式绑定之style绑定用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <div v-bind:style='{border: borderStyle, width: widthStyle, height: .原创 2020-11-27 14:13:31 · 608 阅读 · 0 评论 -
16.样式绑定相关语法细节
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .e.原创 2020-11-26 10:56:12 · 169 阅读 · 0 评论 -
15.样式绑定之class绑定数组用法
v-bind 中支持绑定一个数组 数组中activeClass和 errorClass对应为data中的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid...原创 2020-11-26 10:55:51 · 1196 阅读 · 0 评论 -
14、样式绑定之class绑定对象用法
- 我们可以给v-bind:class 一个对象，以动态地切换class。- 注意：v-bind:class指令可以与普通的class特性共存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { b.原创 2020-11-26 10:36:29 · 561 阅读 · 0 评论 -
13.指令v-model的本质
从案例可以看出，v-model 是 通过<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'> 去实现的 ，v-on:input='msg=$event.target.value' ; 数据改变v-bind:value="msg" ： 更新数据<!DOCTYPE html><html lang="en"><head> <meta...原创 2020-11-26 10:17:47 · 210 阅读 · 0 评论 -
12.v-bind
- v-bind 指令被用来响应地更新 HTML 属性- v-bind:href 可以缩写为 :href;```html<!-- 绑定一个属性 --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc">```<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2020-11-26 10:13:26 · 184 阅读 · 0 评论 -
11.简单计算器案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>简单计算器</h1> <div> <span>数值A:</span.原创 2020-11-26 10:07:31 · 165 阅读 · 0 评论 -
10.v-on:keyup自定义按键修饰符
自定义按键修饰符别名- 在Vue中可以通过`config.keyCodes`自定义按键修饰符别名<div id="app"> 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 <input type="text" v-on:keydown.f5="prompt()"></div><script> Vue.config.keyCodes.f5 = 116;原创 2020-11-26 10:05:41 · 294 阅读 · 0 评论 -
9.v-on:keyup按键修饰符
- 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --><input v-on:keyup.13="submit"><!-- -当点击enter 时调用 `vm.submit()` --><input v-on:keyup.enter="submit"><!--当点击原创 2020-11-26 09:54:35 · 494 阅读 · 0 评论 -
8.事件修饰符.stop - 阻止冒泡和.prevent - 阻止默认事件
- 在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。- Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 `v-on` 提供了**事件修饰符**- 修饰符是由点开头的指令后缀来表示的```html<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -...原创 2020-11-26 09:49:37 · 1869 阅读 · 1 评论 -
7、v-on事件函数中传入参数
1、v-on:click='handle1' ：如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数handle1: function(event) { console.log(event.target.innerHTML) }2、handle2(123, 456, $event) ：如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event<!DO...原创 2020-11-26 09:32:30 · 525 阅读 · 0 评论 -
6、v-on事件基本用法
- 用来绑定事件的- 形式如：v-on:click 缩写为 @click;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{num}}&l..原创 2020-11-25 17:56:32 · 225 阅读 · 0 评论 -
5.v-model双向数据绑定
双向数据绑定- 当数据发生变化的时候，视图也就发生变化- 当视图发生变化的时候，数据也会跟着同步变化v-model- **v-model**是一个指令，限制在 `<input>、<select>、<textarea>、components`中使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .原创 2020-11-25 17:47:36 · 118 阅读 · 0 评论 -
4.v-once指令
- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="ap原创 2020-11-25 17:39:59 · 229 阅读 · 0 评论 -
3.数据填充相关三个指令
v-text- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题- 如果数据中有HTML标签会将html标签一并输出- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值v-html- 用法和v-text 相似 但是他可以将HTML片段填充到标签中- 可能有安全问题, 一般只在可信任内容上使用 `v-html`，**永不**用在用户提交的内容上- 它与v-text区别在于v-text输出的是纯文本，浏...原创 2020-11-25 17:32:09 · 691 阅读 · 0 评论 -
2、v-cloak指令
v-cloak指令，防止页面加载时出现闪烁问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */原创 2020-11-25 16:53:52 · 293 阅读 · 0 评论 -
1.Vue学习
Vue 是什么？Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的渐进式框架**vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合案例：使用Vue将helloworld 渲染到页面上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title..原创 2020-11-25 16:30:25 · 99 阅读 · 0 评论