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

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

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

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

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

vuejs本来很简单易上手的，初学阶段，我们完全可以像使用jquery一样去使用vuejs。直接用<script>标签引入，就这么简单，如果会用<script>标签引入并使用jquery，那么你就踏出了使用vuejs的第一步。

<script src="你的路径/vue.js"></script>

如果你没有vuejs文件，可以去github上搜vue，结果里第一个star数量最多的就是咯，去路径 vue/dist/ 下载 vue.js 或者 vue.min.js 都可以，就像jquery.js 和 jquery.min.js一个道理。如下图

接下来，就可以正常使用vuejs了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue快速上手</title>
<style type="text/css"></style>
</head>
<body>
<div class="container"><h3>个人信息</h3><!-- person 指向 vm实例的data.person对象 --><p>我叫{{person.name}}</p><p>我今年{{person.age}}岁了</p><p>我是做{{person.job}}工作的</p>
</div><script type="text/javascript" src="你的路径/vue.js"></script>
<script type="text/javascript">
// 实例化一个 vue 对象
var vm = new Vue({// vue 对象的容器el: '.container',// 数据对象集合data: {// 预留出person占位，防止报错person:{}},// 方法集合methods: {}
})
</script>
</body>
</html>

这个时候，界面是这样的，如下图

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue快速上手</title>
<style type="text/css"></style>
</head>
<body>
<div class="container"><h3>个人信息</h3><!-- person 指向 vm实例的data.person对象 --><p>我叫{{person.name}}</p><p>我今年{{person.age}}岁了</p><p>我是做{{person.job}}工作的</p><!-- 点击按钮去个人信息数据 --><button @click="getData">获取数据</button>
</div><script type="text/javascript" src="你的路径/vue.js"></script>
<script type="text/javascript">
// 个人信息数据
var userInfo = {name: '安小夏',age: 18,job: 'web前端'
};// 实例化一个 vue 对象
var vm = new Vue({// vue 对象的容器el: '.container',// 数据对象集合data: {// 预留出person占位，防止报错person:{}},// 方法集合methods: {getData: function(){// this.person 指向的是 data.personthis.person = userInfo;}}
})
</script>
</body>
</html>

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

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

Vue.js2.0开发环境搭建（四）相关推荐

Vue.js2.0开发环境搭建（三）
转载自 Vue.js2.0从入门到放弃---入门实例(三) 今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据.话不多说,直接上干货吧. ...
Vue.js2.0开发环境搭建（一）
转载自 Vue.js2.0从入门到放弃---入门实例(一) 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题 ...
Vue.js2.0开发环境搭建（二）
转载自 Vue.js 2.0从入门到放弃---入门实例(二) 前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具.这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性,以及一个小实 ...
NXP JN5189 ZigBee 3.0开发环境搭建（续）
NXP JN5189 ZigBee 3.0开发环境搭建(续) 一.设置 SDK 安装位置二.导入 DK6 的 SDK 三.安装 NXP Zigbee Configuration Editor 1.插 ...
NXP JN5189 ZigBee 3.0开发环境搭建
NXP JN5189 ZigBee 3.0开发环境搭建一.下载相关软件 1.IDE 2.SDK 3.MCUXpresso Config Tools 4.GCC Arm Embedded tool c ...
udig-1.4.0 开发环境搭建
udig-1.4.0开发环境搭建下载需要的文件 dropins-3.7.2.zip: http://udig.refractions.net/files/downloads/extras/ ...
音视频开发-SRS 4.0开发环境搭建丨webrtc丨FFmpeg丨SRS流媒体服务器开发
SRS 4.0开发环境搭建视频讲解如下,点击观看: 音视频开发-SRS 4.0开发环境搭建丨webrtc丨FFmpeg丨SRS流媒体服务器开发音视频高级开发学习学习资料链接:FFmpeg/WebR ...
Cocos2d-x.3.0开发环境搭建
配置:win7 + VS2012 + Cocos2d-x.3.0 + Cocos Studio v1.4.0.1 前言:本文介绍在上述配置下进行游戏开发的环境搭建.开发语言为C++.如果读者不需要查看 ...
Ubuntu11 10 64Bit版上的Android 4 0 开发环境搭建
据说Android以后新版本只支持64bit版本开发,所以搭建一个64bit系统的Android开发环境为将来的Android4.0 及更高版本开发打好基础. 一.准备工作 1.1 硬件 PC 一台 ...

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

Vue.js2.0开发环境搭建（四）相关推荐

最新文章

热门文章