From 9da36f5935ef247c4c74695882cf9e01b73b930b Mon Sep 17 00:00:00 2001 From: ss <1850359793@qq.com> Date: Sat, 29 May 2021 17:40:30 +0800 Subject: [PATCH 1/4] 5.29 --- "\351\237\251\345\235\244/2021-5-28.md" | 0 "\351\237\251\345\235\244/2021-5-29.md" | 25 +++++++++++++++++++++++++ "\351\237\251\345\235\244/index.html" | 20 ++++++++------------ 3 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 "\351\237\251\345\235\244/2021-5-28.md" create mode 100644 "\351\237\251\345\235\244/2021-5-29.md" diff --git "a/\351\237\251\345\235\244/2021-5-28.md" "b/\351\237\251\345\235\244/2021-5-28.md" new file mode 100644 index 0000000..e69de29 diff --git "a/\351\237\251\345\235\244/2021-5-29.md" "b/\351\237\251\345\235\244/2021-5-29.md" new file mode 100644 index 0000000..1209c13 --- /dev/null +++ "b/\351\237\251\345\235\244/2021-5-29.md" @@ -0,0 +1,25 @@ +# 模板语法 + +## 插值 + +### 文本 +`v-once`指令:一次性的插值，当数据改变时，插值内容不会更新，只有在Vue实例里重新插值。 + +### 原始HTML + +`v-html` +``` +var app=new Vue({ + el:'#app', + data:{ + rawHtml:'我看见蟑螂我不怕不怕啦' + }, + }) + +``` +``` +
+

{{rawHtml}}

+

v-html

+
+``` \ No newline at end of file diff --git "a/\351\237\251\345\235\244/index.html" "b/\351\237\251\345\235\244/index.html" index e735be3..dee8f73 100644 --- "a/\351\237\251\345\235\244/index.html" +++ "b/\351\237\251\345\235\244/index.html" @@ -6,23 +6,19 @@ Document -
- - - +
+

{{rawHtml}}

+

v-html

\ No newline at end of file -- Gitee From 0d7f170f690cff79564f11fb945ef0e804a9ccb7 Mon Sep 17 00:00:00 2001 From: kkk <1850359793@qq.com> Date: Mon, 31 May 2021 21:20:57 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\351\237\251\345\235\244/2021-5-29.md" | 29 ++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git "a/\351\237\251\345\235\244/2021-5-29.md" "b/\351\237\251\345\235\244/2021-5-29.md" index 1209c13..bbf2b5b 100644 --- "a/\351\237\251\345\235\244/2021-5-29.md" +++ "b/\351\237\251\345\235\244/2021-5-29.md" @@ -22,4 +22,31 @@ var app=new Vue({

{{rawHtml}}

v-html

-``` \ No newline at end of file +``` + + +指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute 一些指令能够接收一个“参数”，在指令名称之后以冒号(:)表示 +参数 动态参数 2.6.0 开始，可以用方括号括([])起来的 JavaScript 表达式作为一个指令的参数： + +
+ + + 这是第{{dt}}次点击 + 你好啊，你真好 +
+ \ No newline at end of file -- Gitee From 5dd4d9bedd74e547b08f299654adfc8d9fc3180c Mon Sep 17 00:00:00 2001 From: kkk <1850359793@qq.com> Date: Mon, 31 May 2021 21:26:21 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\351\237\251\345\235\244/2021-5-29.md" | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git "a/\351\237\251\345\235\244/2021-5-29.md" "b/\351\237\251\345\235\244/2021-5-29.md" index bbf2b5b..ddb2163 100644 --- "a/\351\237\251\345\235\244/2021-5-29.md" +++ "b/\351\237\251\345\235\244/2021-5-29.md" @@ -28,6 +28,7 @@ var app=new Vue({ 指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute 一些指令能够接收一个“参数”，在指令名称之后以冒号(:)表示 参数 动态参数 2.6.0 开始，可以用方括号括([])起来的 JavaScript 表达式作为一个指令的参数： +```
@@ -49,4 +50,5 @@ var app=new Vue({ } } }) - \ No newline at end of file + + ``` \ No newline at end of file -- Gitee From fa15dfcd28dd724b16b287752d468b755a2b4fd4 Mon Sep 17 00:00:00 2001 From: kkk <1850359793@qq.com> Date: Mon, 31 May 2021 21:41:35 +0800 Subject: [PATCH 4/4] ss --- "\351\237\251\345\235\244/2021-5-28.md" | 158 +++++++++++++++++++++++ "\351\237\251\345\235\244/2021-5-29.md" | 159 +++++++++++++++++++++++- 2 files changed, 316 insertions(+), 1 deletion(-) diff --git "a/\351\237\251\345\235\244/2021-5-28.md" "b/\351\237\251\345\235\244/2021-5-28.md" index e69de29..a9c5859 100644 --- "a/\351\237\251\345\235\244/2021-5-28.md" +++ "b/\351\237\251\345\235\244/2021-5-28.md" @@ -0,0 +1,158 @@ +# 2021-5-28 Vue.js 第四节课 Vue 模板语法 计算属性和侦听器 +## 文本 “Mustache”语法 (双大括号) 的文本插值 + +## 原始 HTML Attribute +``` +
+ {{msg}} + + +
+ + + + + + +``` +## 缩写 ++ v-bind 缩写 : +``` + + +... + + +... + + + ... +``` + ++ v-on 缩写 @ +``` + +... + + +... + + + ... +``` +## 计算属性 ++ computed methods watch +``` +1.computed当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。 +2.methods通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。 +3.watch用于观察和监听页面上的vue实例,如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择 + + +需要注意的是，computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。 + +computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。 +``` + + +``` +
+ + 点击{{dt}}次数 + + + +
+ +

当前年龄是{{age}}

+ +
+ + + + +``` + diff --git "a/\351\237\251\345\235\244/2021-5-29.md" "b/\351\237\251\345\235\244/2021-5-29.md" index ddb2163..85eb1f9 100644 --- "a/\351\237\251\345\235\244/2021-5-29.md" +++ "b/\351\237\251\345\235\244/2021-5-29.md" @@ -51,4 +51,161 @@ var app=new Vue({ } }) - ``` \ No newline at end of file + ``` + + +## 原始 HTML Attribute +``` +
+ {{msg}} + + +
+ + + + + + +``` +## 缩写 ++ v-bind 缩写 : +``` + + +... + + +... + + + ... +``` + ++ v-on 缩写 @ +``` + +... + + +... + + + ... +``` +## 计算属性 ++ computed methods watch +``` +1.computed当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。 +2.methods通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。 +3.watch用于观察和监听页面上的vue实例,如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择 + + +需要注意的是，computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。 + +computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。 +``` + + +``` +
+ + 点击{{dt}}次数 + + + +
+ +

当前年龄是{{age}}

+ +
+ + + + +``` + -- Gitee