vue学习笔记---vue的Helloworld

最新推荐文章于 2022-04-07 23:41:45 发布

{[("青椒盖饭")]}

最新推荐文章于 2022-04-07 23:41:45 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/qq_43386754/article/details/88919730

版权

如果使用传统的js进行对一个div元素中添加内容,则会进行以下操作

获取对应元素对象
修改元素对象内容

<html>
	<head>
		<title>helloworld</title>
	</head>
	<body>
		<div id="app"></div>
		<script>
			var appObj = document.getElementById("app");
			appObj.innerHTML="HellWorld"
		</script>
	</body>
</html>

而当使用vue框架之后,只需要关注数据修改即可,不需要关注对象的获取细节
要在网页中使用vue可以直接通过<script>标签引入vue.js文件

在这里插入图片描述

具体的操作为,
1. 创建一个Vue实例化对象
2. 通过"el"指向对应的元素
3. 使用data创建数据
4. 在外部使用"{{}}"的方式绑定数据

<html>
	<head>
		<title>helloworld</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">{{info}}</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					info:'vue版HelloWorld'
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

使用vue不需要关注元素创建的过程,只需要关注数据的变更即可,当我们要修改数据时,页面中的数据会自动变换
要获取一个Vue实例属性可以通过"$"的方式来获取

<script>
	var vm = new Vue({
		el:'#app',
		data:{
			info:'vue版HelloWorld'
		}
	})
	setTimeout(function(){
		vm.$data.info='vue修改数据'
	},2000)
</script>

在这里插入图片描述

{[("青椒盖饭")]}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记---vue的Helloworld

如果使用传统的js进行对一个div元素中添加内容,则会进行以下操作获取对应元素对象修改元素对象内容<html> <head> <title>helloworld</title> </head> <body> <div id="app"></div> <script&...
复制链接

扫一扫