Vue.js知识点不全集

如果众神有意

已于 2023-12-26 11:22:32 修改

阅读量894

点赞数 17

文章标签： vue.js 前端 javascript

于 2023-12-26 10:30:50 首次发布

本文链接：https://blog.csdn.net/m0_74213787/article/details/135209197

版权

一，理解Vue.js是什么

Vue.js是一种流行的JavaScript前端框架，用于构建交互式的Web界面。它以响应式的方式处理数据和视图的关系，使得开发者可以轻松地构建单页面应用（SPA）和复杂的用户界面。

二，Vue基础内容

1，Vue的构造

1.1Vue的构造选项

el：指定Vue实例所管理的根元素。可以是一个CSS选择器字符串，或者是一个DOM元素。例如，el: '#app'将Vue实例挂载到id为"app"的元素上。
data：定义Vue实例的数据。可以是一个对象或一个函数。当使用对象时，每个属性都会成为响应式的，当数据发生变化时，对应的视图会自动更新。当使用函数时，可以返回一个对象，实现动态数据初始化。
computed：定义计算属性。计算属性是基于已有的数据衍生出来的属性，具有缓存和依赖追踪的特性。可以使用计算属性来处理复杂的逻辑和数据转换。
methods：定义Vue实例的方法。可以在模板中调用这些方法，并处理用户交互或其他事件。方法中的this指向Vue实例本身。
watch：观察数据的变化。可以监听某个数据的变化，并在变化时执行相应的操作。例如，可以监听一个输入框的值的变化，并在变化时发送请求或执行其他操作。
template：定义Vue实例的模板。可以使用Vue提供的模板语法，将数据和逻辑绑定到HTML文档中。
mounted：Vue实例挂载到DOM后执行的钩子函数。可以在这个钩子函数中进行一些初始化的操作，如发送请求、绑定事件等。
created：Vue实例创建后执行的钩子函数。可以在这个钩子函数中进行一些初始化的操作，如设置初始数据、订阅事件等。

1.2常用指令

1.2.1 v-text

v-text用于将数据绑定到元素的文本内容上。使用v-text指令时，可以将一个表达式作为其值，然后Vue会将该表达式的结果更新到元素的文本内容中。即使是Html代码也会被当做普通字符串处理，不会被解析。

1.2.2 v-html

v-html用于将数据绑定到元素的 HTML 内容上。使用 v-html 指令时，可以将一个表达式作为其值，然后Vue会将该表达式的结果更新到元素的内部 HTML 内容中

1.2.3 v-cloak

v-cloak用于在Vue实例加载之前隐藏模板中的未编译内容。这个指令通常与CSS配合使用，以避免在页面加载时出现未编译的{{}}插值表达式。

1.2.4 v-bind

v-bind用于动态地绑定一个或多个属性的指令。通过v-bind，可以将元素的属性和组件的属性与Vue实例中的数据进行绑定，从而在数据发生变化时更新对应的属性。v-bind可以省略v-bind,简写为一个冒号“ : ”

1.2.5 v-on

v-on用于绑定事件监听器的指令。通过v-on，可以在模板中监听 DOM 事件，并在事件触发时执行相应的方法或表达式。使用v-on指令时，也可以简写为@符号，后面跟着要监听的事件名。

v-on指令提供了一些事件修饰符

.stop阻止事件冒泡。当事件触发时，不再向父元素传播。
.prevent阻止事件的默认行为。例如，在表单提交时阻止页面的刷新。
.capture添加事件捕获。即在捕获阶段处理事件，而不是冒泡阶段。
.self只有当事件是从触发元素自身触发时才触发事件处理函数。如果事件是从内部元素冒泡上来的，则不触发事件处理函数。
.once事件将只会触发一次。
键盘事件修饰符
- .enter - 监听回车键
- .tab - 监听 Tab 键
- .delete - 监听删除键
- .esc - 监听 ESC 键
- .space - 监听空格键
- .up - 监听上方向键
- .down - 监听下方向键
- .left - 监听左方向键
- .right - 监听右方向键

1.3 v-model数据双向绑定

1.v-model用于在表单元素和组件上创建双向数据绑定。在表单元素上使用 v-model 指令时，它会监听用户输入事件，并将输入的值与 Vue 实例中的数据进行双向绑定。

2.v-model修饰符

.lazy：默认情况下，v-model 在每次输入事件触发时同步数据，使用 .lazy 修饰符可以改为在失去焦点或按下回车键时才同步数据。

.number：将用户的输入自动转为数值类型。

.trim：可以除去输入内容左右两边的空格。

1.4内置指令

1.列表渲染指令v-for

v-for用于渲染列表数据。它可以遍历数组或对象，并根据数据生成相应的 DOM 元素。

2.条件渲染指令v-if ，v-show

v-if用于根据条件来决定是否渲染某个元素或组件。

当showMessage为ture时出现Hello，World！

v-show用于根据条件来显示或隐藏元素。

v-if和v-show都可以用来动态的控制DOM元素的显示和隐藏，但是，两者是有区别的。v-if是“真正”的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if也是“惰性”的，在条件为假时什么也不做，直到事件变为真时才开始渲染，v-show不论初始条件是什么，元素总会被渲染，只是基于css的切换

1.5 自定义指令

自定义指令允许你在 DOM 元素上添加特定行为和交互

三，项目化

1.项目化的优点

更好的组织和管理：通过将开发过程分解为多个阶段和任务，可以更好地组织和管理开发工作。项目化的方法可以帮助团队成员更清晰地了解自己的职责和任务，并使整个开发过程更加有序和高效。
更高的可重复性和可扩展性：项目化的方法可以帮助团队创建可重复使用的模块和组件，从而提高代码的可重用性和可扩展性。这些模块和组件可以在不同的项目中共享和重复使用，从而节省时间和成本。
更好的版本控制和协作：在项目化的方法下，开发工作会被分解为多个版本和迭代，每个版本都会有明确定义的功能和目标。这使得团队成员可以更好地掌握开发进度，并能够更好地进行版本控制和协作。
更好的质量控制：项目化的方法可以帮助团队更好地管理和控制代码质量。通过定义明确的标准和测试流程，可以帮助团队发现和解决问题，从而提高代码的质量。
更好的时间管理：通过将开发过程分解为多个阶段和任务，可以更好地管理开发时间和资源。项目化的方法可以帮助团队更好地规划和分配开发任务，并能够更好地掌握开发进度。

2.快速构建项目

Vue CLI（Command Line Interface）是一个官方提供的基于命令行的 Vue.js 开发工具，它提供了一整套现代化的前端开发工具和流程，包括项目初始化、开发服务器、构建工具、插件等。使用 Vue CLI 可以快速构建出高质量、可扩展和易维护的 Vue 应用程序。

2.1 Vue CLI 脚手架的安装

在Vue CLI 终端中输入 npm install -g @vue/cli 安装完后可以输入vue -V来查看版本

2.2 Vue create 创建项目

输入Vue create 项目名创建项目，项目创后打开即可

3.项目构成

根目录（Root）：
- public：包含静态资源文件，如HTML文件、favicon.ico等。
- src：包含所有的源代码和开发文件。
- tests：包含单元测试文件。
源代码目录（Src）：
- assets：存放项目的静态资源，如图片、样式表等。
- components：存放可复用的Vue组件。
- views：存放页面级别的Vue组件。
- router：存放Vue Router相关的配置和路由定义。
- store：存放Vuex相关的状态管理配置和模块。
- services：存放与后端API通信的服务文件。
- utils：存放通用的工具函数或方法。
- plugins：存放Vue插件。
- main.js：项目的入口文件，包含Vue实例的创建和主要配置。
- App.vue：应用程序的根组件。
组件目录（Components）：
- common：存放通用的组件。
- layout：存放布局组件。
- ui：存放UI组件。
页面目录（Views）：
- home：首页相关的页面组件。
- about：关于页面相关的组件。
- ...：其他页面相关的组件。