Vue.js一课一得

vue.js基础

vue是什么？

Vue是一套用于构建用户界面的渐进式框架，是一个JavaScript MVVM库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

请注意上文加粗的部份，首先对vue“渐进式框架”理解:

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。

那我们在刚学习时，没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展。 同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把Vue很方便的与其它已有项目或框架相结合。

再次我们对“MVVM”进行理解：

说起这个MVVM框架，就不得不说MVC框架。在传统开发中，将整个前端页面分成View（视图-V），Controller（控件-C），Modal（数据源-M），即MVC框架。view(视图)上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。

整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染放在View当中，但在实际运用上却存在一个问题：那就是MVC框架允许View和Model直接进行通信！！

换句话说，View和Model之间随着业务量的不断庞大，会出现蜘蛛网一样难以处理的依赖关系，完全背离了开发所应该遵循的“开放封闭原则”。

面对这个问题，MVVM框架就出现了，MVVM分别指View，Model，View-Model，View通过View-Model的DOM Listeners将事件绑定到Model上，而Model则通过Data Bindings来管理View中的数据，这样一来View和model之间就不用直接通信，而通过View-Model从中起到一个连接桥的作用。简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。

 vue.js安装

方法一

我们点击右侧链接，前往vue.js的官网，vue.js的官网链接地址：https://cn.vuejs.org

进入官网后，选择文档vue 2 文档，如下图所示：

或者点击该链接，直接跳转到Vue 2首页：https://v2.cn.vuejs.org

进入Vue 2首页后，点击起步按钮，如下图所示：

在vue 2页面中，向下滑动鼠标，直至看到<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>，如下图所示：

打开新的浏览器窗口，将src中的js文件(比如https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js)，复制到窗口的地址栏中，如下图所示： 

 先后使用Ctrl + A 和Ctrl + C， 复制上图中的vue.js的脚本代码后。在你的项目中新建一个js文件，将该脚本代码复制到该文件中，如下图所示：新建一个vueHtml页面，引入新创建的vue.js文件，如下图所示：

 方法二

使用npm install创建

在此文件夹的地址栏中输入cmd，可直接打开cmd命令框，且定位到当前目录，如下图所示：

 

在cmd命令框中，输入命令 

将会安装并执行create-vue，它是Vue官方的项目脚手架工具，如下图所示：

 

在项目被创建后，按照上图的提示，依次执行如下命令：

npm install

npm run dev

打开浏览器，在地址栏中输入： http://localhost:5173/，如下图所示

出现这个页面，说明项目已经创建成功。