From e72d2c72830fe492e3f470fc28060720f6fe461b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E7=82=8E=E9=91=AB?= <3222057815@qq.com> Date: Sun, 2 Apr 2023 22:29:28 +0800 Subject: [PATCH] 5 --- readme.md | 1 - .../20230329-\345\210\235\350\257\206Vue3.md" | 55 +++++++++++ ...6\346\200\247\347\273\221\345\256\2321.md" | 99 +++++++++++++++++++ .../20230331-.md" | 47 +++++++++ 4 files changed, 201 insertions(+), 1 deletion(-) delete mode 100644 readme.md create mode 100644 "\346\236\227\347\202\216\351\221\253/20230329-\345\210\235\350\257\206Vue3.md" create mode 100644 "\346\236\227\347\202\216\351\221\253/20230330-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 "\346\236\227\347\202\216\351\221\253/20230331-.md" diff --git a/readme.md b/readme.md deleted file mode 100644 index 4cb2c7e..0000000 --- a/readme.md +++ /dev/null @@ -1 +0,0 @@ -## 21级软件2班 vue学习笔记 \ No newline at end of file diff --git "a/\346\236\227\347\202\216\351\221\253/20230329-\345\210\235\350\257\206Vue3.md" "b/\346\236\227\347\202\216\351\221\253/20230329-\345\210\235\350\257\206Vue3.md" new file mode 100644 index 0000000..bb0f4e7 --- /dev/null +++ "b/\346\236\227\347\202\216\351\221\253/20230329-\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/\346\236\227\347\202\216\351\221\253/20230330-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/\346\236\227\347\202\216\351\221\253/20230330-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/\346\236\227\347\202\216\351\221\253/20230330-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/\346\236\227\347\202\216\351\221\253/20230331-.md" "b/\346\236\227\347\202\216\351\221\253/20230331-.md" new file mode 100644 index 0000000..2259208 --- /dev/null +++ "b/\346\236\227\347\202\216\351\221\253/20230331-.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 -- Gitee