HTMLdiv标签与Vue.js入门简介-CSDN博客

本文链接：https://blog.csdn.net/m0_46628950/article/details/130200560

div标签（HTML）

div标签的作用是，设定字、画、表格等的摆放位置。 DIV元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。 DIV标签，称为区隔标记。

什么是vue

vue是响应式数据驱动：页面是由数据来生成的，数据改变之后，页面也会变动。

一个基本的vue页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面名字</title>
	</head>
	
	<body>
		<div id="app">
			{{ message }}
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:" hello "
				}
			})
		</script>
	</body>
	
	
</html>

vue语法

vue的作用范围在：在el命中的元素内部

el：挂载点

el：“#app” 意思是将创建的Vue对象app 挂载到标签名字为app的标签上

提示：#是id选择器的关键字 .是class选择器的关键字

date：数据对象

vue实例需要使用的数据都会在date中

date数据对象的类型3种有：基本数据类型 message:" xxx " 数组array:[ ] 对象obj:[ ]

写复杂类型数据遵守JS的语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面名字</title>
	</head>
	
	<body>
		<div id="app">
			{{ message }}  //取基本信息
			{{student.age}} //取对象信息
			{{ classnumb }} //取数组
			{{classnumb[2]}} //取数组值
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:" hello ",
					student:{
						name:"李佩泽",
						age:"22"
					},
					classnumb:["1班","2班","3班"]
				}
			})
		</script>
	</body>
	
	
</html>