From 49ac6fec2f004ec8ce51ce1d2ee1dd0e0c84f285 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E8=A5=BF=E5=9F=9F?= <1843615081@qq.com> Date: Mon, 10 Apr 2023 16:24:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=BE=90=E8=A5=BF=E5=9F=9F=E6=98=AF?= =?UTF-8?q?=E7=89=9B=E9=A9=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...6\346\200\247\347\273\221\345\256\2321.md" | 99 +++++++++ "\345\210\235\350\257\206Vue3.md" | 55 +++++ ...36\346\200\247\347\273\221\345\256\232.md" | 47 +++++ ...24\345\274\217\345\237\272\347\241\200.md" | 190 ++++++++++++++++++ ...41\344\273\266\346\270\262\346\237\223.md" | 137 +++++++++++++ ...67\345\274\217\347\273\221\345\256\232.md" | 183 +++++++++++++++++ 6 files changed, 711 insertions(+) create mode 100644 "4\347\247\215\346\226\271\346\263\225\343\200\201\346\226\207\346\234\254\346\217\222\345\200\274\343\200\201\345\216\237\345\247\213HTML\343\200\201\345\261\236\346\200\247\347\273\221\345\256\2321.md" create mode 100644 "\345\210\235\350\257\206Vue3.md" create mode 100644 "\345\261\236\346\200\247\347\273\221\345\256\232.md" create mode 100644 "\346\214\207\344\273\244\343\200\201\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" create mode 100644 "\346\235\241\344\273\266\346\270\262\346\237\223.md" create mode 100644 "\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232.md" diff --git "a/4\347\247\215\346\226\271\346\263\225\343\200\201\346\226\207\346\234\254\346\217\222\345\200\274\343\200\201\345\216\237\345\247\213HTML\343\200\201\345\261\236\346\200\247\347\273\221\345\256\2321.md" "b/4\347\247\215\346\226\271\346\263\225\343\200\201\346\226\207\346\234\254\346\217\222\345\200\274\343\200\201\345\216\237\345\247\213HTML\343\200\201\345\261\236\346\200\247\347\273\221\345\256\2321.md" new file mode 100644 index 0000000..edcb0bc --- /dev/null +++ "b/4\347\247\215\346\226\271\346\263\225\343\200\201\346\226\207\346\234\254\346\217\222\345\200\274\343\200\201\345\216\237\345\247\213HTML\343\200\201\345\261\236\346\200\247\347\273\221\345\256\2321.md" @@ -0,0 +1,99 @@ +# 创建Vue3项目的几种方法 +1. 利用HBuilder X 项目模板 +文件-新建-项目-选择vue3项目 + +vue --version // 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version + +2. 使用 vue-cli 创建 +## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 +vue --version +## 安装或者升级你的@vue/cli +npm install -g @vue/cli +## 创建 +vue create vue_test +## 启动 +cd vue_test +npm run serve +复制代码 + +3. 使用 vite 创建 +什么是vite？—— 新一代前端构建工具。 +优势如下： 开发环境中，无需打包操作，可快速的冷启动。 - 轻量快速的热重载（HMR）。 - 真正的按需编译，不再等待整个应用编译完成。 +官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite vite、 + +官网：https://vitejs.cn + +## 创建工程 +npm init vite-app +## 进入工程目录 +cd +## 安装依赖 +npm install +## 运行 +npm run dev +复制代码 + +4. 基于可视化面板创建vue3项目 +vue ui + + +# 模板语法 +## 文本插值 +App.vue +```vue + +``` +HelloWorld.vue +```vue +defineProps({ + msg: String, + bdxz:String +}) + + + +``` +双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。 + +## 原始html +双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令 +``` +bdxz="不当小猪" + +
+``` + +* 安全警告 +在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。 + + +# Attribute 绑定 +双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令： + +``` +
+``` +``` +defineProps({ + msg: String, + bdxz:String, + id:Number +}) + + + + +``` +v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。 diff --git "a/\345\210\235\350\257\206Vue3.md" "b/\345\210\235\350\257\206Vue3.md" new file mode 100644 index 0000000..bb0f4e7 --- /dev/null +++ "b/\345\210\235\350\257\206Vue3.md" @@ -0,0 +1,55 @@ +# 创建一个Vue项目 +推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。 +## 方法一 +1. 新建文件夹，用Code打开 +2. 新建终端，输入yarn init,回车 +3. 输入yarn create vite --template vue 或者 yarn create vite(选择Vue、JavaScript) +4. cd .\vite-project\ +5. yarn +6. yarn dev 运行 + +## 方法二 +1. 新建文件夹，用Code打开 +2. 新建终端，输入npm init vue@latest,回车 +3. 选项见下图 +![emo](./imgs/20230329.png) +4. cd +5. npm install +6. npm run dev + + + +# API 风格 +Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。 + +## 选项式 API (Options API) +使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。 + + +# 通过 CDN 使用 Vue +## 使用全局构建版本 +```html + + + + + + Vue + + +
{{msg}}
+ + + + + +``` \ No newline at end of file diff --git "a/\345\261\236\346\200\247\347\273\221\345\256\232.md" "b/\345\261\236\346\200\247\347\273\221\345\256\232.md" new file mode 100644 index 0000000..2259208 --- /dev/null +++ "b/\345\261\236\346\200\247\347\273\221\345\256\232.md" @@ -0,0 +1,47 @@ +# Attribute 绑定 +## 简写 +因为 v-bind 非常常用，我们提供了特定的简写语法： + +
+开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的 + +## 布尔型 Attribute + +布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。 + +* isDisabled默认为true，为不显示；如果为false时，则显示 +``` + + +defineProps({ + msg: String, + bdxz:String, + id:Number, + isDisabled:Boolean +}) + + + +``` + +## 动态绑定多个值 +如果你有像这样的一个包含多个 attribute 的 JavaScript 对象： +``` +const testObj={ + id:03, + class:'btnSave', + name:'bdxz' +} +``` +通过不带参数的 v-bind，你可以将它们绑定到单个元素上： + +``` + +``` \ No newline at end of file diff --git "a/\346\214\207\344\273\244\343\200\201\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" "b/\346\214\207\344\273\244\343\200\201\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" new file mode 100644 index 0000000..1101d17 --- /dev/null +++ "b/\346\214\207\344\273\244\343\200\201\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" @@ -0,0 +1,190 @@ +# 指令 Directives +1. v-if - 根据表达式的值条件性地渲染元素。如果表达式为真，则元素会被渲染；否则，元素将被删除。可以使用 v-else 和 v-else-if 来添加其他条件分支。 + +2. v-for - 基于源数据多次渲染元素或块。v-for 通过遍历数组或对象中的项来生成内容。可以使用 v-for 的特殊语法来访问数组或对象的当前项、索引和键。 + +3. v-on - 绑定事件监听器，触发回调函数。可以使用 v-on 绑定常见的 DOM 事件（如 click、input、submit 等）以及自定义事件。可以使用 event 对象访问原生事件，也可以通过 $event 访问原生事件的属性和方法。 + +4. v-bind - 动态地绑定一个或多个特性，或一个组件 prop 到表达式。可以使用 : 缩写语法，例如 :href="url"。可以使用动态绑定表达式来计算特性或 prop 的值。 + +5. v-model - 在表单输入控件上创建双向数据绑定。v-model 绑定到一个数据属性，并在用户输入时自动更新该属性。可以使用 v-model 来绑定输入控件的值、选中状态、多选列表等。 + +6. v-text - 更新元素的 textContent。和 {{ }} 的插值语法类似，可以使用 v-text 来直接更新元素的文本内容，而不是使用 textContent 属性。 + +7. v-html - 更新元素的 innerHTML。可以使用 v-html 来直接将字符串作为 HTML 插入到元素中。但是要注意潜在的安全风险，因为插入的内容可能包含恶意脚本或标签。 +![emo](./imgs/20230403.png) + +# 响应式基础 + +## 选项式 +``` + + + +``` + +## 组合式 +``` + + + +``` +## 声明方法 +``` + +``` +使用this实例，不能使用箭头函数 + +## DOM 更新时机​ +当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只更新一次。 diff --git "a/\346\235\241\344\273\266\346\270\262\346\237\223.md" "b/\346\235\241\344\273\266\346\270\262\346\237\223.md" new file mode 100644 index 0000000..3ecec81 --- /dev/null +++ "b/\346\235\241\344\273\266\346\270\262\346\237\223.md" @@ -0,0 +1,137 @@ +## 条件渲染 +v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 +一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。 +```js + data(){ + return { + as :false + } + } + +
ddd
+
ccc
+ +``` + +#### v-else-if + +```js +data(){ + return { + as :0 + } + } + +
ddd
+
ccc
+
bbb
+
ttt
+ +``` + +#### v-show + +```js + data(){ + return { + as :false + } + } +

dd

+

ss

+``` +v-show中的css属性display会被修改为none + +# 列表渲染 +#### v-for + +```js + data(){ + return { + item :[ + { + nane :'dd' + }, + { + nane :'cc' + } + ] + } + } + +
    +
  1. + {{ item.nane }} +
    2. +
+ +``` +v-for 块中可以完整地访问父作用域内的属性和变量。 +```js + data(){ + return { + uid : 'as', + item :[ + { + nane :'dd' + }, + { + nane :'cc' + } + ] + } + } + +
  • + {{ uid }} - {{ item.nane }} +
    • + // as-dd as-cc + +``` +#### v-if 和 v-for + +当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名： +需嵌套一层 +```js + data(){ + return { + item :[ + { + id : 1, + nane :'刻晴' + }, { + id : 2, + nane :'影' + }, { + id : 3, + nane :'八重神子' + }, { + id : 4, + nane :'丽莎' + }, + ] + } + } + + + +
    + +
    + +``` +通过key管理状态，key的值不得重复 + +## 数组变化侦测 +变更方法 +1. push() +2. pop() +3. shift() +4. unshift() +5. splice() +6. sort() +7. reverse() \ No newline at end of file diff --git "a/\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232.md" "b/\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232.md" new file mode 100644 index 0000000..b771a9b --- /dev/null +++ "b/\350\256\241\347\256\227\345\261\236\346\200\247\343\200\201\347\261\273\344\270\216\346\240\267\345\274\217\347\273\221\345\256\232.md" @@ -0,0 +1,183 @@ +# 计算属性 +## 计算属性的定义和使用 +计算属性可以通过现有的数据来计算出派生状态。计算属性可以通过 computed 函数来定义。在选项式组件中，可以在 computed 对象中定义计算属性。 +``` +export default { + data() { + return { + count: 0 + } + }, + computed: { + doubled() { + return this.count * 2; + } + } +} +``` +在上面的代码中，定义了一个计算属性 doubled，它返回 count 的两倍。在模板中，可以像使用普通属性一样使用计算属性。 + +``` + +``` +在上面的模板中，展示了 count 和 doubled 的值。当 count 发生变化时，doubled 的值也会自动更新。 + +## 计算属性的响应式 +计算属性是响应式的，这意味着当依赖的 data 属性发生改变时，计算属性会自动更新。 +``` +export default { + data() { + return { + count: 0, + message: '' + } + }, + computed: { + doubled() { + return this.count * 2; + }, + reversed() { + return this.message.split('').reverse().join(''); + } + } +} +``` +在上面的代码中，定义了两个计算属性：doubled 和 reversed。doubled 依赖于 count，reversed 依赖于 message。当 count 或 message 发生变化时，相应的计算属性会自动更新。 + +## 计算属性的 setter +计算属性还支持 setter，它允许对计算属性进行赋值。可以通过 get 和 set 方法来定义计算属性。 +``` +export default { + data() { + return { + firstName: 'John', + lastName: 'Doe' + } + }, + computed: { + fullName: { + get() { + return this.firstName + ' ' + this.lastName; + }, + set(value) { + const names = value.split(' '); + this.firstName = names[0]; + this.lastName = names[1]; + } + } + } +} +``` +在上面的代码中，定义了一个计算属性 fullName，它由 firstName 和 lastName 派生而来。还定义了一个 set 方法，用于在 fullName 中设置新的值。这样，可以通过 fullName 来修改 firstName 和 lastName。 +``` + + +``` + +在上面的模板中，展示了 fullName 的值，并使用 v-model 指令将 fullName 绑定到输入框中。当用户修改输入框中的值时，set 方法会自动被调用，从而修改 firstName 和 lastName 的值。 + +# Class 与 Style 绑定 +Vue3中的选项式class和style绑定是用来动态设置元素的class和style属性的。这些属性可以根据组件的状态或数据的变化而动态变化。在Vue3中，class和style的绑定可以用v-bind指令或简写语法来实现。 + +## class绑定 +Vue3中的class绑定有两种方式： +### 1.1 对象语法 +当需要根据组件状态来动态设置class时，可以使用对象语法。例如，可以根据组件的isActive状态来切换class： + +``` + + + +``` +当isActive为true时，div元素将拥有class名为“active”，否则不会有该class。 + +### 1.2 数组语法 +当需要同时应用多个class时，可以使用数组语法。例如，可以同时添加多个class： +``` + + + +``` +在这个例子中，div元素将同时拥有class名为“active”和“text-danger”。 + +## style绑定 +Vue3中的style绑定同样有两种方式： +### 2.1 对象语法 +当需要根据组件状态来动态设置样式时，可以使用对象语法。例如，可以根据组件的textColor状态来设置字体颜色： + +``` + + + +``` +在这个例子中，div元素将拥有红色的字体颜色。 + +### 2.2 数组语法 +当需要同时设置多个样式时，可以使用数组语法。例如，我们可以同时设置字体颜色和背景颜色： +``` + + + + +``` +在这个例子中，div元素将同时拥有红色的字体颜色和蓝色的背景颜色。 + +Vue3中的选项式class和style绑定提供了一种动态设置元素属性的方式，可以根据组件状态或数据的变化而动态变化，使得组件的交互性更强。 + +![emo](./imgs/2.5%E7%B1%BB%E4%B8%8E%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A.png) \ No newline at end of file -- Gitee From 72f80da3cc621b8f1070e810c69a273d356dbd0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E8=A5=BF=E5=9F=9F?= <1843615081@qq.com> Date: Fri, 21 Apr 2023 11:27:26 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=BE=90=E8=A5=BF=E5=9F=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...13\344\273\266\345\244\204\347\220\206.md" | 201 ++++++++++++++++++ ...\347\241\200(\351\203\250\345\210\206).md" | 141 ++++++++++++ ...01\344\276\246\345\220\254\345\231\250.md" | 129 +++++++++++ ...23\345\205\245\347\273\221\345\256\232.md" | 195 +++++++++++++++++ readme.md | 1 - 5 files changed, 666 insertions(+), 1 deletion(-) create mode 100644 "Vue\345\237\272\347\241\200_\344\272\213\344\273\266\345\244\204\347\220\206.md" create mode 100644 "Vue\345\237\272\347\241\200_\346\250\241\346\235\277\345\274\225\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200(\351\203\250\345\210\206).md" create mode 100644 "Vue\345\237\272\347\241\200_\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md" create mode 100644 "Vue\345\237\272\347\241\200_\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" delete mode 100644 readme.md diff --git "a/Vue\345\237\272\347\241\200_\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/Vue\345\237\272\347\241\200_\344\272\213\344\273\266\345\244\204\347\220\206.md" new file mode 100644 index 0000000..8aeab40 --- /dev/null +++ "b/Vue\345\237\272\347\241\200_\344\272\213\344\273\266\345\244\204\347\220\206.md" @@ -0,0 +1,201 @@ +# 4.10笔记 +## 监听事件 +使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler" + +## 事件处理器`(handler)`的值有两种： +### 内联事件处理器 +- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似) +```JS + + + +``` +### 方法事件处理器 +- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径 + +随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用 +```JS + + + +``` +方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素 +### 方法说内联事件判断 +模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器 +## 在内联处理器中调用方法 +除了直接绑定方法名，还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件 +```JS + + + +``` +## 在内联事件处理器中访问事件参数 +有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数： +```JS + + + +``` +## 事件修饰符 +在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好 + +为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些： +- .stop +- .prevent +- .self +- .capture +- .once +- .passive +```JS + + + + +
    + + + + + +
    + + + +
    ...
    + +``` +使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为 + +.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应： +```JS + + +
    ...
    + + + + + + +
    ...
    +``` +.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能 + +不要同时使用 .passive 和 .prevent，.passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告 +## 按键修饰符 +在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符 +```JS + + +``` +直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式 +```JS + +``` +在上面的例子中，仅会在 $event.key 为 'PageDown' 时调用事件处理 +### 按键别名 +Vue 为一些常用的按键提供了别名： +- .enter +- .tab +- .delete (捕获“Delete”和“Backspace”两个按键) +- .esc +- .space +- .up +- .down +- .left +- .right +### 系统按键修饰符 +你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发 +- .ctrl +- .alt +- .shift +- .meta +```JS + + + + +
    随便做点什么
    +``` +### .exact 修饰符 +.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符 +```JS + + + + + + + + +``` +## 鼠标按键修饰符 +- .left +- .right +- .middle \ No newline at end of file diff --git "a/Vue\345\237\272\347\241\200_\346\250\241\346\235\277\345\274\225\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200(\351\203\250\345\210\206).md" "b/Vue\345\237\272\347\241\200_\346\250\241\346\235\277\345\274\225\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200(\351\203\250\345\210\206).md" new file mode 100644 index 0000000..c64f116 --- /dev/null +++ "b/Vue\345\237\272\347\241\200_\346\250\241\346\235\277\345\274\225\347\224\250\343\200\201\347\273\204\344\273\266\345\237\272\347\241\200(\351\203\250\345\210\206).md" @@ -0,0 +1,141 @@ +# 4.14笔记 +# 模板引用 +直接访问底层 DOM 元素，使用特殊的`ref`attribute: +```JS + +``` +ref与v-for中的key类似。它允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。 +## 访问模板引用 +挂载结束后引用都会被暴露在`this.$refs`之上： +```JS + + + +``` +只可以在挂载后才能访问引用模板 +## v-for中的模板引用 +当在v-for中使用模板引用时，相应的引用中包含的值是一个数组 +```JS + + + +``` +ref数组并不保证与源数组相同的顺序 +## 函数模板引用 +ref attribute还可以绑定为一个函数，在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数： +```JS +{ /* 将 el 赋值给一个数据属性或 ref 变量 */}> +``` +要使用动态的`：ref`绑定才能传入一个函数。当绑定的函数被卸载时，函数也会被调用一次，此时的el参数回事null +## 组件上的ref + +# 组件基础 +## 定义一个组件 +当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)： +```JS + + + +``` +## 使用组件 +要使用一个子组件，需要在父组件中导入它 +```JS +//ButtonCount.vue文件 + + + + +//App.vue文件 + + + +``` +组件可以被重用任意多次 +## 传递props +Props是一个特殊的attributes，可以在组件上声明注册 +```JS +// BolgPost.vue + + + + +//App.vue文件 + + + +``` diff --git "a/Vue\345\237\272\347\241\200_\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md" "b/Vue\345\237\272\347\241\200_\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md" new file mode 100644 index 0000000..68eccd9 --- /dev/null +++ "b/Vue\345\237\272\347\241\200_\347\224\237\345\221\275\345\221\250\346\234\237\343\200\201\344\276\246\345\220\254\345\231\250.md" @@ -0,0 +1,129 @@ +# 4.13笔记 +# 生命周期 +## 生命周期钩子 +每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码 +## 注册周期钩子 +mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码： +```JS +export default { + mounted() { + console.log(`the component is now mounted.`) + } +} +``` +还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted、updated 和 unmounted + +所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例 +## 生命周期图示 +[图裂了!](./imgs/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA2.png) +# 侦听器 +## 基本事例 +```JS + + +``` +## 深层侦听器 +watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更，需要深层侦听器： +```JS +export default { + watch: { + someObject: { + handler(newValue, oldValue) { + // 注意：在嵌套的变更中， + // 只要没有替换对象本身， + // 那么这里的 `newValue` 和 `oldValue` 相同 + }, + deep: true + } + } +} +``` +深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能 +## 即时回调的侦听器 +watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据 + +我们可以用一个对象来声明侦听器，这个对象有 handler 方法和 immediate: true 选项，这样便能强制回调函数立即执行： + +```JS +export default { + // ... + watch: { + question: { + handler(newQuestion) { + // 在组件实例创建时会立即调用 + }, + // 强制立即执行回调 + immediate: true + } + } + // ... +} +``` +回调函数的初次执行就发生在 created 钩子之前。Vue 此时已经处理了 data、computed 和 methods 选项，所以这些属性在第一次调用时就是可用的 +## 回调的触发时机 +当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调 + +默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新`之前`被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态 + +如果想在侦听器回调中能访问被 Vue 更新`之后`的 DOM，你需要指明 flush: 'post' 选项： + +```JS +export default { + // ... + watch: { + key: { + handler() {}, + flush: 'post' + } + } +} +``` +## this.$watch() +使用组件实例的 $watch() 方法来命令式地创建一个侦听器： +```JS +export default { + created() { + this.$watch('question', (newQuestion) => { + // ... + }) + } +} +``` +如果要在特定条件下设置一个侦听器，或者只侦听响应用户交互的内容，这方法很有用。它还允许你提前停止该侦听器 +## 停止侦听器 +用 watch 选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止 + +在少数情况下，你的确需要在组件卸载之前就停止一个侦听器，这时可以调用 $watch() API 返回的函数： +```JS +const unwatch = this.$watch('foo', callback) + +// ...当该侦听器不再需要时 +unwatch() +``` \ No newline at end of file diff --git "a/Vue\345\237\272\347\241\200_\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" "b/Vue\345\237\272\347\241\200_\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..6a76abe --- /dev/null +++ "b/Vue\345\237\272\347\241\200_\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" @@ -0,0 +1,195 @@ +# 4.12笔记 +## v-model指令 + +## 基本用法 +### 文本 +```JS +

    请输入：{{ message }}

    + +``` +### 多行文本 +```JS +

    请输入：

    +

    {{ message }}

    + +``` +在`