diff --git "a/02\346\235\250\344\275\263\346\226\207/20230327-1\347\217\255\346\234\215\345\212\241\345\231\250\351\203\250\347\275\262nodejs\345\272\224\347\224\250.md" "b/02\346\235\250\344\275\263\346\226\207/20230327-1\347\217\255\346\234\215\345\212\241\345\231\250\351\203\250\347\275\262nodejs\345\272\224\347\224\250.md" deleted file mode 100644 index 2edc0ca933108196935ad7f760548991854cb9fa..0000000000000000000000000000000000000000 --- "a/02\346\235\250\344\275\263\346\226\207/20230327-1\347\217\255\346\234\215\345\212\241\345\231\250\351\203\250\347\275\262nodejs\345\272\224\347\224\250.md" +++ /dev/null @@ -1,218 +0,0 @@ -# 服务器部署nodejs应用 - -## 一.必要条件 - -+ 1. 数据库:mysql - -+ 2. node环境:nvm - -+ 3. 代管工具:pm2 - -## 二.命令安装操作 - -+ 登录服务器 - -### 一.更新环境 -+ 检查有没有要更新的 -```js - apt update -``` -+ 更新 -```js - apt upgrade -y -``` - -### 二.安装数据库mysql - -+ 百度 - -+ exit退出数据库 - -### 三.安装nvm - -+ nvm是一个node的版本管理工具，可以简单操作node版本的切换、安装、查看。。。等等，与npm不同的是，npm是依赖包的管理工具。 - -+ 安装git: -```js - apt install git -``` - -+ 改变颜色 - ```js - vim .bashrc - ``` - -+ 1. 安装nvm的gitee镜像 - ```js - git clone https://gitee.com/mirrors/nvm .nvm(重命名为 .nvm) - ``` - + 查看目录 - ```js - l - ``` - - + 进入nvm - ```js - cd .nvm - - l - ``` - - - + 给nvm.sh加上x权限 - ```js - chmod 777 nvm.sh - - l - ``` - - - + 输入nvm看看有没有下载成功 - ```js - nvm - ``` - -+ 2. cd退出当前文件，下载node长期支持版本 - ```js - nvm install --lts - ``` - - - + 查看node的版本 - ```js - node -v - ``` - - -+ 3. 安装node的最新版本 - ```js - nvm install node - ``` - - -+ 4. 查看都安装了那些版本 - ```js - nvm list - ``` - - -+ 5. 切换版本 - ```js - nvm use --lts - ``` - - - + 查看是否有npm - ```js - npm -v - ``` - -+ 6. 全局安装yarn - ```js - npm i -g yarn - ``` - - + 更新npm(也没有不用) - ```js - npm i -g npm - ``` - -### 三.安装代管工具:pm2 - -+ 1. 安装pm2 -```js - npm i -g pm2 -``` - -+ 2. 查看是否安装成功 - ```js - pm2 - ``` - - + 管理器(可以不搞) - ```js - pm2 monitor - ``` - - -## 三.部署项目 - -+ 1. 进入目录,将项目上传 - ```js - cd /var/www - ``` - + 克隆仓库 - ```js - git clone 地址 front_back_end(重命名) - ``` - -+ 2. 进入文件 - ```js - cd front_back_end - ``` -+ 3. 进入后端文件 - ```js - cd back_end - ``` - + 安装 - ```js - yarn - ``` - - - + 如果仓库有修改，则推到上文件夹拉取,再yarn安装 - ```js - cd .. - - git pull - - yarn - ``` - - -+ 4. 部署前端 - + 进入目录 - ```js - cd /etc/nginx/conf.d - ``` - + 查看底下文件 - ```js - l - ``` - - + 设置首页的文件 - ```js - vim 域名.conf - - //检查语法错误 - nginx -t - - nginx -s reload - ``` -+ 5. 回到后端路径，启动后端 - ```js - pm2 start app.js - ``` - - + 查看运行状况 - ```js - pm2 status - ``` - - + 使用反向代理，进入修改新增页面的窗口 - ```js - vim 域名.conf - ``` - - - + 将前端的地址全部改成代理的网站地址 - -+ pm2的结束 - ```js - pm2 stop all - ``` - -## 四.项目部署的完成 - -网站: [jw图书管理系统](http://yjw.jw0525.xyz) - \ No newline at end of file diff --git "a/02\346\235\250\344\275\263\346\226\207/20230328-1\347\217\255Vue\345\205\245\351\227\250.md" "b/02\346\235\250\344\275\263\346\226\207/20230328-1\347\217\255Vue\345\205\245\351\227\250.md" deleted file mode 100644 index 6b8af2b08938d873936b6a03c54e5c7b1020dd1f..0000000000000000000000000000000000000000 --- "a/02\346\235\250\344\275\263\346\226\207/20230328-1\347\217\255Vue\345\205\245\351\227\250.md" +++ /dev/null @@ -1,69 +0,0 @@ -# Vue入门 - -## 一.什么是Vue - -+ Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 - -+ Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。 - -+ Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。 - -### Vue的不同使用方式: - -+ 无需构建步骤，渐进式增强静态的 HTML - -+ 在任何页面中作为 Web Components 嵌入 - -+ 单页应用 (SPA) - -+ 全栈 / 服务端渲染 (SSR) - -+ Jamstack / 静态站点生成 (SSG) - -+ 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面 - - -## 二.下载Vue - -### 第一种:使用 npm -```js - npm init vue -``` -+ 回车完是想设的文件夹名(可以直接回车)，后面全部直接回车就好了(全是NO) - -### 第二种 :使用 yarn -```js - yarn create vite --template vue - - 或者 - - yarn create vue - -//回车完是想设的文件夹名(可以直接回车)，后面全部直接回车就好了(全是NO) - - 或者 - - yarn create vite -//要选择 -``` - - - -## 三.使用Vue - -### 更新 npm和yarn -```js - npm i -g npm//更新npm - - npm i -g yarn //更新yarn -``` - -### 拉取依赖包 -```js - yarn//不能使用npm拉取 -``` - -### 运行Vue -```js - yarn dev //不能使用npm运行 -``` \ No newline at end of file diff --git "a/02\346\235\250\344\275\263\346\226\207/20230328-vue\347\254\254\344\270\200\350\257\276.md" "b/02\346\235\250\344\275\263\346\226\207/20230328-vue\347\254\254\344\270\200\350\257\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..fbda84752572f13fff8ee90f097b12bdc56773a3 --- /dev/null +++ "b/02\346\235\250\344\275\263\346\226\207/20230328-vue\347\254\254\344\270\200\350\257\276.md" @@ -0,0 +1,119 @@ +# 什么是vue + + Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 + +# vue的核心功能 + + Vue有两个核心功能： + + 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 + + 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。 + +# 如何创建vue项目 + + 大致上分为两种方法，npm和yarn创建 + +在目标文件夹中打开终端输入以下命令： + + npm init vue 或 yarn create vite --template vue + +弹出的配置项中输入项目名(可以不输，默认为vue-project),接下来的配置项根据需求添加，默认为No不添加 + +![npmvue](./img/npmvue.png) + +配置完以后,依次输入以下命令,运行vue + + cd 项目文件夹路径 //(进入文件夹) + npm install(可缩写为 npm i) 或 yarn //(安装依赖) + npm run dev 或 yarn dev //运行项目 + +以上命令可以互通使用，在yarn创建的项目中使用npm没有任何问题,在npm中同理,但两种方法创建的vue项目略有不同 + +# API 风格 + ​Vue 的组件可以按两种不同的风格书写：选项式 API 和组合API。 + +## 选项式 API (Options API) + + + ​使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。 + + +## 组合式 API (Composition API) +​ + + 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 < script setup > 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，< script setup > 中的导入和顶层变量/函数都能够在模板中直接使用。 + +# 通过CDN使用Vue + +```html + + + + +
{{ name }}
+ + +``` + +# 通过ES模块使用Vue + +```html + +
{{ name }}
+ + +``` +添加导入映射表可以定位导入的Vue + +```html + +
{{ name }}
+ + +``` + + diff --git "a/02\346\235\250\344\275\263\346\226\207/20230330-1\347\217\255Vue\345\237\272\347\241\200.md" "b/02\346\235\250\344\275\263\346\226\207/20230330-1\347\217\255Vue\345\237\272\347\241\200.md" deleted file mode 100644 index 0998cc53c2e7d51b2e12eea5224c7309a2ab3169..0000000000000000000000000000000000000000 --- "a/02\346\235\250\344\275\263\346\226\207/20230330-1\347\217\255Vue\345\237\272\347\241\200.md" +++ /dev/null @@ -1,34 +0,0 @@ -# Vue 基础 - -完整网站: https://cn.vuejs.org/guide/essentials/template-syntax.html - -## 一.文本插值 - -+ 最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即**双大括号**) - -```html -: {{ msg }} - -``` - -## 二.原始HTML - -+ 双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 **v-html 指令**： -```html -

yjw: {{ rawHtml }}

-

yjw:

- -``` - -## 三.Attribute(属性) 绑定 - -+ v-bind 指令: Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。 -```html -
-``` - -+ 简写为冒号: -```html -
- -``` \ No newline at end of file diff --git "a/02\346\235\250\344\275\263\346\226\207/20230330-vue\345\237\272\347\241\200.md" "b/02\346\235\250\344\275\263\346\226\207/20230330-vue\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..734b410189d064f894edddef18a5c625e0b18bf3 --- /dev/null +++ "b/02\346\235\250\344\275\263\346\226\207/20230330-vue\345\237\272\347\241\200.md" @@ -0,0 +1,114 @@ +# 组件、mian.js、index.html之间的关系 +在Vue中，组件是通过mian.js挂载到默认的index.html页面的节点上 + +在组件中编写自己想要的内容 + +默认内容是挂载到Vue自带的App.vue上，可以修改挂载的Vue +## 在mian.js中 +```js +import { createApp } from 'vue'//引入创建APP的方法 +import App from './App.vue'//引入组件 + +createApp(App).mount('#app')//创建一个根据组件的APP,并挂载到id为app的节点上 + +``` +## 在 index.html中 + +```html + +
+ + + +``` +# 组件的构成 +组件主要由三种元素构成,script、template和style +## script +script中写的是后端代码，诸如方法、数据、属性等等 + +在上一个笔记中说到了Vue的API有两种，主要就是在script中编写的 + +使用选项式需要在script中使用export default{},在这之中编写代码 + +使用组合式需要在script后面跟上setup, + +vue中几乎有的用法都有选项式和组合式两种写法 +### 选项式 +```html + +``` +### 组合式 + +```html + + + +``` +最终页面上显示： + +![文本插值](./img/%E6%96%87%E6%9C%AC%E6%8F%92%E5%80%BC.png) + + + + +# Attribute(属性值) 绑定 +​ +双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令： + +```html +
+``` +由于v-bind非常常用，为了简便，也可以简写成':' + +```html +
+``` + +此处我给id绑定的值为'yjw' + +![attribute](./img/attribute.png) + + + + + diff --git "a/02\346\235\250\344\275\263\346\226\207/20230331-1\347\217\255Vue\346\250\241\345\235\227\350\257\255\346\263\225.md" "b/02\346\235\250\344\275\263\346\226\207/20230331-1\347\217\255Vue\346\250\241\345\235\227\350\257\255\346\263\225.md" deleted file mode 100644 index 2b0e6abf2558e84fdc39230f79af8497e60bd83f..0000000000000000000000000000000000000000 --- "a/02\346\235\250\344\275\263\346\226\207/20230331-1\347\217\255Vue\346\250\241\345\235\227\350\257\255\346\263\225.md" +++ /dev/null @@ -1,123 +0,0 @@ -# Vue 模块语法 - -## 一.v-on​: 给元素绑定监听 DOM 事件监听器。 - -+ 缩写：@ - -+ 参数：event (使用对象语法则为可选项) - -+ 修饰符： - - + .stop - 调用 event.stopPropagation()。 - + .prevent - 调用 event.preventDefault()。 - + .capture - 在捕获模式添加事件监听器。 - + .self - 只有事件从元素本身发出才触发处理函数。 - + .{keyAlias} - 只在某些按键下触发处理函数。 - + .once - 最多触发一次处理函数。 - + .left - 只在鼠标左键事件触发处理函数。 - + .right - 只在鼠标右键事件触发处理函数。 - + .middle - 只在鼠标中键事件触发处理函数。 - + .passive - 通过 { passive: true } 附加一个 DOM 事件。 -```html - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - -``` - - -## 二.指令 Directives - -+ 指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。 - - -### 内置指令 -+ 完整网站: https://cn.vuejs.org/api/built-in-directives.html - -+ 1. v-text:更新元素的文本内容。 -```html - - -{{msg}} - -``` - -+ 2. v-html​: 更新元素的 innerHTML。 -```html -
- -``` - -+ 3. v-show​: 基于表达式值的真假性，来改变元素的可见性。 - -+ 4. v-if​: 基于表达式值的真假性，来条件性地渲染元素或者模板片段。 - -+ 5. v-else​: 表示 v-if 或 v-if / v-else-if 链式调用的“else 块” -```html -
- Now you see me -
-
- Now you don't -
- -``` - - -+ 6. v-else-if​: 表示 v-if 的“else if 块”。可以进行链式调用。 -```html -
- A -
-
- B -
-
- C -
-
- Not A/B/C -
- -``` - -+ 7. v-for​: 基于原始数据多次渲染元素或模板块。 -```html -
- {{ item.text }} -
- -``` \ No newline at end of file diff --git "a/02\346\235\250\344\275\263\346\226\207/20230331-Vue\346\250\241\345\235\227\350\257\255\346\263\225.md" "b/02\346\235\250\344\275\263\346\226\207/20230331-Vue\346\250\241\345\235\227\350\257\255\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..52a6ca3d29dbf4f7aef5c5ae41285ecc4ebe42cc --- /dev/null +++ "b/02\346\235\250\344\275\263\346\226\207/20230331-Vue\346\250\241\345\235\227\350\257\255\346\263\225.md" @@ -0,0 +1,245 @@ +# 布尔型 Attribute +​ +布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。 + +```html + + +``` + +当 is 为真值或一个空字符串 (即 < button disabled="">) 时，disabled生效，按钮不可用，而当其为其他假值时 ，disabled被忽略，按钮可用 + +![disabled](./img/disabled.png) + +# 动态绑定多个值 + +将要绑定的Attribute，写在一个对象里，然后使用v-bind直接绑定这个对象，即可动态绑定多个值 + +## 定义对象的写法 + +### 选项式： +```html + +``` +### 组合式： + +```html + +``` +### 效果图： +![shuxing](./img/shuxing.png) + +# 使用 JavaScript 表达式 + +​Vue 在所有的数据绑定中都支持完整的 JavaScript 表达式(包括有返回值的函数方法调用)： + +```vue + + + +``` +效果图： + +![三元表达式](./img/%E4%B8%89%E5%85%83%E8%A1%A8%E8%BE%BE%E5%BC%8F.png) + + + +这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。 + +在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上： + + 在文本插值中 (双大括号) + + 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中 + +## 仅支持表达式​ + +每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。 + +# 指令 Directives（部分） + +指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令 + +## v-text +更新元素的文本内容。 +```vue + +``` + +## v-html + +在vue中可以使用v-html来给元素绑定一个原始的HTML + +v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。 + +```html + + + +``` +效果图： + +![v-html](./img/v-html.png) + +![v-html](./img/v-html2.png) + +## v-show + +基于表达式值的真假性，来改变元素的可见性。 + +```vue + +
+
+``` +当is为false时,前端代码显示为 + +![v-show](./img/v-show.png) + +## v-if、v-else、v-else-if + +v-if 和v-show有点像 + +基于表达式值的真假性，来条件性地渲染元素或者模板片段。 +```vue +
+
+``` +当is为false时,前端代码显示为 + +![v-if](./img/v-if.png) + +当is为true时，与v-show并无太大区别 + +v-else和v-else-if 上一个兄弟元素必须有 v-if 或 v-else-if。 + +v-else 无需传入表达式,根据上一个兄弟元素的表达式真假来渲染元素，与其相反 + +v-else-if 需要表达式，在上一个兄弟元素的表达式为假时执行，再基于自己表达式的真假，渲染元素 + +## 参数 Arguments​ + +某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute + +例： + +```html + + + +``` + +### 动态参数 +指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内 + +这里的 abc 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。 +```vue + + + +``` +## 动态参数语法的限制 +​ +动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号 + +当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写 + +这会导致如果你参数名称中有大写字母，那这一段代码就不会执行，单文件组件内的模板不受此限制 diff --git "a/02\346\235\250\344\275\263\346\226\207/20230403-1\347\217\255Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" "b/02\346\235\250\344\275\263\346\226\207/20230403-1\347\217\255Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" deleted file mode 100644 index f133e8ea13d600866c49a0765d22f042ff436aa3..0000000000000000000000000000000000000000 --- "a/02\346\235\250\344\275\263\346\226\207/20230403-1\347\217\255Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" +++ /dev/null @@ -1,126 +0,0 @@ -# Vue 响应式基础 - -完整相关信息网：https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html - -## 一.data函数 - -+ data 选项: 声明组件的响应式状态 - -+ data的值应返回一个**对象的函数** - -+ 将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 **this**) 上。 - -+ export default: 向外暴露的成员，可以使用任意变量来接收, **data函数放在 export default{}中** - -```js -export default { - data() { - return { - count: 0, - text: '', - awesome: true - } - }, -} -``` - -# -## 二. methods对象 - -+ methods是一个**包含所有方法**的**对象** - -+ Vue **自动**为 methods 中的方法**绑定了永远指向组件实例的 this** - -+ 在**methods中不使用箭头函数**，因为箭头函数没有自己的 this 上下文。 -```js -export default { - data() { - return { - count: 0, - text: '', - awesome: true - } - }, -} - //methods 选项:是一个包含所有方法的对象 - methods: { - //设置按钮的功能，增加 - incr() { - this.count++ - }, - } -``` - -# -## 三.条件渲染:v-if,v-else - -+ v-if :根据条件地渲染元素，依据true和falas来判断是否将 DOM 移除 - -+ v-else: 若v-if移除了DOM节点，v-else就会显示它管理的DOM节点 -```html -

yes

- -

no

-``` - -# -## 四.代码 -```html - - - - -``` diff --git "a/02\346\235\250\344\275\263\346\226\207/20230403-Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" "b/02\346\235\250\344\275\263\346\226\207/20230403-Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..8fab85790a0a621b72705bea38e0020bb851d2ba --- /dev/null +++ "b/02\346\235\250\344\275\263\346\226\207/20230403-Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200.md" @@ -0,0 +1,109 @@ +# 修饰符 Modifiers +​ +修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault() + +# 声明响应式状态 + +响应式状态初步理解就是随着我们的数据的变动而变动，个人感觉上有点像热重载 + +直接向组件实例添加的新属性，无法触发响应式更新 + +## 选项式​ + +选用选项式 API 时，会用 data 选项来声明组件的响应式状态。 + +此选项的值应为返回一个对象的函数。 + +Vue 将在创建新组件实例的时候调用此函数， + +并将函数返回的对象用响应式系统进行包装。 + +此对象的所有顶层属性都会被代理到组件实例 + +(即方法和生命周期钩子中的 this) 上。 + +代码： +```vue + + + +``` +效果图： +![响应式](./img/%E5%93%8D%E5%BA%94%E5%BC%8F.png) + +## 组合式 + +我们可以使用 reactive() 函数创建一个响应式对象或数组： + +```vue + + + +``` +### ref() + +ref() 方法来允许我们创建可以使用任何值类型的响应式 ref + +```js +import { ref } from 'vue' + +const count = ref(0) +``` + +ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象 + +当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。 + +```vue + + + +``` + + + diff --git "a/02\346\235\250\344\275\263\346\226\207/20230404-1\347\217\255Vue\350\256\241\347\256\227\345\261\236\346\200\247\357\274\214\347\261\273\345\222\214\346\240\267\345\274\217\347\232\204\347\273\221\345\256\232.md" "b/02\346\235\250\344\275\263\346\226\207/20230404-1\347\217\255Vue\350\256\241\347\256\227\345\261\236\346\200\247\357\274\214\347\261\273\345\222\214\346\240\267\345\274\217\347\232\204\347\273\221\345\256\232.md" deleted file mode 100644 index b68b2fa085e331c0f16325db7f23e3b522bf5898..0000000000000000000000000000000000000000 --- "a/02\346\235\250\344\275\263\346\226\207/20230404-1\347\217\255Vue\350\256\241\347\256\227\345\261\236\346\200\247\357\274\214\347\261\273\345\222\214\346\240\267\345\274\217\347\232\204\347\273\221\345\256\232.md" +++ /dev/null @@ -1,161 +0,0 @@ -# Vue 计算属性，类和样式的绑定 - -## 一.修改端口号 - -### 方法一: -+ 在Vue项目中，找到package.json 文件 - -+ 在文件的 dev 中添加对应代码： --port 4000, -```js - "dev": "vite --port 4000", -``` - -### 方法二: - -+ 在Vue项目中，找到vite.config.js文件 - -+ 在文件的export default 中添加对应代码 - -+ 只修改端口号 -```js - server:{ - port:'3333', - // host:'127.0.0.1' 修改localhost - } -``` - - -+ 全部修改 -```js - server:{ - port:'3333', - host:'127.0.0.1' //修改localhost - } -``` - - -+ 文件的完整代码 -```js -import { fileURLToPath, URL } from 'node:url' - -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [vue()], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - }, - //修改端口 - server:{ - port:'3333', - // host:'127.0.0.1' 修改localhost - } -}) -``` - -# -## 二. computed : 计算属性 - -+ 计算属性是来描述依赖响应式状态的复杂逻辑 - -### computed(计算属性) 与 methods(对象) 的区别： - -+ 缓存区别 - - + computed 计算属性的值会基于其响应式依赖被缓存，只要响应式依赖不更新修改，计算属性就不需要重新计算和执行 getter 函数，会立即返回先前的结果 - - + methods 方法调用总是会在重渲染发生时再次执行函数。 - -### 代码 -```html - - - -``` - - -# -## 三.类(Class)和样式(style)的绑定 - -### 绑定对象 -+ 类的绑定:在对象中写多个字段来操作多个 class，class是否存在，取决于值是true还是false - -+ 样式的绑定:绑定的样式对象值，对应的是 HTML 元素的 style 属性 - -### 绑定数组 -+ 类的绑定:绑定一个数组来渲染多个 CSS class - -+ 样式的绑定:绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上 - -### 代码: -```html - - - - - -``` - diff --git "a/02\346\235\250\344\275\263\346\226\207/20230404-Vue\350\256\241\347\256\227\345\261\236\346\200\247\357\274\214\347\261\273\345\222\214\346\240\267\345\274\217\347\232\204\347\273\221\345\256\232.md" "b/02\346\235\250\344\275\263\346\226\207/20230404-Vue\350\256\241\347\256\227\345\261\236\346\200\247\357\274\214\347\261\273\345\222\214\346\240\267\345\274\217\347\232\204\347\273\221\345\256\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..337b124a98f78c43bb032def03f8f98d3e46a873 --- /dev/null +++ "b/02\346\235\250\344\275\263\346\226\207/20230404-Vue\350\256\241\347\256\227\345\261\236\346\200\247\357\274\214\347\261\273\345\222\214\346\240\267\345\274\217\347\232\204\347\273\221\345\256\232.md" @@ -0,0 +1,258 @@ +# 计算属性（computed） + +计算属性用来描述依赖响应式状态的复杂逻辑 +## 选项式 + +```vue + + +``` +## 组合式 +```vue + + + +``` + +## 计算属性与方法的区别 + +两者的效果大致相同， + +但计算属性值会基于其响应式依赖被缓存 + +方法调用总是会在重渲染发生时再次执行函数 + +计算属性可以让程序运行的更加快 + +## 可写计算属性 + +计算属性默认是只读的。 + +当你尝试修改一个计算属性时，你会收到一个运行时警告。 + +只在某些特殊场景中你可能才需要用到“可写”的属性， + +你可以通过同时提供 getter 和 setter 来创建 + +### 选项式 +```vue + + +``` + +### 组合式 +```vue + + + + +``` + +# 类和样式绑定 +## 绑定 HTML class +### 绑定对象 + +我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class + +```vue +// abc虽然不加引号，但他是string类型 +
+``` + +也可以绑定多个，根据属性值的真假，渲染在元素上 + +```vue + + +``` +no是假值，所以没有出现在元素上 + +![class](./img/class.png) + +也可以直接绑定一个对象,能实现相同的效果 + +```vue + + +``` + +也可以绑定计算属性 + +```vue + + + +``` +还能绑定数组，并可以在数组中使用三元表达式 + +```vue + + + +``` + +![class2](./img/class2.png) + +## 绑定内联样式 + +与绑定class差不多，需要加点语法 + +```vue + + +``` + +![style](./img/style.png) + + diff --git "a/02\346\235\250\344\275\263\346\226\207/20230406-1\347\217\255\346\235\241\344\273\266\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/02\346\235\250\344\275\263\346\226\207/20230406-1\347\217\255\346\235\241\344\273\266\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223.md" deleted file mode 100644 index b1a95d016bd4d22a3beb113938d992970912cb6b..0000000000000000000000000000000000000000 --- "a/02\346\235\250\344\275\263\346\226\207/20230406-1\347\217\255\346\235\241\344\273\266\345\222\214\345\210\227\350\241\250\346\270\262\346\237\223.md" +++ /dev/null @@ -1,120 +0,0 @@ -# 条件和列表渲染 - -## 一.条件渲染 - -详细地址: https://cn.vuejs.org/guide/essentials/conditional.html - -### v-if、v-else - -+ v-if :用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 - -+ v-else ：当 v-if的值为假值时，这块内容会被渲染。 - -+ v-else 必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。 - -### v-else-if -+ 可以连续多次重复使用 - -+ 使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。 - - -### v-show - -+ 用法与 v-if 一样 - -+ v-show 会在 DOM 渲染中保留该元素； - -+ v-show 仅切换了该元素上名为 display 的 CSS 属性。 - -+ v-show 不支持在