在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
存放数据的data是vue实例的对象，且data的数据变化也会被Vue框架检测到，自动更新到html上。本文是一篇实实在在的学习干货，将从实例化Vue、el参数和定义数据对象三方面分析Vue实例。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
<h1>{{info()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_data',
data: {
title: "Vue.js",
url: "https://cn.vuejs.org"
},
methods: {
info: function() {
return this.title + " - 坚持学习！";
}
}
})
</script>
</body>
</html>
1、每个Vue应用都需要实例化Vue来实现
var vm = new Vue({
//*******
})
2、el参数
在上面实例中的id为vue_data，在div元素中：
<div id="vue_data"></div>
意味着所有的改动均在这个id为vau_data的div中，外部不受影响。
3、定义数据对象
data用于定义属性，在上述实例中有2个属性，分别为：title、url。
methods用于定义函数，可以通过return来返回函数值。
{{ }}用于输出对象属性和函数返回值。
当一个Vue实例创建时，Vue的响应系统加入了data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也会产生相应的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
</div>
<script type="text/javascript">
//数据对象
var data = {title: "Vue.js",url: "https://cn.vuejs.org"}
var vm = new Vue({
el: '#vue_data',
data: data
})
//设置属性会影响到原始数据
vm.title = "spring";
document.write(data.title + "<br>");
//同样
data.url = "https://spring.io";
document.write(vm.url);
</script>
</body>
</html>
Vue还提供了实例属性与方法，以前缀$与用户定义的属性区分开来。
document.write(vm.$data === data) // true
以上就是有关Vue实例分析的学习干货，大家都明白了吗？对Vue还有学习兴趣的同学，可以上博学谷观看视频学习，相信会有不少的收获。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
C++语言怎么学？零基础C++入门技巧
下一篇：
浅析ARP欺骗/DNS欺骗
相关推荐 更多
哪里有好的电脑培训班？能学习到什么知识？
现在学习电脑知识成为高薪就业的代名词，但是哪里有好的电脑培训班呢？在电脑培训班能学习到什么知识呢？目前国内有非常多的电脑培训班，有大型的教育培训机构，也有小型的作坊式培训，还可以通过网络在线学习电脑知识。现在大部分参加电脑培训班的同学都纷纷选择传智播客或者在线平台博学谷，13年的教学经验与良好的口碑，为社会输送了大量的优质电脑技能人才。
7845
2019-08-12 18:36:57
iOS开发怎么样？就业前景好不好？
伴随着现代科技的高速发展，移动互联网走进百姓家，开始成为生活里不可缺少的一部分。目前来看，iOS开发还是发展可观的。因为国内起步比较晚，还有很大的进步空间，因此，对于iOS 开发工程师在国内而言，是非常紧缺的，也就是说，在未来这一行业必定吃香。
4961
2020-01-11 10:04:54
C语言零基础入门教程推荐
学习C语言基本上是每一个程序员的必修课，因此C语言的重要性和优点早已不言而喻。简单来讲，C语言语法清晰，结构简单，程序执行效率高，可以说是为操作系统而生。那么我们该如何学习C语言呢？尤其是对于零基础的学习者来讲，要自学入门C语言并不轻松。本文将为大家推荐博学谷的《零基础C语言入门教程》，需要学习的朋友赶紧来看看吧！
5101
2020-02-20 19:17:38
疫情当下在家办公 IT职场中如何充电成长？
疫情当下在家办公 不能放松自己，IT职场中要充电成长，疫情期间在家办公的这段时间里，最好能好好复盘，思考过去的几年里，真正制约你快速成长的瓶颈是什么，找到破局点竭尽全力突破它。寻找破局点，要基于自己对业务的深度了解、研究，而不是想当然的臆造。
4767
2020-02-25 15:03:35
智慧城市如何助力疫情防控？
随着物联网、大数据和人工智能等信息技术的日新月异，我们离智慧城市的构建也越来越近了。在本次新冠疫情期间，我们也可以看到许多智慧城市的应用场景。例如，乘坐远距离的交通工具，无需填写问卷；在跨省返回居住小区时，也无需填表，只要在手机上确定身份并填写相关问题。由此可以看出，智慧城市的系统建设可以很好的提前研判预警，从而有效防控疫情的蔓延。下面我们具体来分析一下智慧城市如何助力疫情防控。
5364
2020-02-27 14:31:48
