JavaWeb，Vue的学习（上）

概述

Vue的两个核心功能

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

Vite+Vue3项目的目录结构

• public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
• src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
  1. assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
  2. components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。
  3. layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
  4. pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
  5. plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。
  6. router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
  7. store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。
  8. utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。
• vite.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。
• package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开发、构建和启动本地服务器等操作。
• Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相关插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。

Vite+Vue3项目组件

• 一个页面作为整体,是由多个部分组成的,每个部分在这里就可以理解为一个组件
• 每个.vue文件就可以理解为一个组件,多个.vue文件可以构成一个整体页面
• 组件化给我们带来的另一个好处就是组件的复用和维护非常的方便

关于.vue文件

• 传统的页面有.html文件.css文件和.js文件三个文件组成(多文件组件)
• vue将这文件合并成一个.vue文件(Single-File Component，简称 SFC,单文件组件)
• .vue文件对js/css/html统一封装,这是VUE中的概念 该文件由三个部分组成

  文本渲染

  为了渲染双标中的文本,我们也可以选择使用v-text和v-html命令

  • v-*** 这种写法的方式使用的是vue的命令
  • v-***的命令必须依赖元素,并且要写在元素的开始标签中
  • v-***指令支持ES6中的字符串模板
  • 插值表达式中支持javascript的运算表达式
  • 插值表达式中也支持函数的调用
  • v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本
  • v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本

  属性渲染

  想要渲染一个元素的 attribute，使用 v-bind指令

  • 插值表达式不能直接放在标签的属性中,要渲染元素的属性使用v-bind
  • v-bind可以用于渲染任何元素的属性,语法为 v-bind:属性名='数据名', 可以简写为 :属性名='数据名'

  事件渲染

  使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。

  • 用法：v-on:click="handler" 或简写为 @click="handler"
  • vue中的事件名=原生事件名去掉on 前缀 如:onClick --> click
  • handler的值可以是方法事件处理器,也可以是内联事件处理器
  • 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
    • .once：只触发一次事件
    • .prevent：阻止默认事件
    • .stop：阻止事件冒泡。
    • .capture：使用事件捕获模式而不是冒泡模式。
    • .self：只在事件发送者自身触发时才触发事件。

  条件渲染

  v-if：

  • v-if='表达式'只会在指令的表达式返回真值（true）时才被渲染
  • 也可以使用 v-else 为 v-if 添加一个“else 区块”。
  • 一个 v-else 元素必须跟在一个 v-if 元素后面，否则它将不会被识别。

  v-show：

  • 另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：
  • 不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
  • v-show 不支持在