Vue.js开发心得体会

Vue.js是什么?

Vue.js的官方文档（https：//cn.Vue.js.org)中是这样介绍它的：简单小巧的核心、渐进式技术栈，足以应付任何规模的应用。

简单小巧是指Vue.js体量轻，压销后大小仅有33KB，而渐进式，是指程序员可以一步一步、有阶段性地使用Vue.js，无须项目一开始就使用所有的东西。使用Vue.js可以让Web开发更加简单，同时有别于传统的前端开发模式，它提供了时下Web开发中常见的高级功能，如前端路由、可复用组件、状态管理等，这也正是 Web前端开发者们热爱 Vue. js 的主要原因。

Vue.js简介

vue. js(称 Vue，读音/vju：/，类似于 view）是一套用于构建用户界面的渐进式 Javascrpt
框架。对比其他大型框架，不同之处在于 Vue. js被设计为可以自底向上逐层应用。其他大型框架住住项目一开始就对技术方案进行强制性的要求，而 Vue. js 的核心库只关注视图层，个
仅易于上手，还便于与第三方库或既有项目整合，开发人员既可以选择使用 Vue. js 来开发一个全新项目，也可以将Vue. js引人现有的项目中。此外，当vue. js 与现代化的工具链以及各种文持类库结合使用时，也完全能够为复杂的单页应用(SPA)提供驱动。工具链是指在前端开发过程中用到的一系列工具，例如，使用脚手架工具创建应用，使用依赖管理工具安装依赖包，以及使用构建工-具进行代码编译等。

第一个Vue实例

Vue实例常用到的构造选项 

常用的构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

  data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1、对象（Object）的形式

 2、函数（Function）的形式

Vue项目化 

Vue Cli快速构建一个Vue.js项目，这个项目本质就是一套文件结构，里面包含基础的依赖库，只需要npm install 一下就可以安装。

Vue CLi由三个主要的工具组成，分别是：

1、CLI

CLI是一个npm包，通过Vue.js命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建）项目的话，你可以运行vue ui命令行来打开可视化界面。

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

3、CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。 

2、CLI Service

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

3、CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。

         总结来说，这门课程让我获得了很多实用技术和技巧，更好的了解了前端开发的相关流程和方法。在学习过程中也存在很多的不足，如有时候写代码编写不够规范、细节不够认真精细等问题。