本
文
摘
要
官方资源
Vue官方网站 Vue.js
！Vue官方教程介绍 — Vue.js
！！本文的官方视频教程：Vue.js 教程
Vue是什么？
Vue是一个前端网页js文件。里面提供了很多好用的功能，如果你的前端HTML页面包含了这个文件，你就可以非常方便的写很多非常灵活的Web页面。
Vue怎么用？
1 最简单的引入方法：文件包含
Vue既然是一个js文件，当然可以直接在HTML文件里包含，包含就可以用。而且包含的vue.js可是一个在线文件。浏览器会自动下载这个文件加载使用。就像下面这样:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>更多信息参考官方介绍
2 工程化的引入方法：vue-cli命令集
工程化现在是前端的主流开发方法，一行控制台命令，就可以创建一个完整的初始工程；一行命令就可以生成发布的包；一行命令就可以安装一个新的第三方包；
本文主要讲入门，也就是能不用工程的工具就不用工程的工具，我们就从一个HTML文件开始吧。
Vue Hello World
建议先安装Visual Studio Code来编写代码，会自动补全，很方便。
新建一个文本文件，重命名为 Vue Hello World.html（文件名随便取）。
把下面的代码复制粘贴进文本文件里去：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el: #app, //vue会绑定到上面的<div id = app> 这个HTML的元素上 data: { message: Hello Vue! } }) </script> </body> </html>运行Vue代码
右键用浏览器打开上面的Vue Hello World.html文件，就会看到Vue运行的效果啦！
运行效果解释：
1 上面代码的第6行包含的在线的vue.js文件，这让我们可以在第11行，第15~20行写Vue的代码。
2 第11行的
{{message}}表示这里会显示message的值，这个message其实就是第18行的那个message。
3 第15行创建了一个Vue对象，这样Vue就可以工作了。但是还是需要一些初始化的工作来指定Vue的具体特性。
4 第16行的
el: #app上述代码的意思是将Vue对象绑定到HTML元素app身上。这样Vue就可以操作这个元素。
Vue只操作这一个元素能搞出啥动静吗？可以的。因为Vue假设我们的页面就这一个元素。所有的页面内容都是用这个元素的孩子，孙子节点创造出来的。所以Vue也是一个单元素单页面的程序。
有点不可思议吧！这也很容易理解，因为只有这样，我们写的后面的代码才可以都交给Vue去处理。让Vue接管所有前端页面的内容。
不然的话，哪里有独立于Vue的HTML代码，哪里就无法享受Vue的便捷性。
5 第17行的代码data是固定的，Vue必须要有这个成员。这个成员里的值如果被改变，界面上的内容会自动改变。这个是Vue的核心工作。也就是说，你改了内存数据，页面就会发现你改了（实际上是Vue在不定期扫描，或者说回调函数在执行），从而你就只需要操心内存数据就行了。
程序员就只需要写逻辑读写业务数据就行了。大大提高了生产力。
6 单向绑定、双向绑定
上面的message是单向绑定，也就是说，message在内存里被JavaScript代码修改了以后，界面上可以直接看到修改后的值。Vue还支持双向绑定。
比如你有一个文本输入框，这个文本框，这个文本框的内容可以绑定到一个Vue data的成员，这样你输入文本框，Vue的data里的数据就会变。更有意思的是，如果这个data成员又被绑定到页面其他控件，就会发现联动效果。这就更方便了。
下面的例子就显示了这种方便性：
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <p>输入的内容是：{{ message }}</p> <input type="text" v-model="message" placeholder="请输入...."></input> </div> <script type="text/javascript"> var app = new Vue({ el: #app, //vue会绑定到上面的<div id = app> 这个HTML的元素上 data: { message: Hello Vue! } }) </script> </body> </html>试一下吧！
有意见和建议欢迎评论啊。我也很难一下子就写的很好，欢迎批评反馈。
这样可以帮到更多的人。
