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

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

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

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

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

[html] view plaincopy

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

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

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

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue快速上手</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<h3>个人信息</h3>
<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获取数据的方法，如下

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue快速上手</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<h3>个人信息</h3>
<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.person
this.person = userInfo;
}
}
})
</script>
</body>
</html>

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

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

还有第二种方法，时间跟篇幅有限，想继续探讨的朋友，可以去查看原文 http://blog.qianduanchina.cn/post/5a4450882d630d5801b945f6 ，希望能够帮到初学的你！

vuejs2.0从入门到放弃--入门实例（四）相关推荐

GPS从入门到放弃（十四） --- 电离层延时
GPS从入门到放弃(十四) - 电离层延时电离层概念电离层(Ionosphere)是地球大气的一个电离区域.它是受到太阳高能辐射以及宇宙线的激励而电离的大气高层.50千米以上的整个地球大气层都处于 ...
AutoLisp从入门到放弃（十四）
AutoLisp从入门到放弃(十四) AutoLisp选择集操作 AutoLisp从入门到放弃(十四) 一.ssget 1.函数说明 2.参数说明 3.代码示例二.ssadd.ssdel 1.函数说 ...
flink入门_Flink从入门到放弃-入门篇
大数据成神之路: 点我去成神之路系列目录^_^ Java高级特性增强-集合 Java高级特性增强-多线程 Java高级特性增强-Synchronized Java高级特性增强-volatile Jav ...
Lwip从入门到放弃之（四）---网络接口管理
对网络接口的有效管理,是协议栈能与外部进行通信的关键.我们把网络接口管理描述成链路层的部分,它旨在对具体网络硬件.软件进行统一的封装,并未IP层提供统一的接口服务. 为了实现对这些接口的管理,LwIP ...
计算机网络从入门到放弃,自由讨论 | KBQA从入门到放弃—入门篇
➊ KBQA 的定义/概念/应用前景是什么? 知识库问答(knowledge base question answering, KB-QA)即给定自然语言问题,通过对问题进行语义理解和解析,进而利用知 ...
【java】vertx从入门到放弃——入门（四）Codec
什么是Codec?概念这个玩意我是真不想说,毕竟我没有找到具体的概念,我自己大致的理解就是,用EventBus传输类的时候,对这个类进行序列化和反序列化的东西,因为vertx使用json进行传输,所以 ...
操作系统（3）多处理器编程：从入门到放弃
操作系统(3) 多处理器编程:从入门到放弃入门:理解多线程三个放弃:原子性.有序性.可见性并发:介绍进程与线程的区别: 进程:正在运行的程序,系统分配资源和调度的基本单位,内存中可以同时加载多 ...
k8s dashboard_【大强哥-k8s从入门到放弃02】Kubernetes1.17部署Dashboard2.0
号外号外,后面所有提升视频都会更新到知乎和B站上去,不会直接发群里了,哈哈,能看懂这句话的我都认识,大家可以先关注一下,我知乎上的所有文档也会录成视频更多视频详见杨哥天云:https://spac ...
Go单元测试从入门到放弃—0.单元测试基础
这是Go单测从入门到放弃系列教程的第0篇,主要讲解在Go语言中如何做单元测试以及介绍了表格驱动测试.回归测试,并且介绍了常用的断言工具. Go语言测试 go test工具 Go语言中的测试依赖go t ...
board crt_【大强哥-k8s从入门到放弃02】Kubernetes1.17部署Dashboard2.0
号外号外,后面所有提升视频都会更新到知乎和B站上去,不会直接发群里了,哈哈,能看懂这句话的我都认识,大家可以先关注一下,我知乎上的所有文档也会录成视频我马上就开B站账号,录制点儿走心的视频,呼呼开 ...

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

vuejs2.0从入门到放弃--入门实例（四）相关推荐

最新文章

热门文章