vue的入门

vue.js是目前比较热门的前端框架之一。它具有易用，灵活，高效等特点。它也提供一种帮助我们快速构建饼开发前端项目的模式。本次分享主要就是介绍vuejs，了解vuejs的基本知识，以及开发流程，进一步了解如何通过vuejs构建一个前端项目。

主要通过四个部分讲解，介绍vue,vue的实例，以及vue的技术栈，最后是vue插件的使用。

什么是vue?vue就是一个渐进式的JS框架。主要作用就是动态构建用户界面。

渐进式是什么意思呢？

vue的核心功能就是一个视图模板引擎，包含声明式渲染以及组件系统。在核心部件的基础上添加客户端路由、大规模状态管理来构建一个完整的框架，下图就是vue包含的所有部件。这些功能是相互独立的，可以在核心部件基础上选择任意你所需要的部件。这也就是‘渐进式’的概念。

开发出vue的作者叫尤雨溪（Evan You）是一个华裔，使得vue很热的原因还有一个就是vue的中文文档写得很好，简单易懂。有兴趣可以去百科看一下他的简介---------链接： https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470

那么，vue是因何由来的？学习前端的同学就算没接触过Angular和React，也一定听说过，vue和Angular还有React有一定交集。

Vue集这两者的优点于一身，它具有Angular的模板语法和数据绑定的特性，虽然Angualr的功能齐全，但是上手有点难，Vue上手容易，而且它的中文文档写的很好，适合学习。还有，Vue还具有React的组件化和虚拟Dom的特性，虽然Vue和React上手难易程度差不多，但是vue比react的性能会好点。

显而易见，vue的特点也就是它的由来，并且vue遵循MVVM模式。



上图便是MVVM模式的示意图，分为三个部分：View(DOM)层、Model（JS逻辑层）以及ViewModel(Vue)层。

其中，在viewmodel层中包含两个类似***的部件，DOM Listeners和Data Bindings，当View层的数据状态发生改变时，那么Dom Listeners

会监听Model层并改变Model层的数据。相反，当Model层的数据发生改变时，ViewModel层的Data Bindings监听并改变View层数据的显示。这也就是vue的一个特性：数据的双向绑定。

Vue的实例


上图所示为vue的简单实例。其中el表示Vue需要操作的区域范围。'#example'表示操作id为example元素下的范围。

data表示vue实例的数据对象，data的属性可以响应数据的变化。created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。

Vue的常用指令：

vue技术栈

上边的vue.js可以直接在一个html页面里通过引入Vue.js来直接写Vue代码，但是这样的方式并不常用。因为如果我们的项目比较大，项目中会存在很多页面，一旦每个页面都引入一个Vue.js或者声明一个Vue实例，这样非常不利于后期的维护和代码的公用，也会存在实例名冲突的情况，所以我们需要用到Vue提供的技术栈来构建强大的前端项目。

除了Vue.js还需要用到：

（1）vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
（2）vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
（3）vuex：Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。
（4）ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
（5）NPM：node.js的包管理工具，用于同一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。
（6）webpack：一款强大的文件打包工具，可以将我们的前端项目文件同一打包压缩至js中，并且可以通过vue-loader等加载器实现语法转化与加载。
（7）Babel：一款将ES6代码转化为浏览器兼容的ES5代码的插件

利用以上等技术，我们便可以开始构建我们的Vue项目了。

vue-cli构建

单文件组件
在刚刚构建好的vue项目中，有一个App.vue和Hello.vue的文件，那么像这样的以.vue后缀结尾的文件便是我们Vue项目中常见的单文件组件。单文件组件包含了一个功能或模块的html、js及css。在.vue文件中，我们可以在template标签中写html，在script标签中写js，在style标签中写css。这样一个功能或模块就是一个.vue组件，对于组件公用和后期的维护也非常便捷。

父子组件通信
那么像这样在以单文件组件为核心的项目开发中，我们一定会想到一个问题，就是.vue父子组件之间是如何交换数据来实现通信的呢？在Vue2.0中提供了props来实现父组件向子组件传递数据，通过$emit来实现子组件向父组件传递数据。当然如果是较为复杂和普遍的数据交互，建议大家使用vuex来同一管理数据。

使用props向子组件传递数据
props 是指注册在组件选项上的自定义属性.当一个值，被放置在 props 中，作为其中一个 prop，这个值就会成为组件实例上的一个可访问的属性。

使用events向父组件发送消息
在开发 <blog-post> 组件时，有些功能可能恰好与 props 相反，需要子组件反过来和父组件进行通信。</blog-post>

•添加能放大文章文本字号的辅助功能

使用events向父组件发送消息
在开发 <blog-post> 组件时，有些功能可能恰好与 props 相反，需要子组件反过来和父组件进行通信。</blog-post>

•添加能放大文章文本字号的辅助功能>>>>内容前面添加一个可以加大文本字号的按钮

当点击 button 时，需要和父组件通信，告知它加大所有文章的文本字号。Vue 实例为我们提供了一个自定义事件(custom event)系统，来解决这个问题。想要向父组件发送事件，我们可以调用实例中内置的 $emit 方法，传递事件名称。然后在博客文章组件上，可以通过 v-on 监听这个事件，就如同使用原生 DOM 事件一样：

插件使用
全局使用：

1、index.html 引入。这样的方式不推荐使用，因为存在先后加载顺序的问题，有些插件不支持这一方式。

2、通过webpack配置文件引入。主要通过plugin配置项webpack.ProvidePlugin()方法实现，不过只适合支持CommonJs规范并提供一个全局变量的插件，如jQuery中的$。

3、import + vue.use()引入。这种方式需要在全局.vue文件中import需要加载的插件，然后通过Vue.use('插件变量名')来实现，不过此方法只支持遵循Vue.js插件编写规范的插件使用，如vue-resourece。

单文件使用：

1、通过import直接引入。这种方式可以在需要调用插件的.vue文件中使用，不过需要注意和实例的创建顺序问题，或者也可以通过require引入

2、import + components注册。此方式为Vue组件的使用方式，可以在一个组件中注册并使用一个子组件。

以上是我最近一段时间学习vue的小积累，如果日后更加深入的接触vue，那么有什么感想或心得也会持续更新的。加油吧～
————————————————
参考博客
原文链接：https://blog.csdn.net/qq_16858683/article/details/81021315