From 153f92aa3b7f10989a1ee8d7f5bff78578e66829 Mon Sep 17 00:00:00 2001 From: hcj <2622428319@qq.com> Date: Thu, 27 May 2021 17:21:14 +0800 Subject: [PATCH 1/3] =?UTF-8?q?2021.5.27=E7=BB=83=E4=B9=A0=E8=AF=BE?= =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2021.5.27.md | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++ vue.html | 28 ++++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 2021.5.27.md create mode 100644 vue.html diff --git a/2021.5.27.md b/2021.5.27.md new file mode 100644 index 0000000..fe2a922 --- /dev/null +++ b/2021.5.27.md @@ -0,0 +1,73 @@ +# 2021.5.27 + + +## vue实例 +``` +
+

{{ msg }}

+
+ + +``` +``` +这里我们定义的app就是一个vue实例,在实例中可以定义选项,这里就出现两个 + +el选项:用于指定在哪个dom元素挂载vue实例 +data选项:用于存在数据库,一些实例中用到的数据都可以在里声明,它的作用域是这一整个实例 +``` + +## v-bind 与 v-on + +1.v-bind:用于数据的绑定,绑定的数据可以是各种的 + +如： +``` +
+ // 我们使用了span标签的特性使用数据绑定实现给title设置一些值,就可以使用到v-bind来实现 + 鼠标悬停几秒看看 +
+ + + + +``` + +2.v-on:用于监听dom元素上的一些事件 + +如点击事件,这里使用了单击实现实现了标签的显示于隐藏: +``` +
+

这里显示文本

+ +
+ + + + +``` +methods选项:用于存放定义的函数与方法方便复用,methods中的this表示当前实例本身 \ No newline at end of file diff --git a/vue.html b/vue.html new file mode 100644 index 0000000..d23209a --- /dev/null +++ b/vue.html @@ -0,0 +1,28 @@ + + + + + + Document + + +
+

这里显示文本

+ +
+ + + + + + \ No newline at end of file -- Gitee From ffbf2e8c0e1c266dc3c55aa119fad47167fb3677 Mon Sep 17 00:00:00 2001 From: hcj <2622428319@qq.com> Date: Fri, 28 May 2021 22:39:40 +0800 Subject: [PATCH 2/3] =?UTF-8?q?2021.5.27=E9=9A=8F=E5=A0=82=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...37\345\221\275\345\221\250\346\234\237.md" | 65 +++++++++++++++++++ vue.html | 28 -------- 2 files changed, 65 insertions(+), 28 deletions(-) create mode 100644 "2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md" delete mode 100644 vue.html diff --git "a/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md" "b/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md" new file mode 100644 index 0000000..e87bb27 --- /dev/null +++ "b/2021.5.28-Vue\345\256\236\344\276\213\347\232\204\347\224\237\345\221\275\345\221\250\346\234\237.md" @@ -0,0 +1,65 @@ +# 2021.5.28 + +## Vue实例的生命周期 + +生命周期可以是根实例也可以是组件 + +``` +
+ +

{{ msg }}

+
+ + +``` + diff --git a/vue.html b/vue.html deleted file mode 100644 index d23209a..0000000 --- a/vue.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - Document - - -
-

这里显示文本

- -
- - - - - - \ No newline at end of file -- Gitee From b2f501fd809b00bfa7c43d1d252c004f09637b8c Mon Sep 17 00:00:00 2001 From: hcj <2622428319@qq.com> Date: Fri, 28 May 2021 22:41:25 +0800 Subject: [PATCH 3/3] =?UTF-8?q?2021.5.28=E5=AD=A6=E4=B9=A0=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2021.5.28.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 2021.5.28.md diff --git a/2021.5.28.md b/2021.5.28.md new file mode 100644 index 0000000..0956cd6 --- /dev/null +++ b/2021.5.28.md @@ -0,0 +1,44 @@ +# 2021.5.28 + + + +## computed 计算机属性 + +computed属性与methods属性其实差不多,区别就在于computed属性有缓存而methods没有缓存,而且computed属性不是响应式的,而methods属性是响应式的 + +``` +
+ 姓名:{{ fullName() }} +
+ 当时的时间:{{ now }} +
+ + + + + +``` +输出: +``` +姓名:黄某某 +当时的时间:'这里是当前时间'(时间戳) +``` +我们这时候改变一下值,app.firstName = '林',你会发现页面上的姓名改变了但是当前时间并没有变化,你应该会好奇,为什么姓名都改变了,可是为什么当前时间没有改变,不是我返回的是当前时间吗?这是因为computed方法并不是响应式的而methods方法是响应式的它会随着值得改变响应到页面上,而computed方法不是响应式的,所以并不会响应到页面上。但是你又好奇当前的时间不是一直在变吗,为什么它也没有变化。如果你刷新一下,你会发现当前时间它变化了,这又是为什么呢。那是因为computed方法存在着缓存机制,这个缓存会保存你页面当时响应时computed中的数据,不管你之后响应了多少次,如果computed方法中的值没有做出改变的话,它就会一直是当时响应时的数据,只有你改变了computed方法中的值它才会做出改变,这也是为什么刷新了页面它就会变的原因。这些就是computed与methods方法的区别,它们本质上其实是一样的,都是用于保存一些方法或函数,使用computed/methods取决去你需不需要缓存。 \ No newline at end of file -- Gitee