From e135cb91859850bfe08d5928807fa7615cb767c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=9F=E7=82=8E=E6=9E=97?= <1028579551@qq.com>
Date: Sun, 16 Apr 2023 13:47:48 +0000
Subject: [PATCH] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 钟炎林 <1028579551@qq.com>
---
 ...23\345\205\245\347\273\221\345\256\232.md" | 91 +++++++++++++++++++
 ...344\276\246\345\220\254\345\231\250.md.md" | 35 +++++++
 ...346\235\277\345\274\225\347\224\250.md.md" | 29 ++++++
 ...344\273\266\345\237\272\347\241\200.md.md" | 91 +++++++++++++++++++
 4 files changed, 246 insertions(+)
 create mode 100644 "25\351\222\237\347\202\216\346\236\227/20230410-v-model\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md"
 create mode 100644 "25\351\222\237\347\202\216\346\236\227/20230411-\347\224\237\345\221\275\345\221\250\346\234\237\345\222\214\344\276\246\345\220\254\345\231\250.md.md"
 create mode 100644 "25\351\222\237\347\202\216\346\236\227/20230413-\346\250\241\346\235\277\345\274\225\347\224\250.md.md"
 create mode 100644 "25\351\222\237\347\202\216\346\236\227/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md.md"

diff --git "a/25\351\222\237\347\202\216\346\236\227/20230410-v-model\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" "b/25\351\222\237\347\202\216\346\236\227/20230410-v-model\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md"
new file mode 100644
index 0000000..cd16203
--- /dev/null
+++ "b/25\351\222\237\347\202\216\346\236\227/20230410-v-model\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md"
@@ -0,0 +1,91 @@
+# v-model表单输入绑定
+```vue
+<!-- <script>
+export default{
+  data(){
+    return{
+      stu:{
+        name:'hhh',
+        age:66,
+        sex:'f',
+        hobby:['sjg','sing song'],
+        province:[]
+      }
+    }
+  },
+  methods:{
+    shuchu(){
+      console.log(this.stu);
+    }
+  }
+}
+</script> -->
+
+<script setup>
+import {ref} from 'vue'
+
+let stu={
+  name:ref('hhh'),
+      age:ref(66),
+      sex:ref('f'),
+      hobby:ref(['sjg','sing song']),
+      province:ref([])
+}
+
+function shuchu(){
+    console.log(stu);
+  }
+</script>
+
+<template>
+ <form >
+    <table>
+        <tr>
+          <td>姓名</td>
+          <td>
+            <input type="text"  v-model="stu.name.value">
+          </td>
+        </tr>
+        <tr>
+          <td>年龄</td>
+          <td>
+            <input type="text" v-model="stu.age.value">
+          </td>
+        </tr>
+        <tr>
+          <td>性别</td>
+          <td>
+            <input type="radio" name="sex" value="f"  v-model="stu.sex.value">f
+            <input type="radio" name="sex" value="m"  v-model="stu.sex.value">m
+          </td>
+        </tr>
+        <tr>
+          <td>爱好</td>
+          <td>
+            <input type="checkbox" name="province" v-model="stu.hobby.value" value="sjg">双截棍
+            <input type="checkbox" name="province" v-model="stu.hobby.value" value="sing song">唱歌
+            <input type="checkbox" name="province" v-model="stu.hobby.value" value="watch tiktok">刷抖音
+            <input type="checkbox" name="province" v-model="stu.hobby.value" value="watch cartoon">看动漫
+            <input type="checkbox" name="province" v-model="stu.hobby.value" value="play game">玩游戏
+          </td>
+        </tr>
+        <tr>
+          <td>籍贯</td>
+          <td>
+            <!-- multiple是可以让下拉框多选 -->
+            <select multiple v-model="stu.province.value">
+              <option value="fj" >福建</option>
+              <option value="jx" >江西</option>
+              <option value="gd" >广东</option>
+              <option value="sc" >四川</option>
+              <option value="hn" >河南</option>
+            </select>
+          </td>
+        </tr>
+        <input type="button" value="输出" @click="shuchu" >
+    </table>
+ </form>
+</template>
+
+
+```
\ No newline at end of file
diff --git "a/25\351\222\237\347\202\216\346\236\227/20230411-\347\224\237\345\221\275\345\221\250\346\234\237\345\222\214\344\276\246\345\220\254\345\231\250.md.md" "b/25\351\222\237\347\202\216\346\236\227/20230411-\347\224\237\345\221\275\345\221\250\346\234\237\345\222\214\344\276\246\345\220\254\345\231\250.md.md"
new file mode 100644
index 0000000..a11da85
--- /dev/null
+++ "b/25\351\222\237\347\202\216\346\236\227/20230411-\347\224\237\345\221\275\345\221\250\346\234\237\345\222\214\344\276\246\345\220\254\345\231\250.md.md"
@@ -0,0 +1,35 @@
+# 生命周期和侦听器
+```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>
+```
\ No newline at end of file
diff --git "a/25\351\222\237\347\202\216\346\236\227/20230413-\346\250\241\346\235\277\345\274\225\347\224\250.md.md" "b/25\351\222\237\347\202\216\346\236\227/20230413-\346\250\241\346\235\277\345\274\225\347\224\250.md.md"
new file mode 100644
index 0000000..da8a864
--- /dev/null
+++ "b/25\351\222\237\347\202\216\346\236\227/20230413-\346\250\241\346\235\277\345\274\225\347\224\250.md.md"
@@ -0,0 +1,29 @@
+# 模板引用
+```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>
+
+```
\ No newline at end of file
diff --git "a/25\351\222\237\347\202\216\346\236\227/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md.md" "b/25\351\222\237\347\202\216\346\236\227/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md.md"
new file mode 100644
index 0000000..f74b9bd
--- /dev/null
+++ "b/25\351\222\237\347\202\216\346\236\227/20230414-\347\273\204\344\273\266\345\237\272\347\241\200.md.md"
@@ -0,0 +1,91 @@
+# 组件基础
+```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>
+
+```
+
+![show](./img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202023-04-16%20191410.png)
\ No newline at end of file
-- 
Gitee