From 19ba3b009ed6d4b70141a51026fb8c256c87e420 Mon Sep 17 00:00:00 2001 From: asd <374367073@qq.com> Date: Wed, 23 Dec 2020 10:29:16 +0800 Subject: [PATCH] vue --- html/html简介.md | 4 +- vue/class和style绑定.md | 165 +++++++++++++++++ .../image-20201221153546347.png | Bin 0 -> 23706 bytes .../image-20201221154507952.png | Bin 0 -> 2336 bytes vue/vue简介.md | 103 +++++++++++ vue/事件.md | 115 ++++++++++++ .../image-20201222100803116.png | Bin 0 -> 10353 bytes .../image-20201222101315624.png | Bin 0 -> 3364 bytes .../image-20201222110247849.png | Bin 0 -> 3957 bytes .../image-20201222111007833.png | Bin 0 -> 1372 bytes vue/循环渲染.md | 89 +++++++++ vue/条件渲染.md | 94 ++++++++++ .../image-20201222175835286.png | Bin 0 -> 832 bytes .../image-20201222175902811.png | Bin 0 -> 892 bytes .../image-20201222180149362.png | Bin 0 -> 2481 bytes .../image-20201222180209565.png | Bin 0 -> 3508 bytes .../image-20201222180542488.png | Bin 0 -> 1964 bytes .../image-20201222180600963.png | Bin 0 -> 1964 bytes .../image-20201222180642082.png | Bin 0 -> 2779 bytes .../image-20201222180936101.png | Bin 0 -> 1843 bytes .../image-20201222180952802.png | Bin 0 -> 1843 bytes .../image-20201222181015791.png | Bin 0 -> 1853 bytes vue/表单输入绑定v-model.md | 175 ++++++++++++++++++ .../image-20201222142339775.png | Bin 0 -> 1685 bytes vue/计算属性和监听属性.md | 172 +++++++++++++++++ 25 files changed, 915 insertions(+), 2 deletions(-) create mode 100644 vue/class和style绑定.md create mode 100644 vue/vue简介.assets/image-20201221153546347.png create mode 100644 vue/vue简介.assets/image-20201221154507952.png create mode 100644 vue/vue简介.md create mode 100644 vue/事件.md create mode 100644 vue/循环渲染.assets/image-20201222100803116.png create mode 100644 vue/循环渲染.assets/image-20201222101315624.png create mode 100644 vue/循环渲染.assets/image-20201222110247849.png create mode 100644 vue/循环渲染.assets/image-20201222111007833.png create mode 100644 vue/循环渲染.md create mode 100644 vue/条件渲染.md create mode 100644 vue/表单输入绑定v-model.assets/image-20201222175835286.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222175902811.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180149362.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180209565.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180542488.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180600963.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180642082.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180936101.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180952802.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222181015791.png create mode 100644 vue/表单输入绑定v-model.md create mode 100644 vue/计算属性和监听属性.assets/image-20201222142339775.png create mode 100644 vue/计算属性和监听属性.md diff --git a/html/html简介.md b/html/html简介.md index ed89ac6..580f88b 100644 --- a/html/html简介.md +++ b/html/html简介.md @@ -165,8 +165,8 @@ - autoplay 值为autoplay 视频在就绪后马上播放 - controls 值为controls 向用户显示控件(如播放按钮) - loop 值为loop 循环播放 - - 音频(audio) - - 属性 + - 音频(audio) + - 属性 和video标签属性类似 - src 播放音频的URL - autoplay 值为autoplay 视频在就绪后马上播放 - controls 值为controls 向用户显示控件(如播放按钮) diff --git a/vue/class和style绑定.md b/vue/class和style绑定.md new file mode 100644 index 0000000..84d0472 --- /dev/null +++ b/vue/class和style绑定.md @@ -0,0 +1,165 @@ +# class 和 style绑定 + +### 绑定HTML class + +- 对象语法 + + - 给v-bind:class 传入一个对象 来动态切换class + + v-bind:class="{类名:判断条件}" + + ``` +
+ ``` + + > 表示active这个class是否存在 取决于isActive 的值转化过后是否为true + + - 传入更多字段来切换多个class + + ``` +
+ ``` + + 附带如下 data + + ``` + data: { + isActive: true, + hasError: false + } + ``` + + 元素渲染结果为: + + ``` +
+ ``` + + > 如果data 中的hasError的值变成 true + > + > 元素的渲染结果为: + > + > ``` + >
+ > ``` + + - v-bind:class 可以和元素上普通的class属性并存 + + ``` +
+ ``` + + 附带如下data: + + ``` + data: { + isActive: true, + hasError: false + } + ``` + + 元素的渲染结果为: + + ``` +
+ ``` + +- 数组语法 + + - 可以把一个数组传给 v-bind:class + + v-bind:class="[第一个类名, 第二个类名]" + + ``` +
+ ``` + + ``` + data: { + activeClass: 'active', + errorClass: 'text-danger' + } + ``` + + 渲染结果为: + + ``` +
+ ``` + + + + - 在数组中用对象语法 + + ``` +
+ ``` + +### 绑定内联样式 + +- 对象语法 + + - 用javascript 对象表达css属性(不推荐) + + v-bind:style="{css属性名: data中定义的属性值}" + + 示例: + + ``` +
+ ``` + + 附data: + + ``` + data: { + activeColor: 'red', + fontSize: 30 + } + ``` + + + + - 直接绑定到一个样式对象上(推荐) + v-bind:style="data中的数据" + + ``` +
+ ``` + + 附data: + + ``` + data: { + styleObject: { + color: 'red', + fontSize: '13px' + } + } + ``` + + - 绑定多个style对象 + + ``` +
+ ``` + + ``` + data: { + static: { + fontSize: '13px' + border:'1px solid red' + }, + choose:{ + color:'red' + } + } + ``` + + + diff --git a/vue/vue简介.assets/image-20201221153546347.png b/vue/vue简介.assets/image-20201221153546347.png new file mode 100644 index 0000000000000000000000000000000000000000..077e4a8f682174b8b82378b1ade2d835e1bac00c GIT binary patch literal 23706 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 HN@xNA + + ``` + + - ``` + + + ``` + + > 当按下f12, 查看console里显示如下内容 证明我们的vue引入成功啦 + + ![image-20201221153546347](vue简介.assets/image-20201221153546347.png) + +- 下载vue 源码 然后从本地引入 + + + + +### vue 创建基本实例: + +文本插值:{{data中的属性}} + +html: + +``` +
+ {{ message }} +
+``` + +js部分: + +``` +var app = new Vue({ + el: '#app', + data: { + message: 'Hello Vue!' + } + //data属性就是用来绑定数据到HTML的 +}) +``` + +效果: + +![image-20201221154507952](vue简介.assets/image-20201221154507952.png) + + + +> 注意: +> +> 1. 一个vue应用汇挂载到一个dom 元素上,对于这个实例是id=app的div +> 2. 现在数据和dom 已经建立了关联,而且所有内容都是响应式的,这意味着我们如果在js中修改app.message的值,那么页面上显示的内容也会随之改变 查看过程中无需刷新 +> 3. 现在开始我们不再直接和html直接交互了,交互操作放在新创建的Vue实例内部 + + + + + +绑定元素的属性(attribute) **v-bind** + + + +html: + +``` +
+ + 鼠标悬停几秒钟查看此处动态绑定的提示信息! + +
+``` + + + +js: + +``` +var app2 = new Vue(var app2 = new Vue({ + el: '#app-2', + data: { + message: '这是悬停时的提示信息哦' + t} +}) +``` + +> v--bind 被称为指令。指令带有前缀‘v-’ 来表示他们是vue 提供的 特殊内容。他们会在渲染的dom上应用特殊的相应行为 即为渲染的dom添加一个属性 +> +> v-bind:+属性名="属性值" +> +> v-bind 的缩写是 : \ No newline at end of file diff --git a/vue/事件.md b/vue/事件.md new file mode 100644 index 0000000..8ed5748 --- /dev/null +++ b/vue/事件.md @@ -0,0 +1,115 @@ +# vue 方法(事件处理) + +### 事件监听 + +可以用v-on指令监听DOM事件,并在触发时运行一些javascript v-on 简写为@ + +事件处理方法 + +- 直接触发javascript代码(不推荐) + +示例: + +``` +
+ +
+``` + +- 在内联javascript 语句中调用方法(不推荐) + + ``` +
+ +
+ ``` + + ``` + new Vue({ + el: '#example-3', + methods: { + say: function () { + alert('hi') + } + } + }) + ``` + + + +- 事件处理方法(推荐) + + ``` +
+ +
+ ``` + + ``` + new Vue({ + el: '#example-3', + methods: { + say: function () { + alert('hi') + } + } + }) + ``` + + > methods中注册的是触发时执行的函数,也叫方法 + + + +### 事件修饰符 + +- `.stop` + + > 等同于JavaScript中的event.stopPropagation(),防止事件冒泡 + +- `.once` + + > 只会触发一次 + +使用: + +``` +
+``` + +可以同时使用多个修饰符 + +``` + +``` + + + + + +### 按键修饰符(自行拓展) + +监听键盘事件: + +@keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) + +``` +获取按键的键码 e.keyCode +@keyup.delete 删除键 + +@keyup.enter 回车 + +@keyup.esc ESC + +@keyup.space 空格 + +@keyup.tab TAB + +@keyup.left 左键 + +@keyup.right 右键 + +@keyup.up 上键 + +@keyup.down 下键 +``` + diff --git a/vue/循环渲染.assets/image-20201222100803116.png b/vue/循环渲染.assets/image-20201222100803116.png new file mode 100644 index 0000000000000000000000000000000000000000..cd0f6aa701a93b273439ad44f25b707c4766d839 GIT binary patch literal 10353 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 literal 0 HcmV?d00001 diff --git a/vue/循环渲染.assets/image-20201222110247849.png b/vue/循环渲染.assets/image-20201222110247849.png new file mode 100644 index 0000000000000000000000000000000000000000..fb8caa9fe7df00ea5bfac0666c20903e7ffbd506 GIT binary patch literal 3957 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 literal 0 HcmV?d00001 diff --git a/vue/循环渲染.assets/image-20201222111007833.png b/vue/循环渲染.assets/image-20201222111007833.png new file mode 100644 index 0000000000000000000000000000000000000000..11e44d68c19b16fdfe039787d2b1fdc6722740f7 GIT binary patch literal 1372 zcmbu<{W}u~00;1SO_L@MZLPGVWI1d(j~>I;ETcoINeJ6W2&*=AgvBN=aVbfWOsQ7Q z7N2d=T{z#Oo}y&7UK!lFU9Zu+Lm@l0Ce zxLnUYDpg)i+4BZ9+b8G;^SO#`+P-BK9gLZ?M||C3U|3$&&MGp8(5~q+{0|fReSqs+ zeKPj#g8$bueJXMO{N7}6MjoPJzDTvV(QXqAKP3Un_VwH^tMCkka|GvX@0W^YQ&tYT zyB$hWxmp7Nod&+}K24K0+GI~Yl4}JY9lv{H^aJ#IdEHDbr1oBtV3TPHG4aW^N}-tD z@`$(fb8WA@L(__ONok(csB3d?Y1_QL+M46e7rh1BM9*ctmt^}bCMeSWmN;ogG=Y*c zN7WOXTglwHg51C~t9MN`Eai}E{HAe=^+}IQX_lAD@}D7UYvcxWK00jhMaaqxi3`0c zb}1%;bYbGQQTm!$%7y!so6p8)hlDJbNzF7PvGGdpS|_T9RRI7E-C@(LJ@Y)F9~EmS z9eylbdOz3%rKl%zVgR{uPn8lagpXY4dBH=6P5(2dW}igk9iK;f|G`93oReO{h~KFY zWJxno$tpWHzd(R?4NwlYRLieaiumDg=3LFZWmR$U>@S7z;+bzle!?`>Gu>-)ai4-O z>=Jh?Rn5Lv-5B94T0u?u{1BDzhNqW`c!v6fGF~)Qs<`r9cJ}4&)BEEcf=p2<#-LAs zF?W_QdKVi8>#^zx!Y8qL-7x}`N?YR5K3e*(cV>#<5_$0}`JRCf+XlKGT+9>V_3mwr zQzI@fdKD}(v`${_VsOHdrNcUiDCr1VAI(K6IcwBX3wQcOUPC5RtQT1hvI_y0gaDCK z#N)xI!gWH;Wk|x^fNYg>azxfugjP5}U>?XmBs&^}H=!ypoVV$(jgvG0gH}BPwfp*| znNw{^MOZi8#;O6uUSKCkF;1q%f{|OW0hy4XObB}3dWKmjdBWPhkWf)31*SM(7N0Pw zw14Qb#_!HITe9^DHcX-$+$-~hwv6Nsc(NcA!aHQX-Cc}^M2oHav&DlG565Ul+XXY%0JbSBHHs2P3~;f}D|UgR~q1o9;xoVAWb7G`(|lE)!8A7wY&{)kAggJXM~zFG_$ zI|>{e&4rxvnTdkOp0we`z)GLxjX%2EcW4@Jn8rNP4mz-8?`AA+Gcrn4u2~_h(_EdJ z@KN7T0Bbo<*-5}43bXRMt11?z`qBFIZ?NMH>)4|uK*Szq1xi^hpY!Su#U`#un{xbi z=7{TCzt}{EL$#fWk0&^$AoAF+esD51n1R+lBpzBoz%0Ga@{&)o%Xd!0^1^0F9zeDt zcmP_Kk1A5_4(pXolAeD2JQ=p`C8k?V=#3(p(Qg?NHqe#VHvlEobT^nIO^8}4>K?mc|+G&O_F6+y>sda9R16& zV0%pC))i6!w_~n-dD#JyWd9W>ta5qafD7yTUx56K9uYnCyHT5{xX)l!O@PmSe;gM} G%={Pg=a&`$ literal 0 HcmV?d00001 diff --git a/vue/循环渲染.md b/vue/循环渲染.md new file mode 100644 index 0000000..aeed5c3 --- /dev/null +++ b/vue/循环渲染.md @@ -0,0 +1,89 @@ +# 循环渲染 + +### v-for 遍历数组 + +语法: + +​ v-for="(item,index) in arr" :key="index" + +> ​ arr是被渲染的数组,item是被迭代的数组元素的别名 , index 指代数组的索引值 + +示例: + +``` +
+ 第{{index}} 个元素 值为{{item}} +
+ + 变体: +
+ 第{{j}} 个元素 值为{{i}} +
+``` + +``` +var app = new Vue({ + el: '#app', + data: { + arr:['a','b','c','d','e'] + }, + }) +``` + +效果如下: + +![image-20201222101315624](循环渲染.assets/image-20201222101315624.png) + + + +### v-for 遍历对象的属性 + + + +语法: + +​ v-for="(item,index) in obj" :key="index" + +> obj 是要遍历的对象 item 指代的是对象的值 index 指代的是对象的键 + +示例: + +``` +
+ 键为index 值为{{item}} +
+``` + +``` +var app = new Vue({ + el: '#app', + data: { + obj: { + title: 'How to do lists in Vue', + author: 'Jane Doe', + publishedAt: '2016-04-10' + } + }, +}) +``` + + + +效果如下: + +![image-20201222110247849](循环渲染.assets/image-20201222110247849.png) + + + +### v-for 遍历范围值 + +``` +
+ {{ n }} +
+``` + +![image-20201222111007833](循环渲染.assets/image-20201222111007833.png) + + + diff --git a/vue/条件渲染.md b/vue/条件渲染.md new file mode 100644 index 0000000..2cd9703 --- /dev/null +++ b/vue/条件渲染.md @@ -0,0 +1,94 @@ +# 条件渲染 + +### v-if + +v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染 + +``` +

条件符合

+//show的值转化后为true的时候显示条件符合 +``` + +``` +var app = new Vue({ + el: '#app', + data: { + show:true + } + //data属性就是用来绑定数据到HTML的 +}) +``` + + + +### v-else + +也可以用v-else 添加一个"else"块 用来显示条件不符合时展示的内容 + +``` +

条件不符合

+``` + +``` +var app = new Vue({ + el: '#app', + data: { + show:false + } +}) +``` + + + +### v-else-if + +`v-else-if`,顾名思义,充当 `v-if` 的“else-if 块”,可以连续使用 + +``` +
+ A +
+
+ B +
+
+ C +
+
+ Not A/B/C +
+``` + + + + + +# v-show + +v-show 也适用于根据条件展示元素 用法跟v-if基本一样 + +但是v-show不支持template元素 也不支持v-else, v-else-if + +``` +

Hello!

+``` + +不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中。`v-show` 只是简单地切换元素的 CSS property `display`。 + +### v-show vs v-if + +v-if 只有在条件计算后值为true时,元素才会被渲染 + +v-show 是不管条件为true还是false 元素总会被渲染 只是 如果条件为false 元素就会被附上display:none 从而隐藏 + + + +> 引自官方: +> +> `v-if` 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 +> +> `v-if` 也是**惰性的**:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 +> +> 相比之下,`v-show` 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 +> +> 一般来说,`v-if` 有更高的切换开销,而 `v-show` 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 `v-show` 较好;如果在运行时条件很少改变,则使用 `v-if` 较好。 \ No newline at end of file diff --git a/vue/表单输入绑定v-model.assets/image-20201222175835286.png b/vue/表单输入绑定v-model.assets/image-20201222175835286.png new file mode 100644 index 0000000000000000000000000000000000000000..f7ce7c79986803b0860a075760a348192708e03f GIT binary patch literal 832 zcmeAS@N?(olHy`uVBq!ia0vp^oj~l$!3HGj_>KZ8W_C{($B>FSZ*LpsJ#vsZ`q6xK z$hx3Me4XAmWZ4~>gjBk8i&<)zesiq8GHt<;N&F7acOK?C8GVrR&N(p_1J4he!*BM6 zSK4#8zy1Du*L3kkj(N`$cgAeH|6|9&Gw}+{4Lcg5 zS^r4QKF}ig=+MHmMK9MCt7Oi4^zq}ytKIXTTV68BmF#kTq(5P6uk*i|=Z^b^hR*O& zTYJqO9j$20#>^Y+pn32%qm=rH(lV@PO z{CAI`!DimRn!~Su{faA>GtU?Eh}Bo(4C8yZ;h2a+jDvMej{QYZ9fwu+kRk!ZuaA}%Cdis_q_&?6yfW<6IswxsXKXPYOL_p);5J^x^{{_|ujPJ_Ne;{Z8x!_e=V#>+AF1&ie9d;gwys=P!KN zuWehL%h%Pa>Uq;qE=lq6yr{q>c~NC9Kfz5e}he*F419`EPRJs0Nc95O94pv>UM za^0HqUwb8RB3r$34*3=Q+^e?0r=v)D=V_GxaES+%On zUZclq(vou;8Z8T+e_gqqXWoj5w&5I(3-5<*J)>}W-6FT5qPqfauT*%MqMLR;zO_TW z)_cir^H2V*`PV-`FSql!EiY!er?bz^c&q5tRkuBsoXgO0Yd-vp`hYIhMRB_u)r*q%!;OqBep8V)q@B@`}suoA!uC2*3TY pJmSWO$A>Q literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180149362.png b/vue/表单输入绑定v-model.assets/image-20201222180149362.png new file mode 100644 index 0000000000000000000000000000000000000000..75c9807d5bb91b0952b4ca0eff69cef88ee7fa59 GIT binary patch literal 2481 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 literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180209565.png b/vue/表单输入绑定v-model.assets/image-20201222180209565.png new file mode 100644 index 0000000000000000000000000000000000000000..e500bb6862553b0a71bfab740511b4263aba002d GIT binary patch literal 3508 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 JT&ZFI>K{#$;$i>* literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180542488.png b/vue/表单输入绑定v-model.assets/image-20201222180542488.png new file mode 100644 index 0000000000000000000000000000000000000000..cdbd00348cd9249ddda4d7d10650526d09c0d544 GIT binary patch literal 1964 zcmchY={FmQ8pb1TFd@aYQ?>7mt&|!;8k)A&*jxMFB9^AoO&UU4)HY&QV~eRORUwM8 zv^lu8L8DhwYpkUqs3nP|o(9c;Ft}3Z2OiCkWp31T;%#;$aW>e6@mR}zB z)F5JgHWlYSORYgM1R^pSf&VePFIVy793ibGum~adKX7ieE^#>KS=rg51BT#KU}Ixr zQ)_GL?@qr3B_<{ovvN;G2t#*kQEeI3)heGUnVFf8C=_au$rQrB2XwQ7F&L@r3zi)m z`q2d@5`wLru+{w5gu-6zh>TB)neQINgB`@M=CtG^Vq%>9e0((beZ`BG$5NvXi07^z!cj%gM6PNN_T&}1!tr;N=}ii3 z%((*x-y(%KJ2{zxRN<}%Fi#-+q~t+S8kDo9>>F=2+86iyOeSf11*=B&MFWN>B<$EE9 zTVae)SAZj+|8{#k6@BksDw%9d;ypR$h)qpR-JF~B`2bhP+ZrF$>4O&nxUW1f>H$O- zM?$mE!w}lRfhiw8>0=Tfo`*uANMbHJ2(X_m9i!ryPEW(nJy{HJq~ii>{6hJi%`{Fd z+5;c%F8}m+e(c-st@=+N$l+s>nDc%PWs0m?F{N05mwNj3a3`^dgJo8nJJ)@UT2C5+ z(74>o2^dV={rg3aa`1TG$vYCK_8E=&44dU<`lj))wh(Om!YOt;0X9J1zPjt%4It_;&R>#p+B=UlU8!k|>JFZ6;J z4~ey!kdUy=-H$9QD_i)!Hs*Ef7IlB$gwocwvpOo*r-LkTFU--m{H(@n#}$T)S$cQ% zZR)wari|k=k#wB#9rP8%+){z#dZ)RvL|HQIi-CO&gbM!~nksND-f=cI3gx~qJyvHh zwBa;ZPsp`xy01{*e|xbnqdoDQu<#ChCz#1(&M=uSymsa=@)T^JGXL9nSFT0aWh<+J zi3t}}4q$=veT~iDQTbV4zqQ+(OI{|dv)R&=XdQWkKvG_wm|l$b9chE-c3~ya^W;Ej zK3TfmXR+vN?2;#*cF!|p9|Quwt|?J89yQI%OY$H_rwB_`dv~}{t?R;+>>Zv7`tpZT z%PlbJd)|pQN$HHqIdrA{HdtgY>L>YaZ%aGrJ)OCW^b%Wew+XllbQw zdYiRl8Hxy51_$`*`bKboAI}Fjy7)SUn+&w=yDkxAhDr~9;?+&`39YIT?S85Jf;7{s z>CrL1IcsB+R8{qpAav0Tw(vZ|)WKNh(u1VDI=^dto78%b{@6d<8)hDA8)zYmHM^fD z1GQFS9dH~$x0Ih%Q*xAj5#y29d6ZI%T+skeLf$}8MD>a@IFE=tv-iIeI`s|@4_A&3 zSu3Zf-BE4RyJvF{?k`e10TfrJ1tvuFTO~8ABwQu*T6A?a6{F2Sseg;C{{~pQZ4q}n zikGmd^+eDrvbhv`>4{a#`CW1-42uiEGnsk`|AuXgCDwKd zWse$84r!&{W*7}63R7HQqu_zIfgZzPlxR*$W0@}Q%Z&zHeG}Pwo~*$|xFv&ZU$k6a z*ZK$9w71wV79Icg=w!yI zkYt-ZbF>VD{G-)_nRF`n*EFzS{tM9R9*=#<)(3QWn68f!%A?V8#%sVx>I8?s2@yLg zvEM_y$tg9O^A6Z4*Fj@iEP1jeQTB_<_LRU9GWFM?KY=sNi_oLPK-o|4Na-qT%^P1$ zKnp~&Fw8wc(!fDrL?GGE+X9?oXK}N@crjnQ@(wmyPoG6rz7I!xp%m`8YD2 znPqRIM)q)BT@&IZ?10&wPu2Ms4uOJTgq)*|Qna-CM?#?T{|Bo-WVH9*N(;_OoV76E Mnyn+e5f+gA7umbOR{#J2 literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180600963.png b/vue/表单输入绑定v-model.assets/image-20201222180600963.png new file mode 100644 index 0000000000000000000000000000000000000000..cdbd00348cd9249ddda4d7d10650526d09c0d544 GIT binary patch literal 1964 zcmchY={FmQ8pb1TFd@aYQ?>7mt&|!;8k)A&*jxMFB9^AoO&UU4)HY&QV~eRORUwM8 zv^lu8L8DhwYpkUqs3nP|o(9c;Ft}3Z2OiCkWp31T;%#;$aW>e6@mR}zB z)F5JgHWlYSORYgM1R^pSf&VePFIVy793ibGum~adKX7ieE^#>KS=rg51BT#KU}Ixr zQ)_GL?@qr3B_<{ovvN;G2t#*kQEeI3)heGUnVFf8C=_au$rQrB2XwQ7F&L@r3zi)m z`q2d@5`wLru+{w5gu-6zh>TB)neQINgB`@M=CtG^Vq%>9e0((beZ`BG$5NvXi07^z!cj%gM6PNN_T&}1!tr;N=}ii3 z%((*x-y(%KJ2{zxRN<}%Fi#-+q~t+S8kDo9>>F=2+86iyOeSf11*=B&MFWN>B<$EE9 zTVae)SAZj+|8{#k6@BksDw%9d;ypR$h)qpR-JF~B`2bhP+ZrF$>4O&nxUW1f>H$O- zM?$mE!w}lRfhiw8>0=Tfo`*uANMbHJ2(X_m9i!ryPEW(nJy{HJq~ii>{6hJi%`{Fd z+5;c%F8}m+e(c-st@=+N$l+s>nDc%PWs0m?F{N05mwNj3a3`^dgJo8nJJ)@UT2C5+ z(74>o2^dV={rg3aa`1TG$vYCK_8E=&44dU<`lj))wh(Om!YOt;0X9J1zPjt%4It_;&R>#p+B=UlU8!k|>JFZ6;J z4~ey!kdUy=-H$9QD_i)!Hs*Ef7IlB$gwocwvpOo*r-LkTFU--m{H(@n#}$T)S$cQ% zZR)wari|k=k#wB#9rP8%+){z#dZ)RvL|HQIi-CO&gbM!~nksND-f=cI3gx~qJyvHh zwBa;ZPsp`xy01{*e|xbnqdoDQu<#ChCz#1(&M=uSymsa=@)T^JGXL9nSFT0aWh<+J zi3t}}4q$=veT~iDQTbV4zqQ+(OI{|dv)R&=XdQWkKvG_wm|l$b9chE-c3~ya^W;Ej zK3TfmXR+vN?2;#*cF!|p9|Quwt|?J89yQI%OY$H_rwB_`dv~}{t?R;+>>Zv7`tpZT z%PlbJd)|pQN$HHqIdrA{HdtgY>L>YaZ%aGrJ)OCW^b%Wew+XllbQw zdYiRl8Hxy51_$`*`bKboAI}Fjy7)SUn+&w=yDkxAhDr~9;?+&`39YIT?S85Jf;7{s z>CrL1IcsB+R8{qpAav0Tw(vZ|)WKNh(u1VDI=^dto78%b{@6d<8)hDA8)zYmHM^fD z1GQFS9dH~$x0Ih%Q*xAj5#y29d6ZI%T+skeLf$}8MD>a@IFE=tv-iIeI`s|@4_A&3 zSu3Zf-BE4RyJvF{?k`e10TfrJ1tvuFTO~8ABwQu*T6A?a6{F2Sseg;C{{~pQZ4q}n zikGmd^+eDrvbhv`>4{a#`CW1-42uiEGnsk`|AuXgCDwKd zWse$84r!&{W*7}63R7HQqu_zIfgZzPlxR*$W0@}Q%Z&zHeG}Pwo~*$|xFv&ZU$k6a z*ZK$9w71wV79Icg=w!yI zkYt-ZbF>VD{G-)_nRF`n*EFzS{tM9R9*=#<)(3QWn68f!%A?V8#%sVx>I8?s2@yLg zvEM_y$tg9O^A6Z4*Fj@iEP1jeQTB_<_LRU9GWFM?KY=sNi_oLPK-o|4Na-qT%^P1$ zKnp~&Fw8wc(!fDrL?GGE+X9?oXK}N@crjnQ@(wmyPoG6rz7I!xp%m`8YD2 znPqRIM)q)BT@&IZ?10&wPu2Ms4uOJTgq)*|Qna-CM?#?T{|Bo-WVH9*N(;_OoV76E Mnyn+e5f+gA7umbOR{#J2 literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180642082.png b/vue/表单输入绑定v-model.assets/image-20201222180642082.png new file mode 100644 index 0000000000000000000000000000000000000000..5e16446e79954f1eb4f926eac6ceba31b7da909b GIT binary patch literal 2779 zcmcguYd8}O8{QmdX0|ADJ|sycr(tuJWrR^Fha}{bEX+BQq?zMLQBLcn9M+44!dh#n z#6(W7W6bNAFy|bG*RSuoz8~NB{ri4AhwHlUKhN{r&vo5N_E?NCL<#}`0EDe9(U%Tt z$3X;vK?nKjm|Y_P04cIUn>j@0FZ{40$~emkECsUUv?fgV+I@Z&%AE22o)K4n=Mcp# z+#t!Ze6;z@kE4g_^+f`YBxq0itn4Z3O+`7bpKOkWUbmr%FY98@KcQHMCP0BXRONXa zJw)!aPtQLX!K-NRDcd*t@(Q2Za${dum28KFt-t&j#SvSNeR}vD_|U}@WYj#b!d($f zBpTwjwbW$--;p4?AyFN{#OewAG)v$^^OtdrikFz|L#pmU#3LF9JPDa&{7_gX4=C|p z@KW-e5ZNf2@b;|^pIO}Cp!59vynAr4$kDT|%#o211Sxa&GUn&8&TrprM;bx|rtp%h ztE)~OiSa+idIKHDr?toNVo0Lsr&&8p~5n=PKI95u9DW>CH4cS>(^z6 zr~j(B<{1*A-4kmh#1luQZ*E*|mY@~PYIs9BdP?m+um9@5{Pw!Dvq&e|#I7&=5^{2t z;8)u%r`omG7K(Sr;e@B~s4Lf+HK+_mVbLp6-W36=VXsAM%gR%!Gsv>hwPrQkz?2N$ zTN?K<-SupLbnmXBfn{y0Fb@61t%Q9r+Sb;V1J16{FbPAFv%NC_WAjokO!#Q(Ul0eF zm>SRq%Zu3A3SOOpojmQHlHs+PH!zicO)Kbuj)&gjl5#^?HjU2<3O+YAouj-f#TGQR zx3^Cc%m4x)1TIF~RvVyVdT7|cF(vf!_7n(;r2e>rkLgYEDbni+Ztwt<2w5aL98B8L z0ee?hclqs)p`oV5#ma88S3Z8kDYdH4os6xsHqZ^9C|d!x5;5!s`sV?=yIWMh084pS zfE7qdNy(D-mx3a}@yp-hnUc^pFxJ!8NAoCo;)t!n=V;Ni$EwJgPIBS|GE17rPdBeV za{2E`f`_^XZ32Wfc0C+dsYsstQ4B@66zRc}jV%gN6>^VX4w{~xrqb!D!*ziqTpf*; z?Ef}-aB%QQ^g;(}ZrSP{dbqMV;lY=w)UnVHe5ZA16m!$t`zZye5YS9VLG#<&{nR&a z9#mAQ0r1$GgYM~5u~}OB!8uDueHq;ezNj*Bke$lTx(wusKz2V`IV3{K{HKG^^6qw6 z;gw>ei?pi?^Mf_@_$kO={r$n5QKN&Ux<^DDwYIjdzq{_=R(JwiB}il)$Vvv^rIHGA zDJs%HXRSOv;c~LrzP)k&POTw0y~hvkl#yWx%n|#KIyY@_!t6*c)#$L*fk82#NV*Wc z0nFXxS(3UP_T3s=-g4^>&y6Vg$lHRO-wc@YAJz7`Lo;#eyF8n_&9%`GNBr~`!^m6E zdk}91{zZe}2m{Vt%wuL?nASbaCG3x>m^s7TDP1?o-3aOHkkNGoE&xrEI{0T>$a zfB-n54YK|?pTK%ud>-j~Ir{}Zpw4mYON1@+R4a`) zR<;_8p+m~tRz+Wx5UW{7@>||l>vg4*0!w8D_GtWEUv$+IXGTJ@NV)QN7`ypgMG5BA zSgpuroJcln`TAkvn(;lQ3$`NO8LG%YH6HnJuPSYd9_lXIc%KAYnw}{QCIT`r<=yH( zd&6cqcBj908d)4#UmbBB0n)d$5CqLLUZgugqqiv(w8lrA#7-C3Y7g~Jc zIHUZdJKJk8#0?4)JcBZ0Cn%G>IOD9epj1dvgQRr&6R{8?p*2*0`z?yy&-tqD8=($- zpqhB6@g~YJ`kon~gbv}pgXDi@#NVx@gJfaxOpLqKcNct3No!PkMPA(EdbShmFyw^m zN05EVB+U^D-Xm~V z1?0iYRr`zMekb@a#&C~MQc$?%zVgb3;s*>O6rJq!=fnRhe|Jb@(g;w0>NG*kCa-Y5 zWwm->Z0z*;G~o{RoYmIJj}EVyP8tc-)?E|F@9@t$2T>kbMy`}0_|cbl<#ZEI8}5Cb zk=|^l=fIS`E7SEAUkhIB>f_HJ&hD4hilVlAo-xF|&-YWZ#|xE}yw?l|jYE0|nve|+ z22sPm!`Zx<{9#!_gwWqOrC8FKuIq48pMB&}JrJQiKUVf}a1ORk>I>6*4}UFm!8+3U zJ_o-$+4->Ow&&znmbIXv2aso(Uw1q@A_oo)>=~}4#klu&6N0SFISa>r#cj7Jm_!E- zny=^-8{c@Xm^z713L0kLjuxKept|F3r@^qva+pzJnt|a-2N8}Whz~5oEVFU*kQ|tz zirN<8OF2z^O;cU>qHHl$HoZjMIKqG>-epbHD~&|G2F~&CKV|W9DUmx*%Z8g+w8bm_ z@I0QGY=rA4+(c+_Ve7_o4OCz6u1xdH-9K}m*%!W(Wn%VO+PO*oeZVt;Uf^$@f7b?e zp=12KObw__z!lc$E`Fy{u=rBE8-+OwtBE=4qjjfuj{e1`H)?V8YhmsPmvN4Q+v#-J=-NYVuK~@+ZsxB&06vIMhupqqag%aT8Z|KjYz(GN7Mx<>_>xY1(K5 z^@Wk~{ijF5w88-SE-fkhBlWW1J%m744a>b6-NW8sfbSUMKNALt%43TJ*xlDzWOB*! zQUg2TjcS2?(FU*^(|2Tp{x%t}(gjeqLrcfNvh3D*?JbbsZ*9of?Dra?VIIe|-s=K?Xpg zyOVV^WZRtV%djSqS#{O3oMmkGF1(lG0Q6(S?EFex+kEL-vwmbh*~0a7K8l57B)zPg z< zURS@gveiq0J6Xy|Jb1E0E>?=|T0Swfd=C@5Bw+NB$O!D!($e{4R(o={Eru$KHgs`u ziFrPfUqN>z-X}PSFjBc?x{1x~43krjwN|YUbx-AZ-_SC8(&+iDsfn^08Yq?r%TQY~ z?RMs?NkamjotHySk+}RB(WJ9_!awoFxUyZ41Of&?&gi`D;;vDCjc4*h8m8Ug1egV5 z;_lia#b?lb^wXEgk?SEz5Ug+Qqo~$|-yrS$;QTmnnfgG-pOzZ6l4@A7N2{ARf%Mr%_3BZ-kbOPrmw8Jig*4yIIew{){(3hl_35RI* z_VnJ%617U<#jRDi2$J0C6att{7vwqUqLq%6{sB`u` z<73pG?87Sf;yC2}j#OM;cEj(Xx>?u>k++?klGvQC$WS9FfQ5|J5@*bm4 zR(B3ZPD_Jg674(k%)`dLwYo=t#gD7n6`Lki z`%&Dhc})oZJ)Eb-FU8TlEg!AEJGL@%Ry0@K5oE zkVC1+JJ{Hmxbyxx#3BU#C1lw3#a}_rWnfM$ER(wQQQA?j<%>W43vU zqUtJx;%?p;F4$u0`o>okImr=an1(CHlZ>1V@MhX4l@oS9Ff0=f)zvme2|olryRatwB9z1Nj#bsII!bdWh#GJEk6j z0EkiV5Z5w}8643XZbxRXIQ8&#NFDK}rm09f_MxI;W4+h}wGe#+0JC;~h^)1SVHJ`Rk4FQPq$rbmCR6tL ztuAbJig-=;dxXYT(~1+{JtA1R&jl^#Jw6+(iuhps`r6q#q*rKYsP9-+Zd7wfn#s%} qo2HeqM9$Fq7n%O2Y5(7FU3WFG`F&O|vrzL40WfzTxB8RkQvL?X$#&2H literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180952802.png b/vue/表单输入绑定v-model.assets/image-20201222180952802.png new file mode 100644 index 0000000000000000000000000000000000000000..672655a1b6253023c3e31b76ac21f4168c79b863 GIT binary patch literal 1843 zcmd^=`#Tc~7{{j=$01K7HI;J?l7{xAi)g71vgE#vT&CNTyPR6GwM)5%W0SSSFiIG) z5JlNas5K1PaW=QYaanDcwwamE&hO_r|G@d-ec$K%e4gj~Yz(GN7Mx<>_>xY1(K5 z^@Wk~{ijF5w88-SE-fkhBlWW1J%m744a>b6-NW8sfbSUMKNALt%43TJ*xlDzWOB*! zQUg2TjcS2?(FU*^(|2Tp{x%t}(gjeqLrcfNvh3D*?JbbsZ*9of?Dra?VIIe|-s=K?Xpg zyOVV^WZRtV%djSqS#{O3oMmkGF1(lG0Q6(S?EFex+kEL-vwmbh*~0a7K8l57B)zPg z< zURS@gveiq0J6Xy|Jb1E0E>?=|T0Swfd=C@5Bw+NB$O!D!($e{4R(o={Eru$KHgs`u ziFrPfUqN>z-X}PSFjBc?x{1x~43krjwN|YUbx-AZ-_SC8(&+iDsfn^08Yq?r%TQY~ z?RMs?NkamjotHySk+}RB(WJ9_!awoFxUyZ41Of&?&gi`D;;vDCjc4*h8m8Ug1egV5 z;_lia#b?lb^wXEgk?SEz5Ug+Qqo~$|-yrS$;QTmnnfgG-pOzZ6l4@A7N2{ARf%Mr%_3BZ-kbOPrmw8Jig*4yIIew{){(3hl_35RI* z_VnJ%617U<#jRDi2$J0C6att{7vwqUqLq%6{sB`u` z<73pG?87Sf;yC2}j#OM;cEj(Xx>?u>k++?klGvQC$WS9FfQ5|J5@*bm4 zR(B3ZPD_Jg674(k%)`dLwYo=t#gD7n6`Lki z`%&Dhc})oZJ)Eb-FU8TlEg!AEJGL@%Ry0@K5oE zkVC1+JJ{Hmxbyxx#3BU#C1lw3#a}_rWnfM$ER(wQQQA?j<%>W43vU zqUtJx;%?p;F4$u0`o>okImr=an1(CHlZ>1V@MhX4l@oS9Ff0=f)zvme2|olryRatwB9z1Nj#bsII!bdWh#GJEk6j z0EkiV5Z5w}8643XZbxRXIQ8&#NFDK}rm09f_MxI;W4+h}wGe#+0JC;~h^)1SVHJ`Rk4FQPq$rbmCR6tL ztuAbJig-=;dxXYT(~1+{JtA1R&jl^#Jw6+(iuhps`r6q#q*rKYsP9-+Zd7wfn#s%} qo2HeqM9$Fq7n%O2Y5(7FU3WFG`F&O|vrzL40WfzTxB8RkQvL?X$#&2H literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222181015791.png b/vue/表单输入绑定v-model.assets/image-20201222181015791.png new file mode 100644 index 0000000000000000000000000000000000000000..9cf8a246367003a550451e4147450c4f39e887d8 GIT binary patch literal 1853 zcmd^A`7_%IAO0#^Hd}f)wzW~SE3P-&F6xMEHS8iAwxMyg;(AxgRO%){5_-H{qe2!< zj|f_-NGjbT&WKuDik3P;H6b)qn@C-aBN8@$!2SpC%x6CH%rl?onP;9~K6(CVq&~K9K80BFH9I81N9W-H_CiUB}Z2j%Gzn8B1!BNE@v9PeADJ;_e>aykE9xjUWe z+3!9POh4u!P3kM00)>yFAJOh-0`#S)!KFjTYon;Q5<)`W#az`_>J6FM{Y?PtzCfg8 zbU_X#FG-@IyIWf%n{=wZHxTt8XLnt^=ay~`%zD76v%ni^q~Ej_kYS?(2JnZIfX80X zwEi^F(tQ^CuY@{PxIZ>F7VhRIc>esx?yh?0C?yM%o13d#nY(Uq@L)wd6!=t|q(dYS z9ub#k>Lz9JUact1lgTk*OQJxgIIcQ>onz7WF>YlR*}$FNCOtFI zUtsJAb}ev+em;b~pQN*?kcFT|Ws^??2`vh#fQ|e(9?-_)1=fs>Jc;ZYmlG80i^HWZ z$I}*;h)1BO6=$(r-Q@*&ugA~y;P_~z_G$WGhegZcE=yGT;sx`B;-<#NDniEzlu{!r z5bC!VGSydAMMd_j4lLFVtcQ-(&z%b(YQ53(J?pTvv;@gEt(C!28U}wCiHJ@I*GeP% zb#KCpWfiOo=*K5r6rHa!zI+404_9WX|Nij&^FsPY2z%soh-7Zfsj-#7&CvTk$l|69 zm9I7(=zN@9faj;_hV+$ox)Pg~ad`3|*Nv?|bcbm=r{div*H#OC!Rx(mBSgcVJCgfF zaB=+>wx?`*tj{x!MZ&biCIDm}j0x+bey1W&F>C4KuIw)O3B3f4vWwvCz)o80|l&WKb=>crY)(uNzK~$|BtS zcgp_?UMRA%TX}qMUp1!xmQVG|xBOLzM3IPXIfh1~sgTB&mRPHj{@>I%2YV8UWY$=N+i+p zPoJbJRTvV9)D)%}I2=B@z1>D264S|KUT9T+5#|lXa;M#d<}Qi}?{_F;1+{_bh}ULN zhWuexmUYlHdt@~O_Q!l3f0P@+k$a5yCw7F=I|k;C#0gSj&MNONWCd`3`eNi=XVAGr z1ByLL&w&;9@S4hCn@e`{(cjvn`8l-~F+46>SeyD(7gyT&+z4|JRoYE0%^6@<9wV&Bje{|52d|BKAZ$9+K)k;r7wfVk~ z!Oa*#VAVXjZRhUtEA~hfY&=vjlzW*J#Em1r{45@VfsCw>42k1V` ziRVhbC05Kihj6SCIx+%B^Mdns8l;V7AoC;KcI&z-IwPV%9w(qX`V+3W7GC38ALA4R zHyY{{2eJnPkRwqWSyHay)gQtC3ET)G+MJQ*RvQ_AxLtvJVM1}4#5thOI?vlOaYwg% zJA;8?+muD)DI`DHP#9Km;BL4u?I{^YcDe9B8jWuIa#PKw+_W;fDJ*P3ZP?mBXn@_> zZhv>La0)_Ac{_aXzz32;$}|)I&2mYZ|1aDgi1u2&S<=8s6LoUEV?LvEyTrsLbJuC0 zRL;w$G$3SigDYG;7%=hOEO0*migwhA{|iEiP+4YA8`pG}Yu+M&@ +

Message is: {{ message }}

+ ``` + + + +- 多行文本 + + ``` + Multiline message is: +

{{ message }}

+
+ + ``` + + + +- 复选框 + + - 单个复选框 + + ``` + + + ``` + + ![image-20201222175835286](表单输入绑定v-model.assets/image-20201222175835286.png)未选中 + + + + ​ ![image-20201222175902811](表单输入绑定v-model.assets/image-20201222175902811.png) 已选中 + + + + - 多个复选框 绑定到同一个数组 + + ``` + + + + + + +
+ Checked names: {{ checkedNames }} + ``` + + ``` + new Vue({ + el: '...', + data: { + checkedNames: [] + } + }) + ``` + + 未选择时:![image-20201222180149362](表单输入绑定v-model.assets/image-20201222180149362.png) + + 选中时:![image-20201222180209565](表单输入绑定v-model.assets/image-20201222180209565.png) + + > 注 选中的时候v-modal对应的是input元素的value 属性 + +- 单选按钮 + + ``` +
+ + +
+ + +
+ Picked: {{ picked }} +
+ ``` + + ``` + new Vue({ + el: '#example-4', + data: { + picked: '' + } + }) + ``` + + 未选时:![image-20201222180600963](表单输入绑定v-model.assets/image-20201222180600963.png) + + 选择后: + + ![image-20201222180642082](表单输入绑定v-model.assets/image-20201222180642082.png) + + > 注 选中的时候v-modal对应的是input元素的value 属性 + +- 选择框 + + - 单选: + + ``` +
+ + Selected: {{ selected }} +
+ ``` + + ``` + new Vue({ + el: '...', + data: { + selected: '' + } + }) + ``` + + + + 未选择:![image-20201222180952802](表单输入绑定v-model.assets/image-20201222180952802.png) + + 选择后:![image-20201222181015791](表单输入绑定v-model.assets/image-20201222181015791.png) + + > 注 选中的时候v-modal对应的是option元素的value属性 + + - 多选 + + ``` +
+ +
+ Selected: {{ selected }} +
+ ``` + + ``` + new Vue({ + el: '#example-6', + data: { + selected: [] + } + }) + ``` + + \ No newline at end of file diff --git a/vue/计算属性和监听属性.assets/image-20201222142339775.png b/vue/计算属性和监听属性.assets/image-20201222142339775.png new file mode 100644 index 0000000000000000000000000000000000000000..c4cfb4cd4c35793afc77bfc2c9a0f5349528a107 GIT binary patch literal 1685 zcmd6o=`-629L9gBqbc>Go7$>6%9dhcOM?8rIC_KCq})IbWm7SO@`EuN*^V zHULCX67cKdebph|%czy3h3G=lBX4A%g*!rwYewPyehXS;z~FpOick^A-s9IR13<6~ z19;;0FChL>*x{z=_&iKHn^y1JrTdWtvpe`yb!jq^t}x3AaaHPpIsFY4tcSs?$}83k zj6&JlBB-z@ODb+ps; z1Z4F&3ui+n4vLlTIBzAkE)^><=QI|p#22j5j|Rf5iBmD+QFL=RNYH^g{c5`*q|1L? zBF4nx&=+(-z`J}xgE*_W%p{et=gy`6k-E0+RGb30$F9P}V*=7!`?)+@=|u{)L>dv> z>}l`7q={m2D|CJl>qAfL@5-}Q$uND}31gGNx*SV?vzQ`;7qN479yM)KTw;<#3R1aD zA@-)7$QtwciMwz`OxMhQHBTLx95UcpDU?+kl#Mrq`6|gYb6E_Mg83wK&#&tmw@ELJ ze$jLy-8O&)Vv^er1@1TOGm=L}@{+{d%a$4$6h`CHCYiwBSnHfzSbN6I+n@(Fe?6-_ zi%rpL_pBa=BLg_5rBzG56K>@E$i5hkAm&pW$I7|@`r@5rB(%hcH85~%`6{ll2pLRB$jSZb(nVrmo=GIr4R=NxP z(xOi-dUI<{E7NDH?TneVvO;#VhP>p`0cw-9pv!qM6+;GX3(Gg?%Wzm;eUgW18(1L&{bg{q)2ugD!lhicB=c1fHFr2-pZnyeUzSph>-KoZ>$dk zf^p(Q>tFN1AcDixW82-i0nnZq#4$a<{ITGd{J+s7`$2@tvd-qG4 z&V6i0sB7u@^q=?Fg4iirS=T!_UJ7H{;NPCEMA=zMvMTVHA68YhUo?ul{x!9n5NeP1hcpbLmwSg{NnnD=Vuo+a2_)@(8+nhrjdO ztfCCZQT3)4Q@gaHJ`G&r^FV~p&p6tV%((pJwX`_eIdPGU_c4iXk)oDM&<6HP!4~aT zxDhfKV!_pW`o_~*S+r)yQGHaz&2s0);wIARAQ(QHxE%MewrQ+wtCmCz{1&3cg5v|= z5M(>$-r{a*fhi?BSJ^=wAbenHNT*}lj}!a-ml5&j8b?1CJuVuD2ekN&HbRiRoN6N< z($%dtA2hFojabYu8lSNv(IpHS6xOyL2+&pst8UnU_ok;tH{-3nah7o7q{^8D6uxrL z*?oP(CVjveS#b^q5Ou-K!hNa(i9@@+so^J#ed|aVWTY21sqp3kg4i)+ z^W&+?4bxU*{GFxiE$yA%NZC3RkRU6q^>a7*Y{RF;YJDpvw%QZ<5kch!#24;F!9|z{ zE&U~2eF%B$zopglZy1zKwr^o~OUEQE` z7*lM7CpJZYU_l^m +

{{firstName}}

+

{{lastName}}

+

{{fullName}}

+ + + ``` + + ​ + +``` +var app = new Vue({ + el: '#app', + data: { + firstName:"顾", + lastName:"青衣", + }, + methods:{ + changename(){ + this.fullName="顾 念" //中间需要加空格,不然下面的没法拆分 + } + }, + computed: { + fullName: { + // getter + get: function () { + + return this.firstName + ' ' + this.lastName + }, + // setter + set: function (newValue) { + //this.fullName = newValue 这种写法会报错 + var names = newValue.split(' ') + this.firstName = names[0]//对它的依赖进行赋值 + this.lastName = names[names.length - 1] + } + } + } + }) +``` + +注: + +计算属性是基于它们的依赖进行缓存的,只有相关的依赖发生改变时才会重新求值。只要相关的依赖未改变,只会返回之前的结果,不会执行函数。 + +computed依赖监控自己定义的变量,computed不能计算已经在data里面定义过的值,该变量在computed里面定义,然后可以在页面上进行数据绑定 + +computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 + + + + + +## watch + +#### 作用 + +- 主要用于监控vue实例的变化,监控的变量必须在data里面声明才可以 +- 可以监控一个变量或者一个对象,但是只能监控整个对象或单个变量,无法监控对象的具体属性 + +### 使用 + +- 通过vm对象的$watch()或watch配置来监视指定的属性 +- 当属性变化时,回调函数自动调用,在函数内部进行计算 +- watch不能双向的绑定值 + +### 使用场景 + +- watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据 + +示例: + +``` +watch:{ + // 监听firstName + firstName(value){ + console.log(`watch监视到firstName发生改变:${value}`); + //更新fullName + this.fullName = value + '·' + this.lastName + }, + // 监听lastName + lastName(value){ + console.log(`watch监视到lastName发生改变:${value}`); + this.fullName = this.firstName + '·' + value + } + } +``` + +监听复杂数据类型: (拓展) + +> watch:{ +> +> ​ 监听的数据名:{ +> +> ​ handler(val,oldval){ +> +> ​ ... 发生变化后的回调函数 +> +> ​ }, +> +> ​ deep:true 是否深度监听 +> +> ​ } +> +> } + +``` +var app = new Vue({ + el: '#app', + data: { + b: { + c: 1 + } + }, + watch: { + // newValue(val, oldVal) { + // console.log("b.c: " + val, oldVal); + // } + b: { + handler(val, oldval) { + console.log(val, oldval) + + }, + deep:true + } + }, + + }) + app.b.c = 3 +``` + + + +## 计算属性&监听属性&方法 + +#### 计算属性vs 方法 + +不同的是**计算属性是基于它们的响应式依赖进行缓存的**。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `message` 还没有发生改变,多次访问 `reversedMessage` 计算属性会立即返回之前的计算结果,而不必再次执行函数。 + +但是 方法每次调用都会执行 + + + +#### 计算属性vs监听属性 + +- computed 的变量不在data中定义; watch的变量需要在data中定义 +- computed支持缓存,只有依赖数据发生改变才会重新计算 ;watch +- computed 可以监听对象的某个具体属性 ;watch一般用来监听简单数据类型,如果监听对象等复杂数据类型,则无法监听对象具体某个属性 但是watch 也可以进行深度监听,监听整个对象的变化 +