学习vue.js心得

最新推荐文章于 2024-11-10 14:10:27 发布

2301_77471920

最新推荐文章于 2024-11-10 14:10:27 发布

阅读量764

点赞数 15

文章标签：学习 vue.js 前端

本文链接：https://blog.csdn.net/2301_77471920/article/details/135219426

版权

在创建项目时，可以选择手动配置或使用预设配置。手动配置可以根据自己的需求选择需要的特性和插件，而预设配置则是 Vue CLI 提供的一些常用配置方案。
理解响应式数据：Vue.js 最重要的特点之一就是响应式数据。当你修改了数据，视图会自动更新。这是通过 Vue.js 的双向数据绑定实现的。因此，理解响应式数据对于使用 Vue.js 至关重要。
组件化思想：Vue.js 是一个组件化的框架，可以将一个页面拆分成多个组件，每个组件都有自己的数据和方法，这样可以提高代码的复用性和可维护性。
生命周期：Vue.js 组件生命周期包括创建、挂载、更新和销毁四个阶段。理解生命周期可以帮助我们更好地掌握组件的运行机制，从而更好地进行调试和优化。
事件处理：Vue.js 的事件处理非常灵活。可以通过 v-on 指令监听 DOM 事件或组件事件，并在事件触发时执行指定的方法。同时，Vue.js 还提供了自定义事件和事件总线等功能，方便我们进行跨组件通信。
模板语法：Vue.js 的模板语法非常简洁易懂，使用了类似于 HTML 的模板语法，同时也支持一些指令和表达式。理解模板语法可以帮助我们更方便地编写代码。
Vue CLI 是一个用于快速构建 Vue.js 项目的命令行工具，它包含三个主要工具：@vue/cli、@vue/cli-service 和 @vue/cli-plugin-*。
@vue/cli：提供了一个交互式的命令行界面，可以帮助我们创建和管理 Vue.js 项目。
@vue/cli-service：是一个开发服务器和构建工具，可以处理开发时的热重载以及生产环境下的打包构建等任务。
@vue/cli-plugin-*：是一系列插件，可以扩展 Vue CLI 的功能，例如添加路由、状态管理等功能。
在使用 Vue CLI 构建项目之前，我们需要先配置好 Vue 脚手架的环境。具体步骤如下：
安装 Node.js：Vue CLI 基于 Node.js，所以需要先安装 Node.js。
安装 Vue CLI：可以使用 npm 或 yarn 安装。
Copy Code
# 使用 npm
npm install -g @vue/cli

# 使用 yarn
yarn global add @vue/cli
创建项目：使用 vue create 命令创建一个新的 Vue.js 项目。
Copy Code
vue create my-project
在创建项目时，可以选择手动配置或使用预设配置。手动配置可以根据自己的需求选择需要的特性和插件，而预设配置则是 Vue CLI 提供的一些常用配置方案。
创建完成后，可以使用以下命令启动开发服务器：
Copy Code
cd my-project
npm run serve
使用 Vue CLI 快速构建项目的心得：
Vue CLI 提供了很多预设配置，可以快速搭建一个基础的 Vue.js 项目，并且可以根据项目需求添加需要的插件和特性。
Vue CLI 内置了 webpack 和 Babel，可以很好地处理打包和编译。
Vue CLI 的插件机制非常灵活，可以根据项目需要进行功能扩展。例如，可以使用插件添加路由、状态管理等功能。

data：数据对象，用于定义实例的数据。这里可以包含需要响应式更新的数据。
methods：方法，用于定义实例的方法，可以在模板中调用这些方法来响应用户的交互。
computed：计算属性，用于根据已有的数据计算出新的数据，具有缓存机制，只有依赖的数据发生变化时才会重新计算。
watch：监听属性，用于观察和响应 Vue 实例上的数据变动，在数据变化时执行相应的操作。
filters：过滤器，用于在模板中对数据进行过滤处理，常用于格式化文本、日期等操作。
directives：指令，用于扩展 HTML 的行为，例如 v-if、v-show、v-bind 等，可以在 DOM 渲染时添加特殊行为。
computed：计算属性，用于根据已有的数据计算出新的数据，具有缓存机制，只有依赖的数据发生变化时才会重新计算。
filters：过滤器，用于在模板中对数据进行过滤处理，常用于格式化文本、日期等操作。
created/destryed：生命周期钩子，用于在 Vue 实例创建和销毁时执行相应的逻辑。