Vue.js进阶【2】Vue Hello World

1 官方中文帮助文档：https://vue.docschina.org/v2/guide/   非常简要的一个介绍，里面如果想了解更多细节会有到 2 的连接

1.1 官方入门视频（建议你多看几遍）：https://vue.docschina.org/v2/guide/index.html#

1.2 官方教程：模板语法 https://vue.docschina.org/v2/guide/syntax.html  最常用的一些功能用法

2 中文Guide和API：https://cn.vuejs.org/v2/guide/  非常详细系统的介绍了Vue的全部概念和标准接口API

Vue开源地址：https://github.com/vuejs/vue

3 先通过代码来感受一下Vue的机制：

将下面的代码拷贝到一个空的文本文件，另存为Hello.html文件。用谷歌浏览器打开即可。

  
{{ message }}

运行效果：直接用浏览器双击打开即可看到效果

介绍

从上面的例子可以看出Vue使用自己带格式的标签来绑定页面中的JavaScript对象，从而实现JavaScript对象的成员数据和界面元素的显示同步。

其实，大家可以简单理解为 ，vue是一个简单、易用、功能强大的前端框架，在架构上先进于jQuery，但是实现的还是jQuery实现的功能（其实我们就是做个网页，用什么框架都是干这些事情，只是用法不同而已）。

Vue列表

    

        
姓名：{{value.Name}}，年龄：{{value.Age}}
    

Vue的构造函数：

Vue的构造函数接受一个对象，这个对象的成员都将成为Vue对象的成员（详细参考官方API介绍）。这一点比较关键，是后面this操作的基础。

开发工具

经过调查和朋友推荐，确定使用Sublime Text 百度云 

调试

任何开发环境都必须要有非常强大的调试环境，才可以保证开发的效率。当我们用Vue开发的时候，由于主要的环境都在浏览器里面（前端），所以这里要借助谷歌浏览器强大的调试能力（按F12键进入调试环境）。主要是看谷歌浏览器调试环境下Console（控制台，出错信息和内存JavaScript对象的值）和Elements（DOM的结构），另外，当我们使用Vue的开发版的时候，会有详细的提示信息显示在谷歌浏览器的控制台页面中。基本上这三点应该就足够了。

我们把vue.min.js替换成vue.js（开发板）之后，故意在html里面写错信息，将绑定的{{value.Name}}中间多写一个点号，写成{{value..Name}}，可以看到谷歌浏览器的报错信息：

下一节我们将讨论稍微全面和复杂的例子，看看一个完整的SPA，实现一个单页面的增删改查功能