Vue 入门

最新推荐文章于 2024-04-30 08:37:00 发布

原创最新推荐文章于 2024-04-30 08:37:00 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个简单的Vue.js应用示例，展示了如何使用Vue.js的基本语法和特性来实现数据绑定。通过一个hello world的例子，读者可以了解到Vue实例的创建、挂载点的概念以及模板的使用方式。

Vue 入门，hello world 例子：

其中，head 中的 script 引入的为 vue 的源文件。

<!DOCTYPE html>
<html>
<head>
	<title>vueTest</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">{{msg}}</div>

	<script >
		new Vue({
			el: "#root",
			data: {
				msg: "hello world"
			}
		})
	</script>
</body>
</html>

以上代码，new Vue() 为创建了一个Vue 实例。该示例接收一些配置项：el 配置项指实例负责管理的区域，data 配置项指数据区域。

挂载点，模版，实例之间的关系

代码中，id 为 root 的元素为 Vue 实例的挂载点。通过Vue 实例的el 制定挂载点的位置。

Vue 实例只会去处理挂载点下面的内容。

模版，为挂载点内部的内容。

模版不仅可以放在上面的位置，还可以放在Vue 实例中，例如：

<!DOCTYPE html>
<html>
<head>
	<title>vueTest</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">

	</div>

	<script >
		new Vue({
			el: "#root",
			template: "<p>emm {{msg}}</p>",
			data: {
				msg: "hello world"
			}
		})
	</script>
</body>
</html>