在线客服
扫描二维码
下载博学谷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还有学习兴趣的同学,可以上博学谷观看视频学习,相信会有不少的收获。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
APP开发一个人能完成吗?需要哪些流程?
不少想要APP创业者都关心这样的问题:APP开发一个人能完成吗?需要哪些流程?如果资金到位,一个人完成APP开发倒也不是什么太大的问题。但如果缺乏资金就比较困难。注意这里不是不行,而是要多付出一些努力。本文将介绍一个人完成APP开发的流程,给APP开发者一些思路和启示。
7061
2019-07-30 14:22:13
编程语言有哪几种?分别有什么特点?
大家经常在网上看到十大编程语言,五大编程语言等等信息。实际编程语言种类非常多,据不完全统计全球范围内编程语言有将近上千种。而我们经常说的编程语言,仅仅是目前根据市场使用率以及发展前景相对较好的编程语言。那目前比较热门的编程语言有哪几种呢?它们分别有什么特点?
21159
2019-08-14 18:51:03
大公司需要什么样的IT技能?
大公司需要什么样的IT技能?随着互联网技术的深入发展,IT行业的分类也更加纵深化和专业化。不同类别的技能会对于不同的端口需求,那现在市面上的大公司都青睐什么样的IT技能,你的技能到底符不符合大公司的招聘标准呢?
3941
2020-06-01 17:23:41
5G时代大公司需要什么IT技能?
5G时代大公司需要什么IT技能?如今5G时代已经来临,互联网的迭代升级促进了IT行业的进一步发展,与此同时IT产业为了适应新的技术的变化,也需要不断调整最新的IT技能。
4738
2020-06-03 14:37:06
程序员靠敲代码实现了财富自由?谁这么励志?
程序员靠敲代码也能实现财富自由?谁这么励志?大家对程序员的印象是怎样的?是穿着格子衫,走到哪都背个电脑包,“人傻钱多”,头发稀疏,一瓶水,一根烟,一个bug改一天吗?
2779
2022-03-03 16:08:21