vue-basic-learning
/
1.vue数据对象.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue-test</title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<body>
		<div id="app">
			{{ message }}
			<span>{{message}}</span>
			<h2>{{school}}</h2>
			<h2>{{school.name}}</h2>
			<ul>
				<li>{{arr[0]}}</li>
				<li>{{arr[1]}}</li>
			</ul>
		</div>
		<script src="js/v2.6.10/vue.js" type="text/javascript"></script>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message:'nihao!',
					school:{
						class:'六年级',
						name:'奥赛班'
					},
					arr:['广州','厦门','东莞']
				}
			})

			// const App = {
			// 	data() {
			// 		return {
			// 			message: '插值表达式!',
			// 			school:{
			// 				class:'六年级',
			// 				name:'奥赛班'
			// 			},
			// 			arr:['a1','a2','a3']
			// 		}
			// 	}
			// };
			// Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>