Vue.js2.0开发环境搭建（四）

转载自   vuejs2.0从入门到放弃--入门实例（四）

最近，很多小伙伴有疑惑，想学vuejs必须先了解复杂的构建工具和命令行操作吗！！答案是否定的！

对于很多做前端的同学，涉及到命令行和构建工具，想必大家都比较发憷，没有人指导，根本就不理解不了命令行的操作，导致好多想学习vue的同学被扼杀在摇篮里。今天就跟大家一起开启，没有命令行的vue学习之旅，本文适合小白，高手自动忽视。

现在，大部分的vuejs的资料都是用vue-cli去构建项目的，给不懂nodejs、不会命令行操作的前端小白们设置了很高的门槛，由于本人也是小白一步一步走过来的，所以，对此事深有体会，废话不多说。

vuejs本来很简单易上手的，初学阶段，我们完全可以像使用jquery一样去使用vuejs。直接用 这个时候，界面是这样的，如下图

接下来，我们来获取个人信息的数据，这里有两种方法可以获取。第一种，直接在vue体系内，在methods方法集合中获取。第二种，由于vue跟一些UI框架（如layui）一起用的时候，会导致一些form类的组件不能用（个人猜测是因为事件监听导致的），所以，我们在整个页面的结构上获取数据，然后复制给vue实例。

直接在vue体系内获取数据，我们模拟一个ajax获取数据的方法，如下

    
个人信息
    
    
我叫{{person.name}}
    
我今年{{person.age}}岁了
    
我是做{{person.job}}工作的
    
    
    获取数据

 
 

运行以上代码，点击“获取数据”按钮，会看到 变量 userInfo 里的数据会显示到页面中，如下图所示

是不是很简单，省去了很多操作DOM的步骤，瞬间感觉自己的年轻了。