From 3659f66f773361e0b117212e23852c2a2f1b4fa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=AF=E6=B5=A9=E5=AE=87?= <2899727672@qq.com> Date: Sun, 2 Apr 2023 18:52:20 +0800 Subject: [PATCH] 1 --- .../20230329-Vue\347\256\200\344\273\213.md" | 10 +++++ ...ue\347\232\204\345\210\233\345\273\272.md" | 45 +++++++++++++++++++ ...41\346\235\277\350\257\255\346\263\225.md" | 43 ++++++++++++++++++ 3 files changed, 98 insertions(+) create mode 100644 "\345\206\257\346\265\251\345\256\207/20230329-Vue\347\256\200\344\273\213.md" create mode 100644 "\345\206\257\346\265\251\345\256\207/20230330-Vue\347\232\204\345\210\233\345\273\272.md" create mode 100644 "\345\206\257\346\265\251\345\256\207/20230331-Vue\346\250\241\346\235\277\350\257\255\346\263\225.md" diff --git "a/\345\206\257\346\265\251\345\256\207/20230329-Vue\347\256\200\344\273\213.md" "b/\345\206\257\346\265\251\345\256\207/20230329-Vue\347\256\200\344\273\213.md" new file mode 100644 index 0000000..16a9ba9 --- /dev/null +++ "b/\345\206\257\346\265\251\345\256\207/20230329-Vue\347\256\200\344\273\213.md" @@ -0,0 +1,10 @@ +# Vue简介 + +### 1.Vue的介绍 + +Vue.js致力于构建数据驱动的web应用开发框架，以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。Vue3.0的出现，又带动周边生态的发展，奠定了vue在企业级开发的重要地位。 + +Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 + +- **声明式渲染**：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 +- **响应性**：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。 \ No newline at end of file diff --git "a/\345\206\257\346\265\251\345\256\207/20230330-Vue\347\232\204\345\210\233\345\273\272.md" "b/\345\206\257\346\265\251\345\256\207/20230330-Vue\347\232\204\345\210\233\345\273\272.md" new file mode 100644 index 0000000..fd04278 --- /dev/null +++ "b/\345\206\257\346\265\251\345\256\207/20230330-Vue\347\232\204\345\210\233\345\273\272.md" @@ -0,0 +1,45 @@ +# Vue的创建 + +## 创建一个 Vue 应用 + +``` +## npm init vite +## yarn create vite +``` + +这一指令将会安装并执行 [create-vue](https://github.com/vuejs/create-vue)，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示： + +``` +✔ Project name: … +✔ Add TypeScript? … No / Yes +✔ Add JSX Support? … No / Yes +✔ Add Vue Router for Single Page Application development? … No / Yes +✔ Add Pinia for state management? … No / Yes +✔ Add Vitest for Unit testing? … No / Yes +✔ Add Cypress for both Unit and End-to-End testing? … No / Yes +✔ Add ESLint for code quality? … No / Yes +✔ Add Prettier for code formatting? … No / Yes + +Scaffolding project in ./... +Done. +``` + +如果不确定是否要开启某个功能，你可以直接按下回车键选择 `No` + +### 安装依赖并启动开发服务器： + +``` +cd <文件名> +## npm +安装依赖 +npm install +运行 +npm run dev + +## yarn +安装依赖 +yarn install +运行 +yarn dev +``` + diff --git "a/\345\206\257\346\265\251\345\256\207/20230331-Vue\346\250\241\346\235\277\350\257\255\346\263\225.md" "b/\345\206\257\346\265\251\345\256\207/20230331-Vue\346\250\241\346\235\277\350\257\255\346\263\225.md" new file mode 100644 index 0000000..2ceffc0 --- /dev/null +++ "b/\345\206\257\346\265\251\345\256\207/20230331-Vue\346\250\241\346\235\277\350\257\255\346\263\225.md" @@ -0,0 +1,43 @@ +# Vue模板语法 + +## 文本插值 + +基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)： + +```vue +Message: {{ msg }} +``` + +双大括号标签会被替换为相应组件实例中 `msg` 属性的值。同时每次 `msg` 属性更改时它也会同步更新。 + +## 原始 HTML + +双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，需要使用 [`v-html` 指令](https://cn.vuejs.org/api/built-in-directives.html#v-html)： + +```vue + +``` + +## Attribute 绑定 + +### 布尔型 Attribute + +`v-bind` 在这种场景下的行为略有不同： + +```vue +//app.vue + +``` + + + +```vue +//HelloWorld.vue +属性 +defineProps({ + isDisabled:Boolean, +}) + +``` + +当 `isDisabled` 为[真值](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)或一个空字符串 (即 `