vue学习第一天【构造器】

最新推荐文章于 2022-11-11 22:19:24 发布

qdd007

最新推荐文章于 2022-11-11 22:19:24 发布

阅读量178

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/superAdmin_root/article/details/93065414

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们通过实例来看一下构造器有哪些内容：

实例1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
	<h1>site : {{site}}</h1>
	<h1>url : {{url}}</h1>
	<h1>{{details()}}</h1>
	</div>
		<script type="text/javascript">
		var vm = new Vue({
			el: "#vue_det",
			data :{
				site: "菜鸟教程",
				url: "www.baidu.com",
				alexa: "10000"
			},
			methods: {
             details: function() {
             	return this.site;
             }
			}
		})
	</script>
	
</body>
</html>

Vue构造器内容：
el: 它是DOM元素中的id，可以理解为定位到生效的代码区域
data: 用于定义属性，实例中有三个属性分别为：site / url / alexa
methods：用于定义的函数，可以通过return来返回函数值

输出对象属性和函数返回值需要用到 {{ }}

实例2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
	<h1>site : {{site}}</h1>
	<h1>url : {{url}}</h1>
	<h1>{{details()}}</h1>
	</div>

	<script type="text/javascript">
		var data = {site: "菜鸟教程",url: "www.baidu.com",alexa: "10000"}
		var vm = new Vue({
			el: "#vue_det",
			data :/*{
				site: "菜鸟教程",
				url: "www.baidu.com",
				alexa: "10000"
			}*/ data,
			methods: {
             details: function() {
             	return data.url;
             }
			}
		})
		// 指向同一个对象   同一个地址
		document.write(vm.site == data.site)
		document.write("<br>")
		vm.site = "菜鸡宝典"
		document.write(data.site+"<br>")

		data.alexa = "10086"
		document.write(vm.alexa);
	</script>
	
</body>
</html>