From 525c18027cf183ab5e57cc57e6b3ebde29bc7cb6 Mon Sep 17 00:00:00 2001
From: ycc <492963343@qq.com>
Date: Fri, 28 May 2021 10:44:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AF=8F=E6=97=A5=E5=B0=8F=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2021-5-26.md"                             | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 "\345\217\266\345\270\270\346\230\245/2021-5-26.md"

diff --git "a/\345\217\266\345\270\270\346\230\245/2021-5-26.md" "b/\345\217\266\345\270\270\346\230\245/2021-5-26.md"
new file mode 100644
index 0000000..bcaad98
--- /dev/null
+++ "b/\345\217\266\345\270\270\346\230\245/2021-5-26.md"
@@ -0,0 +1,80 @@
+# vuejs第二课 天气☀🌧就离谱（不是
+
+## 处理用户输入
++ 单机输入：通过设置class来改变样式👇
+```
+<style>
+    .red {
+        background: red;
+    }
+
+    .blue {
+        background: blue;
+    }
+
+    .yellow {
+        background: yellow;
+    }
+</style>
+```
+
++ 定义标签👇
+```
+<div id="app-4">
+//绑定一个单机事件
+    <button v-on:click="click()">点击</button>
+//给这个标签绑定v-bind指令
+    <p :class="color[Indexes]">改变背景色</p>
+</div>
+```
+注：v-bind:class 可以简写为:class
+
++ script标签内容👇
+```
+<script>
+    var app4 = new Vue({
+        el: '#app-4',
+        data: {
+            color:['red','blue','yellow'],
+            Indexes:0,
+            Identity:0
+        },
+        // this指向调用它的Vue实例
+        methods:{
+            click(){
+                this.Identity++;
+                this.Indexes=this.Identity % 3,
+                console.log(this.Indexes);
+            }
+        }
+    })
+
+    //将class颜色名存入一个color(数组)中，给单击事件中绑入 根据Indexes(索引)调用当前vue实例的color数组 来逐个获取数组的值 将值赋给上面的class
+</script>
+```
+注：上面的class要绑定v-bind才行 要不然无法获取到下面的值
+
+## 组件化应用构建
++ 命名建议：字母全小写加连字符 这样能跟原来的HTML元素区分开不会冲突
++ 注册组件
+```
+Vue.component('demonstrate',{
+        template: '<h1>自定义组件</h1>'
+    });
+```
+注：demonstrate是组件名 也就是一个名为<demonstrate></demonstrate>的节点；templat是组件的模板；模板里加入了<h1>demonstrate自定义组件</h1>这段话,意味着使用<demonstrate>节点时,<demonstrate>里会自带这句话；注意命名 参照上面命名建议 不能跟原来的HTML元素冲突 比如element
++ 实例化vue
+```
+var vm = new Vue({
+    el: '#vue',
+})
+```
+
++ HTML标签
+```
+<div id="vue">
+    <demonstrate></demonstrate>
+</div>
+```
+## 完事儿^^_
+# 每日一言：很喜欢大哥说的一句话《给我饮啦！》
\ No newline at end of file
-- 
Gitee