From 5ecdbda568567dd3d69d9fdbefb13e690f327a58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C=E9=99=88=E4=BF=8A=E5=85=B4=E2=80=9D?=
 <“1274804914@qq.com”>
Date: Sun, 16 Apr 2023 21:09:31 +0800
Subject: [PATCH] 123

---
 ...14\345\220\221\347\273\221\345\256\232.md" | 37 ++++++++
 ...1-\344\276\246\345\220\254\345\231\250.md" | 36 ++++++++
 ...41\346\235\277\345\272\224\347\224\250.md" | 30 +++++++
 ...04\344\273\266\345\237\272\347\241\200.md" | 90 +++++++++++++++++++
 4 files changed, 193 insertions(+)
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230410-\345\217\214\345\220\221\347\273\221\345\256\232.md"
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230411-\344\276\246\345\220\254\345\231\250.md"
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230413-\346\250\241\346\235\277\345\272\224\347\224\250.md"
 create mode 100644 "07\351\231\210\344\277\212\345\205\264/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md"

diff --git "a/07\351\231\210\344\277\212\345\205\264/20230410-\345\217\214\345\220\221\347\273\221\345\256\232.md" "b/07\351\231\210\344\277\212\345\205\264/20230410-\345\217\214\345\220\221\347\273\221\345\256\232.md"
new file mode 100644
index 0000000..4d3128c
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230410-\345\217\214\345\220\221\347\273\221\345\256\232.md"
@@ -0,0 +1,37 @@
+# 表单输入绑定
+
+#
+
+## 一.v-model
+
++ v-model 可以自动将表单输入框的内容同步给 JavaScript 中相应的变量
+
++ v-model 还可以用于各种不同类型的输入，它会根据所使用的元素**自动**使用对应的 DOM 属性和事件组合
+
++ v-model 会忽略任何表单元素上**初始的** value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。应该在 JavaScript 中使用data 选项来声明该初始值。
+
+### 代码
+
+```html
+<!-- <script setup> 组合式-->
+<script>
+
+export default{
+    data(){
+      return {
+        mess:'',
+      }
+    },
+}
+
+</script>
+
+<template>
+  <div>
+    <!-- v-model：表单的绑定传值 -->
+    <input type="text" v-model="mess">
+    {{mess}}
+  </div>
+
+</template>
+```
diff --git "a/07\351\231\210\344\277\212\345\205\264/20230411-\344\276\246\345\220\254\345\231\250.md" "b/07\351\231\210\344\277\212\345\205\264/20230411-\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..3fffb96
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230411-\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,36 @@
+# 生命周期和侦听器
+
+```vue
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import axios from 'axios'
+onMounted(()=>{
+  console.log('开始咯');
+})
+
+const question=ref('');
+const answer=ref('');
+const imgUrl=ref('');
+
+watch(question,async (newQuestion,oldQuestion)=>{
+  
+  if (newQuestion.endsWith('?')) {   
+    answer.value='thinking......' 
+    axios.get('http://localhost:4000/roles').then((res)=>{
+
+      answer.value=res.data.answer;
+      imgUrl.value=res.data.img
+    })
+  }
+})
+
+</script>
+
+<template>
+  <p>请输入问题：<input type="text" v-model="question"></p>
+  <p>回答：{{ answer }}</p>
+  <p>
+    <img :src="imgUrl" alt="">
+  </p>
+</template>
+```
diff --git "a/07\351\231\210\344\277\212\345\205\264/20230413-\346\250\241\346\235\277\345\272\224\347\224\250.md" "b/07\351\231\210\344\277\212\345\205\264/20230413-\346\250\241\346\235\277\345\272\224\347\224\250.md"
new file mode 100644
index 0000000..9ca0f61
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230413-\346\250\241\346\235\277\345\272\224\347\224\250.md"
@@ -0,0 +1,30 @@
+# 模板引用
+
+```vue
+<script setup>
+import { onMounted, ref } from 'vue';
+
+
+const have_focus=ref('');
+const no_focus=ref('')
+
+function changeFocus(){
+    no_focus.value.focus()
+}
+
+function changeFocus2(){
+  have_focus.value.focus()
+}
+
+onMounted(()=>{
+  have_focus.value.focus();
+  
+})
+</script>
+
+<template>
+  <input type="text" ref="have_focus" @keyup.enter="changeFocus">
+  <input type="text" ref="no_focus" @keyup.enter="changeFocus2">
+</template>
+
+```
diff --git "a/07\351\231\210\344\277\212\345\205\264/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md" "b/07\351\231\210\344\277\212\345\205\264/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md"
new file mode 100644
index 0000000..5137c4f
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md"
@@ -0,0 +1,90 @@
+# 组件基础
+
+```vue
+<!-- 组合式 HelloWorld-->
+<script setup>
+
+
+
+const emit=defineEmits(['bianxiao'])
+
+function small() {
+  emit('bianxiao')
+}
+
+</script>
+
+<template>
+  
+  <h1><slot></slot> </h1>
+  <input type="button" value="变大" @click="$emit('bianda')">
+  <input type="button" value="变小" @click="small">
+
+<h1><slot /></h1>
+  
+</template>
+
+```
+
+```vue
+<!-- 选项式 Test -->
+
+<script>
+export default{
+    emits:['bianxiao'],
+
+}
+</script>
+
+<template>
+      <h1><slot></slot> </h1>
+  <input type="button" value="变大" @click="$emit('bianda')">
+  <input type="button" value="变小" @click="$emit('bianxiao')">
+
+<h1><slot /></h1>
+  
+</template>
+```
+
+```vue
+<!-- App.vue -->
+<script setup>
+import { ref } from 'vue';
+import HelloWorld from './components/HelloWorld.vue'
+const s=ref(1)
+
+</script>
+
+<script>
+import Test from './components/Test.vue'
+export default{
+  components:{
+    Test
+  },
+  data(){
+    return {
+      s2:1
+    }
+  }
+}
+</script>
+
+
+<template>
+ 
+ <!-- 没用插槽 -->
+ <div :style="{'font-size':s+'em'}">哈哈</div>
+  <HelloWorld   @bianda="s+=0.2" @bianxiao="s-=0.2" >
+    <!-- 用了插槽 -->
+    <div :style="{'font-size':s+'em'}">哈哈</div>
+    </HelloWorld>
+
+
+    <Test @bianda="s2+=0.2" @bianxiao="s2-=0.2" >
+      <div :style="{'font-size':s2+'em'}">呵呵</div>
+    </Test>
+
+
+</template>
+
+```
-- 
Gitee