vue基础教程学习（一） - 好文

最近公司在用vue开发项目，所以想要完全掌握，首先就必须扫一遍它的基础用法，然后再深入了解其模块化，组件化的具体内容。如果有小伙伴和我一样，就跟着我一起开始推开vue的大门，一起打开前端的新世界吧。

今天这节主要是讲讲三点：
1.vue（/vjuː/）是什么
2.为什么要学习vue,即vue的优势
3.怎么用vue实现数据的基本绑定

一.Vue是什么（What is）

VUE：Vue官网 <https://cn.vuejs.org/v2/guide/>上对它的解释是一套用于构建用户界面的渐进式框架，
是Javascript的一个MVVM库，
是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
// 特别解释一下MVVM：Model -- View -- ViewModel(Vue的核心，是vue的一个实例) //
Vue的实例是作用于某一个HTML元素上的，可以是HTML的body，也可以是指定了id的某个元素 // MVVM要实现的就是： //
1.数据变量（Model）发生改变，视图（View）就发生改变; // 2.视图（View）发生改变，数据变量（Model）发生改变

由此可见，vue对于前端开发者来说是一大福利。如果在接触vue这个框架之前有了解过jquery怎么去绑定数据或者模块公用这些的话，一定会知道前端是处于被动的状态，所以vue的这些功能对于前端来说无疑是提高了前端的作用和在团队项目中的地位的。

二.为什么要学习Vue（Why）

* 1.开发效率高
* 2.Vue的核心库只关注视图层，可以为复杂的单页面提供驱动，是以数据驱动和组件化的思想构建的
* 3.传统的Jquery频繁地操作Dom会消耗性能，使用Vue减少了操作Dom引起的页面回流和重绘，提升了性能
* 4.非常容易与其他库或已有项目整合
三.Vue的一个简单的栗子（What do）

在上代码之前我给大家分享一个写Vue特别好用的IDE——Atom，关于他的下载，可以点击这里
<https://download.csdn.net/download/diaoweixiao/10457013>。
关于它的快捷键我这边简单分享几个常用的，详细的可去这里
<https://blog.csdn.net/zhongguohaoshaonian/article/details/52315101>查看

快捷键功能
Ctrl + Shift + S 文件另存为
Ctrl + Z 撤销
Ctrl + L 选中一行
Shift + Home/End 选中文档至行首/行尾
F11 全屏
除了快捷键，在你开发之前，你还必须要了解它的插件。
关于你必须要关注的插件，我推荐以下几个，大家可以根据自己的需要自行下载：
Atom Beautify ：代码格式化工具
Autocomplete Paths ：自动补全文件路径
Minimap ：内部编辑那里有一个小小的代码图
file-icons ：为不同类型的文件添加一个漂亮的小图标
docblockr ：文档化注释
Linter Jshint ：js开发者必备插件
emmet ：加快web开发速度，提供snippet(代码片段)、abbreviation expand(简写展开)功能
color-picker ：在编辑器里面挑选颜色
atom-html-preview ：实时预览HTML页面
csslint ：验证css语法是否正确
autoprefixer ：自动为 CSS 属性添加特定的前缀
pigments ：颜色显示插件

好的，现在就万事俱备只欠东风了。接下来我们开始我们的Vue之旅吧！
<div id="app"> <p v-bind:title="message">{{ message }}</p> </div>
<script src="js/vue-2.3.2.js"></script> <script> var app = new Vue({//简单赋值 el:
'#app', data: { message: '我是第一次来的!' } }); app.message = "我来改变你的人生"; </script>

热门工具换一换