Vue心得体会

       到大二，在Vue上课中，我深刻体会到了Vue框架的优秀性能和方便易用的特点。通过实际操作，我学习了Vue的基本语法、组件化开发、路由、状态管理等方面的知识。

在项目实战中，我更深入地了解了如何利用Vue框架构建完整的应用程序，从前端的设计、开发到后端的数据处理和交互，都得到了充分的实践锻炼。同时，我也发现了一些Vue框架的局限性和需要注意的地方，例如在组件的嵌套使用中需要考虑到数据传递和维护的问题。以下就是我对Vue的总结

一、Vue的简介

1.Vue是什么

关于Vue简介，百度百科给出的解释是：Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    Vue.js 是一个提供了 MVVM 风格双向数据绑定的 Javascript 库（无依赖别的js库，直接引入一个js文件就可以使用，跟jquery差不多），专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

以下就是在HTML中引入Vue.js的方法 去Vue官网，在主页面找到文档 点开

  或者在Vue官网中直接下载vue.js。然后在HTML文档中写下如

 <script src="vue.js"></script>

2.Vue的渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

3.vue特点

模板引擎大概是 Vue 里最主要、又最核心的一个能力。前面也讲到，在模板引擎还没有出现的时候，前端需要手动更新前端页面的内容，需要维护一大堆的 HTML 和变量拼接的动态内容，虽然 jQuery 的出现提升了 DOM 元素的操作性，但依然难以避免代码的可读性、可维护性上存在的一些问题。

以前我们更新页面的内容，大概的流程是：监听操作 -> 获取数据变量 -> 使用数据拼接成 HTML 模板 -> 将 HTML 内容塞到页面对应的地方 -> 将 HTML 片段内需要监听的点击等事件进行绑定。

这么复杂的逻辑，如今使用 Vue，就可以方便地在模板里用插值表达式{{}}、v-bind绑定变量来展示，同时配合v-if、v-for这些内置指令，就可以很方便地写出可读性和维护性都很不错的代码了。什么是插值表达式？什么是指令？这些我们会放在后面的章节里介绍。这里我们主要来介绍下 Vue 框架做了什么事情，这里先讲一下数据绑定。

在 Vue 里渲染一块内容，一般会有以下流程：
(1) 解析语法生成 AST。
(2) 根据 AST 结果，完成 data 数据初始化。
(3) 根据 AST 结果和 data 数据绑定情况，生成虚拟 DOM。
(4) 将虚拟 DOM 生成真正的 DOM 插入到页面中，此时页面会被渲染。

 二、Vue CLI 脚手架

使用 Vue 框架，脚手架一般会优先选择官方提供的 Vue CLI，Vue CLI 其实也是基于 Webpack 封装的便捷脚手架。

有了脚手架，我们可以通过简单的命令就能快速生成 Demo 代码、构建本地测试环境、编译和打包代码、发布到现网等等功能。

1.node的安装

检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

如果没有安装node 请按照以下步骤

下载 | Node.js 中文网 (nodejs.cn)  进入官网下载node最新版本

调出终端控制台 输入 node -v 检查是否安装成功

2.安装脚手架

概述：npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题。

调出终端控制台输入如下命令

npm install -g @vue/cli

如果安装不成功 可能是网络不匹配

需要输入以下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行命令成功后 再重新执行 npm install -g @vue/cli 命令

使用命令行查看npm是否安装成功

出现以上图片的信息，说明就是安装成功了。

2、使用场景需求：

        2.1、从npm服务器下载别人编写的第三方包到本地使用。

        2.2、从npm服务器下载并安装别人编写的命令程序到本地使用。

        2.3、将自己编写的包或命令行程序上传到npm服务器供别人使用。

3、npm常用命令行：

           npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

3.使用Vue Cli快速构建项目

1、vue create 命令创建项目 

// helloworld 是项目名，可自行定义          

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

 此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示

大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword        npm run serve

接下来，在浏览器输入：http://localhost:8080/  地址，即可看到如下页面

 这样使用Vue Cli快速构建项目就成功了。

三、Vue常用组件的使用

1 注册方式

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。Vue 中有两种组件的注册类型：全局注册和局部注册。

全局注册

全局注册可以通过Vue.component()的方式进行，该方法第一个参数要传入组件的名称，第二个参数传入该组件的选项：

局部注册

局部注册可通过在实例中的components选项进行配置：

而以这种方式使用组件的时候，则需要在组件里通过name选项进行命名：

 这种方式定义的组件，如果也进行了全局注册，其命名会以全局注册的名字为准，也就是全局注册的命名优先级更高。

2 单文件组件

一个组件是一些逻辑和功能完整的代码片段组成的，同时也包括了 HTML、CSS 和 Javascript 的代码。在 Vue 里，我们常常使用单文件组件，使用.vue 后缀命名的文件，一般也包括这三部分：

3  父子组件通信

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。除了父组件给子组件传递数据之外，有时候我们也需要在子组件中和父级组件进行沟通。

在 Vue 中，父级组件可以像处理原生的 DOM 事件一样通过v-on监听子组件实例的任意事件:

4 表单绑定 v-model

v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。实际上v-model是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

使用 Tips

当v-model使用在多选或者选择框上时，需要注意的是：
(1) 多选时，v-model会绑定到一个数组。
(2) 对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串。
(3) 复选框可以使用true-value和false-value来设置绑定的值。

四、总结