相信大家最近找工作的时候都会遇到很多公司都要求要会Vue的情况，那下面我就给大家说一下Vue的学习方法，让大家在工作中如鱼得水。

Vue 是什么

Vue是一套用于构建用户界面的渐进式框架。

Vue被设计为可以自底向上逐层应用。

Vue的核心库只关注视图层，易上手，便于和第三方库或既有项目整合。

现代化的工具链和各种类库结合使用，Vue也更适合做复杂的单页面应用SPA（SinglePage Web Application）

起步

假设您已经了解了关于HTML、CSS和JavaScript的相关知识。

创建一个文件，命名·hello.html·，通过如下方式引用Vue：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

更多Vue的安装方式网上有介绍，不过对于新手来说，上面的使用方法更贴近Web开发。高阶开发者会使用更敏捷的开发工具，这里不做介绍。

声明式渲染

此时，我们已经成功的创建了第一个Vue应用，现在的数据和DOM已经被建立了关系，所有的东西都是响应式的，应用内的数据可以通过控制台显示。

除了文本插值，我们还可以这样绑定元素特性：

这里我们遇见一些新东西：v-bind，带有前缀v-的被称为指令，表示是Vue提供的特殊特性，它们会在渲染的DOM上应用特殊的响应式行为。v-bind 意义是绑定，讲元素节点的title特性和Vue实例的message属性保持一致。

条件与循环

控制切换一个元素是否显示，v-if 根据条件选择

在浏览器中刷新网页，在控制栏中输入app3.seen=false，即可看到指定内容消失：

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。

接下来展示 v-for 循环，用来渲染一个数组的数据

看到界面显示的列表内容有三个，如下：

在控制台中输入 app4.todos.push({text:'新项目'})，手动修改了todos的内容，实时看到网页内容修改，如下：

处理用户输入

v-on 添加一个事件监听器，通过它来调用Vue使用中定义的方法，实现交互。

建立一个文本区域，再创建一个按钮，写入逆转消息的方法，使用 v-on 绑定

看到原始内容：页面最下方文字区域和按钮

点击按钮，看到文字变化，逆转消息完成，再点击即可变回来

上述例子中，我们在reverseMessage方法中更新了应用状态，但是没有触碰DOM，因为所有的DOM操作都由Vue来处理，我们只需要关注逻辑层面即可。

Vue还提供 v-model 指令，轻松实现表单输入和应用状态之间的双向绑定。

可以看到，输入框的内容预先设定好，输入框上的文本与输入框内容相同

v-model把input中的内容同步到数据data中，文本显示区域实时变化，跟随状态。

组件化应用构建

组件系统是Vue的另一个重要的概念，允许我们使用小型、独立和可复用的组建构建大型应用。个人理解为组件化开发，相当于一个拼接积木的过程，把大项目无限拆分成不可分割或难以分割的小块，灵活的组合各个部件，完成整体的拼接。

在Vue中，一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组建很简单：

案例上要先注册一个组件，再定义各个元素和数据，v-for 进行遍历，v-bind 绑定每个item，todo作为组件的属性传入，设置组件的key为item.id，通过 prop 接口与父单元进行了良好的解耦，属性传入到组件中，在组件中构建并渲染到页面中。

在大型项目中，我们有必要将整个应用程序划分为组件，方便开发人员管理。未来使用组件的应用模版尽可能的使用子组件进行封装。

Vue组件与自定义元素的关系

自定义元素是Web组件规范的一部分，Vue的组件语法部分参考了该规范，Vue组件实现了Slot API与 is 特性，但是还有几个关键差别：

1. Web Components 规范已经完成并通过，但未被所有的浏览器原生实现。目前Safari 10.1+、Chrome 54+和Firefox 63+原生支持Web Component。相比之下，Vue组件不需要任何 polyfill ，并且在所有支持的浏览器（IE9及更高版本）之下表现一致。必要时，Vue组件也可以包装于原生自定义元素之内。
2. Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

以上是Vue的介绍和部分核心基本功能，希望对您有所帮助。

请多关注后期的Vue开发讲解和案例拆分，欢迎读者私信提供意见和建议，未来会做改进。

我是一名前端开发程序员，自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴

前端资料获取方式：

1.在你手机的右上角有【关注】选项，点击关注！

2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】

电脑已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~