vue.js起步

最新推荐文章于 2022-07-12 19:16:00 发布

随枫潜入夜

最新推荐文章于 2022-07-12 19:16:00 发布

阅读量141

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42243957/article/details/107882827

版权

vue 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>6666</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/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: "6666"
			},
			methods: {
				details: function() {
					return  this.site + " - 不仅仅是搜索！";
				}
			}
		})
	</script>
</body>
</html>

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
在这里插入图片描述
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>Alexa : {{alexa}}</h1>
	</div>
	<script type="text/javascript">
	// 我们的数据对象
	var data = { site: "baidu", url: "www.baidu.com", alexa: 10000}
	var vm = new Vue({
		el: '#vue',
		data: data
	})

	document.write(vm.$data === data) // true
	document.write("<br>")
	document.write(vm.$el === document.getElementById('vue')) // true
	</script>
</body>
</html>