From 06a3bc12820826b18f89a79110afa30ff3648056 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Tue, 1 Jun 2021 11:40:50 +0800
Subject: [PATCH 1/9] 2021.6.1
---
.../shopping.html" | 21 +++---
.../vue.html" | 73 +++++++++----------
2 files changed, 44 insertions(+), 50 deletions(-)
diff --git "a/\351\273\204\345\255\230\346\235\260/shopping.html" "b/\351\273\204\345\255\230\346\235\260/shopping.html"
index 1610330..ef2b408 100644
--- "a/\351\273\204\345\255\230\346\235\260/shopping.html"
+++ "b/\351\273\204\345\255\230\346\235\260/shopping.html"
@@ -31,8 +31,9 @@
商品单价
购买数量
操 作
-
+
+
{{ index + 1 }}
{{ item.name }}
@@ -43,11 +44,14 @@
+
移除
+
总价: {{totalPrice}}
+ {{ checked }}
购物车为空
@@ -72,10 +76,11 @@
{
id: 3,
name: 'MacBook Pro',
- price: '21488',
+ price: 21488,
count: 1
}
- ]
+ ],
+ checked:[]
},
methods: {
handleReduce: function (index) {
@@ -92,14 +97,8 @@
this.list.splice(index,1)
},
handleClick:function(index){
- let xz = document.getElementById('index');
- console.log(xz);
- if(xz.checked===true){
- totalPrice=this.list[index].price
- }else{
-
- }
+ this.checked = this.list[index].price * this.list[index].count
}
},
computed: {
diff --git "a/\351\273\204\345\255\230\346\235\260/vue.html" "b/\351\273\204\345\255\230\346\235\260/vue.html"
index 5a552cd..e6582f9 100644
--- "a/\351\273\204\345\255\230\346\235\260/vue.html"
+++ "b/\351\273\204\345\255\230\346\235\260/vue.html"
@@ -1,59 +1,54 @@
+
Document
+
-
-
- 书名:{{ book.name }} -- 作者:{{book.author}}
-
-
+
+
输入的内容是:{{ message }}
+
+
html
+
+
js
+
+
css
+
{{ picked }}
+
+
+
HTML
+
+
+
js
+
+
+
css
+
选择的项是:{{ checked }}
+```
+判断class是否存在,根据值得真假来判断是否需要这个class
+```
+:class="{class名：变量名}"
+
+data{
+变量名：false/true
+
+}
+```
+
+2. 数组语法
+需要应用到多个class的时候可以使用,class之间用逗号隔开,如:
+```
+
+
+
+
+结果：
+
+```
+
+## 绑定style的方式
+
+也是可以使用对象与数组两种方式,一般直接使用对象的方式
+
+```
+
+
+
+
+结果：
+
+```
+绑定style样式跟写样式差不多:
+```
+:style="{css属性：变量名}"
+
+data{
+变量名：设置的样式值
+}
+```
\ No newline at end of file
--
Gitee
From 46d15b7ac7e1ad2d3c7f2508b6e53fcaa02d1166 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Wed, 2 Jun 2021 12:15:16 +0800
Subject: [PATCH 3/9] 2021.6.2
---
...14\344\276\246\345\220\254\345\231\250.md" | 4 +-
...241\250\345\215\225\344\270\216v-model.md" | 225 ++++++++++++++++++
.../vue.html" | 61 ++++-
3 files changed, 287 insertions(+), 3 deletions(-)
create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.6.2-\350\241\250\345\215\225\344\270\216v-model.md"
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
index bf168f1..b8c9739 100644
--- "a/\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
+++ "b/\351\273\204\345\255\230\346\235\260/2021.5.29-Vue\346\250\241\346\235\277\350\257\255\346\263\225\343\200\201\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
@@ -113,4 +113,6 @@
我们这时候改变一下值,app.firstName = '林',你会发现页面上的姓名改变了但是当前时间并没有变化,你应该会好奇,为什么姓名都改变了,可是为什么当前时间没有改变,不是我返回的是当前时间吗?这是因为computed方法并不是响应式的而methods方法是响应式的它会随着值得改变响应到页面上,而computed方法不是响应式的,所以并不会响应到页面上。但是你又好奇当前的时间不是一直在变吗,为什么它也没有变化。如果你刷新一下,你会发现当前时间它变化了,这又是为什么呢。那是因为computed方法存在着缓存机制,这个缓存会保存你页面当时响应时computed中的数据,不管你之后响应了多少次,如果computed方法中的值没有做出改变的话,它就会一直是当时响应时的数据,只有你改变了computed方法中的值它才会做出改变,这也是为什么刷新了页面它就会变的原因。这些就是computed与methods方法的区别,它们本质上其实是一样的,都是用于保存一些方法或函数,使用computed/methods取决去你需不需要缓存。
2. computed属性 与 watch属性
-watch可以监听你想要的值,只要监听的这个值做出改变,那么就会执行这个属性并作出一些事情,但是computed属性原本就是你所需要的值做出改变那么他就会重新计算,所以计算机属性也满足这个特性,而且计算机属性还有缓存机制,更利于数据的渲染速度。
\ No newline at end of file
+watch可以监听你想要的值,只要监听的这个值做出改变,那么就会执行这个属性并作出一些事情,但是computed属性原本就是你所需要的值做出改变那么他就会重新计算,所以计算机属性也满足这个特性,而且计算机属性还有缓存机制,更利于数据的渲染速度。
+
+
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.2-\350\241\250\345\215\225\344\270\216v-model.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.2-\350\241\250\345\215\225\344\270\216v-model.md"
new file mode 100644
index 0000000..582d144
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.2-\350\241\250\345\215\225\344\270\216v-model.md"
@@ -0,0 +1,225 @@
+# 2021.6.2
+
+
+## v-model 原理
+
+v-model其实是一个语法糖,它的本质是由两个指令组成的:
+
+1. v-bind 绑定value值 来实现动态改变值
+2. v-on 使用v-on绑定input事件来实现数据的实时更新并响应
+
+```
+
+
+
+```
+input是用于监听的事件,如果当前元素发生了改变,那么它就会做一些事情。
+
+我们使用Input事件来监听input,在方法中我们使用event对象直接获取到当前发生事件的元素并且获取到它的value值,因为v-bind绑定的值发生了改变页面也会改变,所以我们把在把获取到的值赋值给message,又因为我们把这个message的值动态绑定到了value中,所以当你text文本中值发生了改变,那么message的值也会随之响应在页面上,从而实现双向绑定。
+
+
+## v-model radio使用
+```
+
+
+
+```
+
+## v-model checked使用
+
+单个复选框:
+```
+
+
+
+
选择的水果是:{{isChecked}}
+
+
选择的水果是:{{Fruits}}
+
+
+```
+
+## v-model select使用
+
+单选:
+```
+
+ 桃子
+ 芒果
+ 荔枝
+ 菠萝
+
+
+选择的水果是:{{Fruits}}
+
+
+```
+
+多选,只要在select标签中加上multiple允许多选的属性就可以实现了:
+```
+
+ 桃子
+ 芒果
+ 荔枝
+ 菠萝
+
+
+选择的水果是:{{Fruits}}
+
+
+```
+
+## 值绑定
+
+值绑定其实就是v-bind,因为我们到时候做项目时,需要从数据库中获取到数据,所以并不能把数据写死,在上面复选框的时候我们把value的值写死了,所以我们需要使用v-bind来进行动态绑定来设置值。
+
+```
+
+
+选择的水果是:{{Fruit}}
+
+
+```
+
+## 修饰符
+
+1. lazy修饰符
+
+lazy修饰符可以让数据在失去焦点或者回车是才更新数据。
+```
+输入的内容是:{{ message }}
+
+
+```
+2. number修饰符
+
+默认情况下输入框不管我们输入的是数字还是字符串,都会被当做字符串处理。
+
+numberx修饰符可以让输入框输入的内容自动转成数字类型
+```
+输入的内容是:{{ typeof message }}
+
+
+```
+3. trim修饰符
+
+可以去空格
+```
+输入的内容是:{{ message }}
+
+
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\255\230\346\235\260/vue.html" "b/\351\273\204\345\255\230\346\235\260/vue.html"
index e6582f9..dede366 100644
--- "a/\351\273\204\345\255\230\346\235\260/vue.html"
+++ "b/\351\273\204\345\255\230\346\235\260/vue.html"
@@ -11,13 +11,14 @@
@@ -37,7 +86,15 @@
data: {
message: '',
picked: '',
- checked: []
+ checked: [],
+ selected: [],
+ picked2:true,
+ value:123,
+ sex:'',
+ isCheck:false,
+ Fruit:[],
+ Fruits:['桃子','芒果','荔枝','菠萝'],
+ msg:''
},
methods: {
handleInput: function (e) {
--
Gitee
From 175b3f8c109cd482980521a5cf11e72fa713c5bb Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Wed, 2 Jun 2021 12:21:06 +0800
Subject: [PATCH 4/9] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?=
=?UTF-8?q?=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...1.5.27-Vue\345\256\236\344\276\213\347\220\206\350\247\243.md" | 0
...50\256\241\347\256\227\346\234\272\345\261\236\346\200\247.md" | 0
...0\216style\347\273\221\345\256\232\346\226\271\345\274\217.md" | 0
...2021.5.31-\345\206\205\347\275\256\346\214\207\344\273\244.md" | 0
4 files changed, 0 insertions(+), 0 deletions(-)
rename "\351\273\204\345\255\230\346\235\260/2021.5.27.md" => "\351\273\204\345\255\230\346\235\260/2021.5.27-Vue\345\256\236\344\276\213\347\220\206\350\247\243.md" (100%)
rename "\351\273\204\345\255\230\346\235\260/2021.5.28.md" => "\351\273\204\345\255\230\346\235\260/2021.5.28-\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247.md" (100%)
rename "\351\273\204\345\255\230\346\235\260/2021.5.30.md" => "\351\273\204\345\255\230\346\235\260/2021.5.30-class\344\270\216style\347\273\221\345\256\232\346\226\271\345\274\217.md" (100%)
rename "\351\273\204\345\255\230\346\235\260/2021.5.31.md" => "\351\273\204\345\255\230\346\235\260/2021.5.31-\345\206\205\347\275\256\346\214\207\344\273\244.md" (100%)
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.27.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.27-Vue\345\256\236\344\276\213\347\220\206\350\247\243.md"
similarity index 100%
rename from "\351\273\204\345\255\230\346\235\260/2021.5.27.md"
rename to "\351\273\204\345\255\230\346\235\260/2021.5.27-Vue\345\256\236\344\276\213\347\220\206\350\247\243.md"
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.28.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.28-\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247.md"
similarity index 100%
rename from "\351\273\204\345\255\230\346\235\260/2021.5.28.md"
rename to "\351\273\204\345\255\230\346\235\260/2021.5.28-\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247.md"
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.30.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.30-class\344\270\216style\347\273\221\345\256\232\346\226\271\345\274\217.md"
similarity index 100%
rename from "\351\273\204\345\255\230\346\235\260/2021.5.30.md"
rename to "\351\273\204\345\255\230\346\235\260/2021.5.30-class\344\270\216style\347\273\221\345\256\232\346\226\271\345\274\217.md"
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.5.31.md" "b/\351\273\204\345\255\230\346\235\260/2021.5.31-\345\206\205\347\275\256\346\214\207\344\273\244.md"
similarity index 100%
rename from "\351\273\204\345\255\230\346\235\260/2021.5.31.md"
rename to "\351\273\204\345\255\230\346\235\260/2021.5.31-\345\206\205\347\275\256\346\214\207\344\273\244.md"
--
Gitee
From d40425fe0d6b648bf9b393dd5df4e7dd07181f2d Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Wed, 2 Jun 2021 17:25:38 +0800
Subject: [PATCH 5/9] 2021.6.2
---
...27\350\241\250\346\270\262\346\237\223.md" | 130 ++++++++++++++++++
.../2021.6.2TestDemo.html" | 84 +++++++++++
2 files changed, 214 insertions(+)
create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md"
create mode 100644 "\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html"
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md"
new file mode 100644
index 0000000..cdcaab3
--- /dev/null
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md"
@@ -0,0 +1,130 @@
+# 2021.6.2
+
+
+# v-for
+
+v-for可以循环数组或对象。当你需要重复做一件事情并且做很多的时候,你就会想到用for循环来重复做同一件事,vue.js中也提供了一个指令 v-for,当你想要渲染许多相同的标签的时候你就可以用到这个指令来循环他们进行渲染提高效率。
+
+```
+
+
+
+ 书名:{{ book.name }} -- 作者:{{book.author}}
+
+
+
+
+
+ {{ index }} -- {{ key }} : {{ vlues }}
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
--
Gitee
From 9517b9292e47f6bc28948c410e90e588e177d4a5 Mon Sep 17 00:00:00 2001
From: hcj <2622428319@qq.com>
Date: Wed, 2 Jun 2021 17:28:08 +0800
Subject: [PATCH 6/9] =?UTF-8?q?2021.6.2=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
---
...021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md" | 1 +
"\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html" | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md"
index cdcaab3..baba097 100644
--- "a/\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md"
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.2-\345\210\227\350\241\250\346\270\262\346\237\223.md"
@@ -63,6 +63,7 @@ let app = new Vue({
```
+
课堂示例,并完成改变颜色:
```
diff --git "a/\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html" "b/\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html"
index a191919..eba26a4 100644
--- "a/\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html"
+++ "b/\351\273\204\345\255\230\346\235\260/2021.6.2TestDemo.html"
@@ -4,7 +4,7 @@
Document
+ 课堂练习