【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        vue学习有很多的方法。一是找一份教程，从0开始学习；另外一种就是找一份视频，跟着视频一步一步去做。个人觉得第二种方法是比较好的。因为对于大部分人来说，学习新东西的热情是很容易被消磨掉的。如果在学习的过程当中，无法短时间看到效果，那么这份积极性可能一会就没了。看视频则不一样，很多视频都是以动手实践的内容为主，只要跟着up主一步一步去做，马上就可以看到效果。

        b站上面有很多的参考视频，选择一份自己比较喜欢的、跟得上的即可。这里推荐一个可以帮助我们快速了解和掌握vue.js的学习视频，地址在这，https://www.bilibili.com/video/BV1rb4y1S7Lg。下面实例中的一部分代码也是来自于这个视频。

1、第一个vue程序

        这是完整的一个网页。首先在header中引用了vue.min.js这个文件。其次增加一个id为app的div块，后面script中的vue也会和这个div绑定在一起。最后定义了一个message数据，只要对message做出了修改，上面的显示部分就会同步做出修改。

2、v-if命令

        v-if是非常有用的一个命令。整个程序的显示内容取决于vue中的status数据，如果status为真，那么显示的内容是This is yes，反之显示的内容是This is no。

3、v-for命令

        v-for命令主要是将vue中的数据循环显示出来。如上面代码所示，显示的内容是city。city本身又来自于vue中的cities，所以这里的v-for就是一个对cities中的内容进行循环打印的过程。

4、button按钮事件

        在vue程序中，对于按钮事件的响应和处理有它自己的一套想法。如上图所示，这里定义了一个button，响应的函数为handle_button。那么这个函数其实是挂在vue的methods下面。当然这了为了简单，只是添加了一个alert打印，实际项目处理的时候，可以根据实际需要添加对应的语句。

5、axios程序

        另外，涉及到的data.json如下所示，

        和jquery中的ajax实现前后台交互一样，vue中用axios来实现前后台数据的交互。当然这里为了实现方便，就在本地用data.json做了替代。不过和上面1-5的程序有所不同，除了header中添加了axios.min.js文件外，这个html想要运行起来，不能直接用chrome打开网页，而是应该使能iis，将网页命名为index.html，同时将data.json拷贝到对应的目录下，创建一个iis网站，修改目录权限。在所有的这一切都ok之后，输入http://127.0.0.1:8080就可以看到对应的显示内容了。