小记：介绍vue.js

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

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

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

渐进式是什么意思呢？

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

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

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

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

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

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

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

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

Vue的实例

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

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

Vue的常用指令：

vue技术栈

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

除了Vue.js还需要用到：

（1）vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。

（2）vue-： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。

（3）vuex：Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。

（4）ES6：的新版本，的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。

（5）NPM：node.js的包管理工具，用于同一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。

（6）：一款强大的文件打包工具，可以将我们的前端项目文件同一打包压缩至js中，并且可以通过vue-等加载器实现语法转化与加载。

（7）Babel：一款将ES6代码转化为浏览器兼容的ES5代码的插件

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

vue-cli构建

单文件组件

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

父子组件通信

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

使用props向子组件传递数据

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

使用向父组件发送消息

在开发组件时，有些功能可能恰好与 props 相反，需要子组件反过来和父组件进行通信。

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

使用向父组件发送消息

在开发组件时，有些功能可能恰好与 props 相反，需要子组件反过来和父组件进行通信。

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

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

插件使用

全局使用：

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

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

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

单文件使用：

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

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

以上是我最近一段时间学习vue的小积累，如果日后更加深入的接触vue，那么有什么感想或心得也会持续更新的。加油吧～