Vue.js学习心得

目录

 一、Vue.js概述

（一）什么是vue.js？

（二）vue.js的特性：

三、Vue.js的安装

​编辑​编辑

四.Vue.js的环境搭建

 五.Vue CLI脚手架

安装#

（一）Node 版本要求

 （二） 实现第一个实例

 六.总结：

---

 

 一、Vue.js概述

（一）什么是vue.js？

    Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它被设计为易于使用和理解，并且具有很高的灵活性和可扩展性。Vue.js采用了组件化的开发方式，允许开发者将应用程序拆分成多个可重用的组件，从而提高了代码的可维护性和复用性。

（二）vue.js的特性：

    1.简洁易用：Vue.js的API设计简单易懂，学习曲线相对较低，使开发者能够快速上手。

    2.高性能：Vue.js采用了虚拟DOM的机制，可以高效地更新和渲染视图，提供了优秀的性能表   现。

    3.可扩展性：Vue.js允许开发者根据需求选择使用其核心库还是配套的插件，从而实现灵活的扩展。

    4.生态系统丰富：Vue.js拥有庞大的社区支持和活跃的开发者社区，提供了许多有用的插件和工具，方便开发者构建复杂的应用程序。

     Vue.js适用于各种规模的项目，从简单的小型应用到复杂的大型单页应用（SPA）都可以使用Vue.js进行开发。它在开发社区中得到了广泛的支持和认可，并被许多企业和开发者所采用

 

三、Vue.js的安装

安装使用 vue 可以采用以下三种方式
1.下载独立版本“直接引入” Vue.js在HTML页面中使用 Vue.js 时，通过 <script> 标签可以“直接引入”Vue.js 核心文件，代码如下所示:<script src="vue.js"></script>上述代码表示引入当前路径下的 Vue.is 文件，Vues 相当于JavaScript 中的一个库。

2.不下载 .js 文件直接使用 CDN 引入 Vue.js
推荐一个由 BootStrap 中文网运作的免费开源的 CDN 加速服务，其地址为 http://www.bootcdn.cn/，在HTML 页面中即可完成 Vue.js 的引入，代码如下所示:<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vuejs"></script>

3.使用 npm 安装 Vue.js 架(前期不推荐此方式)
若要使用 npm，则需要先安装 Nodejs ，然后使用 npm (Node Package Manager)包理工具安装。执行命令:npm install vue 即可安装Vue.is。

vue.js可通过官网安装：

Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/

四.Vue.js的环境搭建

前端使用 Vue 框架有两种方式：
(1) 简单的页面，可以通过<script>引入 CDN 资源来使用。
(2) 从项目可维护和拓展性上看，搭建本地调试环境来构建 Vue 项目会更合适。

 五.Vue CLI脚手架

安装#

（一）Node 版本要求

1.  Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可通过官网安装：安装 | Vue CLI (vuejs.org)https://cli.vuejs.org/zh/guide/installation.html

 

 2.  可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

 （二） 实现第一个实例

 六.总结：

Vue.js是一种用于构建用户界面的JavaScript框架，它采用了组件化的开发方式，使得开发者可以更加高效地管理和复用代码。以下是我对Vue.js学习的总结：

1. Vue实例：Vue.js的核心是Vue实例，通过创建一个Vue实例，我们可以将数据、方法和生命周期钩子等组织在一起，并与DOM进行绑定。

2. 模板语法：Vue.js采用了类似HTML的模板语法，通过在模板中使用指令和插值表达式，可以将数据动态地渲染到页面上。

3. 数据绑定：Vue.js提供了双向数据绑定的能力，通过v-model指令可以将表单元素与数据属性进行绑定，实现数据的自动同步。

4. 组件化开发：Vue.js将用户界面拆分为多个独立的组件，每个组件都有自己的模板、数据和方法。这样可以使得代码更加模块化和可复用。

5. 生命周期钩子：Vue.js提供了一些生命周期钩子函数，可以在组件的不同阶段执行相应的操作，例如在组件创建前、创建后、更新前、更新后等。

6. 路由管理：Vue.js可以通过Vue Router实现前端路由，实现单页应用的跳转和页面切换。

7. 状态管理：Vue.js可以通过Vuex实现全局状态管理，方便不同组件之间共享数据和进行状态管理。

8. 过滤器和指令：Vue.js提供了过滤器和指令的功能，可以对数据进行格式化和操作，增强了页面的灵活性和功能性。

总的来说，Vue.js是一种简洁、高效的前端开发框架，通过学习和掌握Vue.js，可以快速构建出高质量的用户界面。但需要不断实践和深入学习，才能更好地掌握其各种功能和应用。