From 05144f39d8d59920615bf7bdbe623474c13699b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E5=AD=9D=E5=9D=9A?= <2091501917@qq.com>
Date: Sun, 21 Apr 2024 13:42:49 +0000
Subject: [PATCH] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 唐孝坚 <2091501917@qq.com>
---
 ...00\351\203\250\347\273\204\344\273\266.md" | 74 +++++++++++++++++++
 ...33\345\273\272\347\273\204\344\273\266.md" | 46 ++++++++++++
 ...41\346\235\277\350\257\255\346\263\225.md" | 33 +++++++++
 .../20240419-\346\214\207\344\273\244.md"     | 34 +++++++++
 4 files changed, 187 insertions(+)
 create mode 100644 "\345\224\220\345\255\235\345\235\232/20240415-\345\205\250\345\261\200\347\273\204\344\273\266\345\222\214\345\261\200\351\203\250\347\273\204\344\273\266.md"
 create mode 100644 "\345\224\220\345\255\235\345\235\232/20240416-\345\210\233\345\273\272\347\273\204\344\273\266.md"
 create mode 100644 "\345\224\220\345\255\235\345\235\232/20240418-Vue.js\346\250\241\346\235\277\350\257\255\346\263\225.md"
 create mode 100644 "\345\224\220\345\255\235\345\235\232/20240419-\346\214\207\344\273\244.md"

diff --git "a/\345\224\220\345\255\235\345\235\232/20240415-\345\205\250\345\261\200\347\273\204\344\273\266\345\222\214\345\261\200\351\203\250\347\273\204\344\273\266.md" "b/\345\224\220\345\255\235\345\235\232/20240415-\345\205\250\345\261\200\347\273\204\344\273\266\345\222\214\345\261\200\351\203\250\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..3640cd2
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240415-\345\205\250\345\261\200\347\273\204\344\273\266\345\222\214\345\261\200\351\203\250\347\273\204\344\273\266.md"
@@ -0,0 +1,74 @@
+1.注册组件的的方式：分为“全局注册”和“局部注册”两种，其中：
+- 被全局注册的组件，可以在全局任何一个组件内使用
+- 被局部注册的组件，只能在当前注册的范围内使用
+
+1）全局注册组件
+在main .js 中引用
+
+```
+import Vue from 'vue'
+//导入 dialogBox 和Test 两个组件
+import dialogBox from './components/InfoMessage/index.vue';
+import Test from './components/MyTest.vue'
+Vue.component('dialogBox', dialogBox)
+Vue.component('my-test', Test)
+
+
+```
+
+2)使用全局注册组件
+使用app.component() 方法注册的全局组件，直接以标签的形式进行使用即可，例如：
+
+```
+ //在 main.js中，注册了dialogBox 和my-test两个全局组件
+Vue.component('dialogBox', dialogBox)
+Vue.component('my-test', Test)
+
+ <！--在其他组件中，直接以标签的形式，使用刚才注册的全局组件即可
+ <template>
+ <h1>这是App根组件</h1>
+ <hr/>
+ <dialogBox></dialogBox>
+
+<my-test></my-test>
+ </template>
+
+
+```
+
+
+3）局部注册组件
+
+```
+<template>
+ <h1>这是App根组件</h1>
+
+<my-swiper></my-swiper>
+
+<my-search></my-search>
+
+ </template>
+
+ <script>
+ import Search from './components/MySearch.vue'
+ export default {
+components：{// 通过 components节点，为当前的组件注册私有子组件
+
+'my-search': Search,
+
+
+ },
+}
+
+
+```
+
+2.全局注册和局部注册的区别
+
+- 被全局注册的组件，可以在全局任何一个组件内使用
+- 被局部注册的组件，只能在当前在这里插入代码片注册的范围内使用
+
+应用场景：
+
+- 如果某些组件在开发期间的使用频率很高，推荐进行全局注册;
+- 如果某些组件只在特定的情况下会被用到，推荐进行局部注册。
\ No newline at end of file
diff --git "a/\345\224\220\345\255\235\345\235\232/20240416-\345\210\233\345\273\272\347\273\204\344\273\266.md" "b/\345\224\220\345\255\235\345\235\232/20240416-\345\210\233\345\273\272\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..8a51905
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240416-\345\210\233\345\273\272\347\273\204\344\273\266.md"
@@ -0,0 +1,46 @@
+## 用component()方法创建组件
+### app.component()注册组件
+```
+const app=Vue.createApp({})
+//定义一个名为button-component的新组件
+app.component('button-component',{
+    data(){
+        return {
+            str:'btn'
+        }
+    },
+    template:'<button>I am a {{str}}</button>'
+})
+app.mount('#app')
+
+
+```
+
+app.component()方法的第一个参数是标识这个组件的名字，名为button-component,第二个参数是一个对象，这里的data必须是一个函数function，这个函数返回一个对象。
+
+### button-component组件的使用
+```
+<div id="app">
+<button-component></button-component>
+{{msg}}
+
+</div>
+
+
+```
+<button-component>表示用了一个自定义标签来使用组件，其内容保持和组件名一样，这是Vue中特有的使用组件的写法。
+
+### 多次使用<button-component>组件，以达到简单的组件复用的效果
+
+```
+<div id="app">
+<button-component></button-component>
+<button-component></button-component>
+{{msg}}
+
+</div>
+
+
+```
+## Vue组件、跟组件、实例的区别
+在一般情况下，我们使用createAPP（）创建的叫做应用（根）实例，然后调用mount（）方法得到的叫作跟组件，而使用app.component()方法创建的叫作子组件，组件也可以叫作组件实例，概念上它们的区别并不大。一个Vue应用由一个根组件和多个子组件组成，它们之间的关系和区别主要是：
\ No newline at end of file
diff --git "a/\345\224\220\345\255\235\345\235\232/20240418-Vue.js\346\250\241\346\235\277\350\257\255\346\263\225.md" "b/\345\224\220\345\255\235\345\235\232/20240418-Vue.js\346\250\241\346\235\277\350\257\255\346\263\225.md"
new file mode 100644
index 0000000..6e37dd4
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240418-Vue.js\346\250\241\346\235\277\350\257\255\346\263\225.md"
@@ -0,0 +1,33 @@
+### Vue.js模板语法
+
+Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
+
+在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
+
+如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。
+
+### 文本插值​
+最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
+```
+
+```
+template
+<span>Message: {{ msg }}</span>
+
+```
+双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
+
+
+
+### 原始 HTML​
+双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
+```
+template
+<p>Using text interpolation: {{ rawHtml }}</p>
+<p>Using v-html directive: <span v-html="rawHtml"></span></p>
+
+```
+
+这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。
+
+span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。
\ No newline at end of file
diff --git "a/\345\224\220\345\255\235\345\235\232/20240419-\346\214\207\344\273\244.md" "b/\345\224\220\345\255\235\345\235\232/20240419-\346\214\207\344\273\244.md"
new file mode 100644
index 0000000..af590ed
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240419-\346\214\207\344\273\244.md"
@@ -0,0 +1,34 @@
+## 指令
+Vue中的指令是指带有v-前缀或者说以v-开头的、设置在HTML节点上的特殊属性
+指令的作用是，当表达式的值改变时，将其产生的连带影响以响应的方式作用在DOM上。
+
+### Vue中主要的内置指令
+- v-bind 绑定标签或者组件的属性，缩写形式是‘:’
+v-bind 指令可以接受参数，在v-bind后面加上一个‘：’再跟上参数，这个参数一般是HTML元素的属性
+```
+<a v-bind:href="url">...</a>
+<img v-bind:src="url">
+
+```
+
+- v-if、v-else和v-else-if 判断是否渲染标签或者dom元素
+v-if 可以单独使用，v-else和v-else-if必须搭配v-if来使用
+
+- v-show判断是否显示标签或者dom元素
+
+- v-for循环某指定标签或者组件
+
+v-for指令需要使用item in items 形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名
+
+- v-on 绑定标签或者组建的事件，为其绑定处理函数（绑定后的逻辑是：当被绑定事件发生时，被绑定的函数就会执行）
+
+这个指令主要用来给HTML元素绑定事件，是Vue中用得最多的指令之一。v-on的冒号后面可以跟一个参数，这个参数就是触发事件的名称，v-on的指值可以是一个方法的名词或一个内联语句。和v-bind一样，v-on指令可以省略“v-on：”，而用“@”来代替
+
+- v-model 绑定表单项的关键字语法 
+
+- v-once 只渲染一次值到指定标签 
+
+- v-html渲染原始的标签元素到指定元素
+
+- v-memo 作用是在列表渲染时，在某种场景下跳过新的虚拟DOM的创建提升性能
+
-- 
Gitee