From 3a5b146e5e318929b159c1c49ec4f83b17503186 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=9D=B0?= <2328428352@qq.com>
Date: Sun, 23 Apr 2023 21:39:02 +0800
Subject: [PATCH 1/2] 1

---
 "21\347\216\213\346\226\207\346\235\260/20230417_.md" | 0
 "21\347\216\213\346\226\207\346\235\260/20230418_.md" | 0
 "21\347\216\213\346\226\207\346\235\260/20230420_.md" | 0
 "21\347\216\213\346\226\207\346\235\260/20230421_.md" | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230417_.md"
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230418_.md"
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230420_.md"
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230421_.md"

diff --git "a/21\347\216\213\346\226\207\346\235\260/20230417_.md" "b/21\347\216\213\346\226\207\346\235\260/20230417_.md"
new file mode 100644
index 0000000..e69de29
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230418_.md" "b/21\347\216\213\346\226\207\346\235\260/20230418_.md"
new file mode 100644
index 0000000..e69de29
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230420_.md" "b/21\347\216\213\346\226\207\346\235\260/20230420_.md"
new file mode 100644
index 0000000..e69de29
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230421_.md" "b/21\347\216\213\346\226\207\346\235\260/20230421_.md"
new file mode 100644
index 0000000..e69de29
-- 
Gitee


From 11cc3a0af77372ae3d57d6eadbff6e358709daf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=9D=B0?= <2328428352@qq.com>
Date: Sun, 23 Apr 2023 21:44:53 +0800
Subject: [PATCH 2/2] 1

---
 .../20230417_.md"                             |   0
 ...04\344\273\266\346\263\250\345\206\214.md" |  96 +++++++++++
 .../20230418_.md"                             |   0
 ...66\344\275\234\345\216\237\345\236\213.md" |   9 +
 .../20230420_.md"                             |   0
 ...20230420_\346\267\261\345\205\245Props.md" | 152 ++++++++++++++++
 .../20230421_.md"                             |   0
 ...61\345\205\245\344\272\213\344\273\266.md" | 163 ++++++++++++++++++
 8 files changed, 420 insertions(+)
 delete mode 100644 "21\347\216\213\346\226\207\346\235\260/20230417_.md"
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230417_\347\273\204\344\273\266\346\263\250\345\206\214.md"
 delete mode 100644 "21\347\216\213\346\226\207\346\235\260/20230418_.md"
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230418_\345\242\250\345\210\200\345\210\266\344\275\234\345\216\237\345\236\213.md"
 delete mode 100644 "21\347\216\213\346\226\207\346\235\260/20230420_.md"
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230420_\346\267\261\345\205\245Props.md"
 delete mode 100644 "21\347\216\213\346\226\207\346\235\260/20230421_.md"
 create mode 100644 "21\347\216\213\346\226\207\346\235\260/20230421_\346\267\261\345\205\245\344\272\213\344\273\266.md"

diff --git "a/21\347\216\213\346\226\207\346\235\260/20230417_.md" "b/21\347\216\213\346\226\207\346\235\260/20230417_.md"
deleted file mode 100644
index e69de29..0000000
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230417_\347\273\204\344\273\266\346\263\250\345\206\214.md" "b/21\347\216\213\346\226\207\346\235\260/20230417_\347\273\204\344\273\266\346\263\250\345\206\214.md"
new file mode 100644
index 0000000..89b1aba
--- /dev/null
+++ "b/21\347\216\213\346\226\207\346\235\260/20230417_\347\273\204\344\273\266\346\263\250\345\206\214.md"
@@ -0,0 +1,96 @@
+# 组件注册
+#
+## 一.全局注册: component() 方法
+
++ 在vue项目中的main.js文件中使用app.component() 方法
+
++ app.component() 方法可以被链式调用
+
+```js
+// main.js
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+//导入文件
+import f1 from './components/f1.vue'
+import f2 from './components/f2.vue'
+
+const app=createApp(App)
+
+//注册被导入的文件，链式调用
+app.component('f1',f1).component('f2',f2)
+app.mount('#app')
+
+```
+```vue
+<!-- App.vue -->
+<script setup>
+</script>
+
+<template>
+<f1/>
+  <h1>测试</h1>
+<f2></f2>
+</template>
+
+<!-- f1.vue -->
+<template>
+    <div>
+        <h1>1</h1>
+    </div>
+</template>
+```
+
+
+
+#
+## 二.局部注册
+
++ 局部注册的组件在后代组件中并不可用。
+
++ 在选项式中，需要使用**components** 选项注册
+```vue
+<script>
+import ComponentA from './ComponentA.vue'
+
+export default {
+  components: {
+    ComponentA
+  }
+}
+</script>
+
+<template>
+  <ComponentA />
+</template>
+
+```
+
++ 在组合式中，导入的组件可以直接在模板中使用，无需注册
+```vue
+<script setup>
+import ComponentA from './ComponentA.vue'
+</script>
+
+<template>
+  <ComponentA />
+</template>
+
+```
+
+#
+## 三.全局和局部对比
+
+
+### 全局注册的问题:
+
++ 1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
+
++ 2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。
+
+### 局部
+
++ 1. 局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。
+
++ 2. 它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。
\ No newline at end of file
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230418_.md" "b/21\347\216\213\346\226\207\346\235\260/20230418_.md"
deleted file mode 100644
index e69de29..0000000
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230418_\345\242\250\345\210\200\345\210\266\344\275\234\345\216\237\345\236\213.md" "b/21\347\216\213\346\226\207\346\235\260/20230418_\345\242\250\345\210\200\345\210\266\344\275\234\345\216\237\345\236\213.md"
new file mode 100644
index 0000000..a02ddbc
--- /dev/null
+++ "b/21\347\216\213\346\226\207\346\235\260/20230418_\345\242\250\345\210\200\345\210\266\344\275\234\345\216\237\345\236\213.md"
@@ -0,0 +1,9 @@
+# 墨刀创建原型
+
+
++ 在新建中选择项目，有空白项目和模板中创建项目两个选项，笔者主要以空白项目为例，输入项目名称、选择设备类型及型号，点击创建按钮。
+
++ 创建项目之后，进入工作区，右边有各种组件，图标，母板。可直接将组件和图标拖到页面，然后根据需要进行修改或直接使用。
+
++ 页面状态从属于某页面，原型内每个页面下都可以新建若干状态。但同一页面的不同状态中，组件必须一致，且只能在全局状态中添加或删除组件。本例选择的就是在一个页面中创建多个状态。
+
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230420_.md" "b/21\347\216\213\346\226\207\346\235\260/20230420_.md"
deleted file mode 100644
index e69de29..0000000
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230420_\346\267\261\345\205\245Props.md" "b/21\347\216\213\346\226\207\346\235\260/20230420_\346\267\261\345\205\245Props.md"
new file mode 100644
index 0000000..ec29357
--- /dev/null
+++ "b/21\347\216\213\346\226\207\346\235\260/20230420_\346\267\261\345\205\245Props.md"
@@ -0,0 +1,152 @@
+# 深入Props
+
+#
+## 一.定义 Props 选项
+
++ 选项式的定义:
+
+    + 没有使用 <**script setup**> 的组件方式为**选项式**，运用的是**选项式的API**
+
+    + 在选项式中，prop 可以使用 **props 选项**来声明
+```vue
+<script>
+export default{
+    props:{
+        xx:String,//字符串类型
+        arr:Array,//数组类型
+        judge:Boolean,//布尔值类型
+        author:Object,//属性类型
+        figure:Number
+    }
+}
+</script>
+```
+
++ 组合式的定义:
+
+    + 使用 <**script setup**> 的单文件组件为**组合式**，运用的是**组合式的API**
+
+    + 在组合式中，props 可以使用 **defineProps() 宏**来声明
+```vue
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  xx:String,
+  arr:Array
+})
+</script>
+```
+
++ 传递给 defineProps() 的参数和提供给 props 选项的值是相同的，两种声明方式背后其实使用的都是 **prop 选项**。
+
+#
+## 二.细节
+
+### 命名格式
+
++ Prop 的命名格式使用 **camelCase 形式(小驼峰形式)**
+
++ 组件名 的命名格式使用 **PascalCase 形式**，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素。
+
+### prop 的绑定
+
++ 直接使用 prop 的名字来进行静态形式的绑定
+```html
+<HelloWorld xx="123"/>
+```
+
++ 使用 **v-bind** 或**缩写 :** 来进行动态形式的绑定：当使用一个 JavaScript 表达式而不是一个字符串需要用到
+```html
+<HelloWorld :arr="arr"/>
+```
+
+### 传递不同类型
+
++ Number 类型:使用 **v-bind** 动态的绑定
+
++ Boolean 类型(布尔):
+
+    + 不传值时，会隐性为 true ;
+    ```html
+    <Props judge />
+    ```
+
+    + 传值时，需要使用 **v-bind** 进行动态的绑定
+
++ Array 类型(数组):使用 **v-bind** 动态的绑定
+
++ Object 类型(属性):使用 **v-bind** 动态的绑定
+```vue
+<!-- Props.vue -->
+<script>
+export default{
+    props:{
+        xx:String,//字符串
+        arr:Array,//数组
+        judge:Boolean,//布尔值
+        author:Object,//属性
+        figure:Number
+    }
+}
+</script>
+<!-- App.vue -->
+<template>
+  <div>
+    <Props 
+    xx="123" 
+    :arr="arr" 
+    judge 
+    :author="{
+      name:'1'
+    }"
+    :figure=12 />
+  </div>
+</template>
+```
+
+### Prop 校验
+
+```vue
+<!-- 选项式的校验 -->
+<script>
+export default{
+    props:{
+        propsA:{
+            //基础类型检查
+            type:String,
+            //设置默认值
+            default:'1'
+        }
+    }
+}
+</script>
+
+<!-- 组合式的校验 -->
+<script setup>
+    defineProps({
+        // 基础类型检查
+        // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
+        propA: Number,
+        // Number 类型的默认值
+        propD: {
+            type: Number,
+            default: 100
+        }
+    })
+</script>
+
+<template>
+    <div>
+        <h1>{{propsA}}</h1>
+    </div>
+</template>
+```
+
+## 三.其他细节
+
++ 所有 prop 默认都是可选的，除非声明了 required: true
+
++ Boolean 类型的未传递 prop 将被转换为 false。这可以通过为它设置 default 来更改
+
++ 如果声明了 default 值，那么在 prop 的值被解析为 undefined 时，无论 prop 是未被传递还是显式指明的 undefined，都会改为 default 值。
\ No newline at end of file
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230421_.md" "b/21\347\216\213\346\226\207\346\235\260/20230421_.md"
deleted file mode 100644
index e69de29..0000000
diff --git "a/21\347\216\213\346\226\207\346\235\260/20230421_\346\267\261\345\205\245\344\272\213\344\273\266.md" "b/21\347\216\213\346\226\207\346\235\260/20230421_\346\267\261\345\205\245\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..3689856
--- /dev/null
+++ "b/21\347\216\213\346\226\207\346\235\260/20230421_\346\267\261\345\205\245\344\272\213\344\273\266.md"
@@ -0,0 +1,163 @@
+# 深入事件
+
+#
+## 一.定义触发的事件
+
++ 选项式的定义
+
+    + 通过 **emits 选项**来定义它要触发的事件
+```vue
+<script>
+export default {
+  emits: ['inFocus', 'submit'],
+  methods:{
+            fn(){
+                this.$emit('someEvent',this.student.name.trim(),this.student.password.trim())
+            }
+        },
+}
+</script>
+
+```
+
++ 组合式的定义
+
+    + 通过 **defineEmits() 宏**来声明它要触发的事件
+
+```vue
+<script setup>
+const emit = defineEmits(['inFocus', 'submit'])
+
+function buttonClick() {
+  emit('submit')
+}
+</script>
+
+```
+
+#
+## 二.事件的监听和校验
+
++ 通过 **v-on (缩写为 @)** 来监听事件
+
++ 通过返回值为 `true` 还是为 `false` 来判断验证是否通过
+
+### 组合式
+```vue
+<!-- 组合式 -->
+<script setup>
+  import {ref,reactive} from 'vue'
+
+  const student=reactive({
+    email:'',
+    password:''
+  })
+
+        // 定义触发的事件
+  const emit=defineEmits({
+    //校验传递出来的数据
+    someEvent:(email,password)=>{
+      if(email.trim()&& password.trim()){
+        return true
+      }else{
+        if(email.trim()){
+          console.warn('输入的密码为空，请重新输入')
+          return false
+        }
+        if(password.trim()){
+          console.warn('输入的邮箱为空，请重新输入')
+          return false
+        }
+        console.warn('输入的邮箱和密码为空，请重新输入')
+        return false
+      }
+    }
+  })
+
+    const fn=function(){
+    //传递定义的事件，将相关的值传入定义的事件
+    emit('someEvent',student.email.trim(),student.password.trim())
+  }
+
+</script>
+
+<template>
+  <div>
+    <table>
+      <tr>
+        <td><label for="">邮箱:</label></td>
+        <td>
+            <!-- 绑定数据 -->
+          <input type="email" v-model="student.email">
+        </td>
+      </tr>
+      <tr>
+        <td><label for="">密码:</label></td>
+        <td>
+          <input type="password" v-model="student.password">
+        </td>
+      </tr>
+      <tr>
+        <input type="button" value="登录" @click="fn">
+      </tr>
+    </table>
+  </div>
+</template>
+
+```
+
+### 选项式
+```vue
+<script>
+    export default{
+        data(){
+            return{
+                student:{
+                    name:'',
+                    password:''
+                }
+            }
+        },
+        methods:{
+            fn(){
+                this.$emit('someEvent',this.student.name.trim(),this.student.password.trim())
+            }
+        },
+        emits:{
+            someEvent:(name,password)=>{
+                if(name.trim()&& password.trim()){
+                    return true
+                }else{
+                    if(name.trim()){
+                        console.warn('输入的密码为空，请重新输入')
+                        return false
+                    }
+                    if(password.trim()){
+                        console.warn('输入的用户名为空，请重新输入')
+                        return false
+                    }
+                console.warn('输入的用户名和密码为空，请重新输入')
+                return false
+                }
+            }
+        },
+    }
+</script>
+```
+
+### 父组件接收数据: App.vue
+```vue
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+const fn=function(email,password){
+  console.log('+++++++++++++')
+  console.log(email)
+  console.log(password)
+}
+</script>
+
+<template>
+  <HelloWorld @someEvent="fn" />
+</template>
+```
\ No newline at end of file
-- 
Gitee