“第一个Vue程序”的版本间的差异

来自CloudWiki
跳转至: 导航搜索
(创建页面,内容为“ <nowiki> <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>Hello Vue.js</title> </head> <body> <!--View--> <div id="app"> <p>{{message}}</p>…”)
 
第1行: 第1行:
 +
==代码==
 +
 
  <nowiki>
 
  <nowiki>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
<meta charset="GBK">
+
<meta charset="utf-8">
<title>Hello Vue.js</title>
+
<script src="vue.js" type="text/javascript" charset="utf-8">
 +
 
 +
</script>
 +
 
 +
 
 +
<title></title>
 
</head>
 
</head>
 
<body>
 
<body>
<!--View-->
 
 
<div id="app">
 
<div id="app">
<p>{{message}}</p>
+
{{ message }}
 
</div>
 
</div>
 
+
<script type="text/javascript">
<script src="vue.js"></script>
+
var app = new Vue({
<script>
+
el: '#app',
//Model
+
data: {
var modelData = {
+
message: 'Hello Vue!'
message: 'Hello Vue.js!'
+
}
}
 
 
//创建一个Vue实例,即ViewModel,它连接View与Model
 
new Vue({
 
  el: '#app', //选项对象的el属性指向View
 
  data: modelData  //data属性指向Model
 
 
})
 
})
 
</script>
 
</script>
 
</body>
 
</body>
</html></nowiki>
+
</html>
 +
 
 +
</nowiki>

2022年2月6日 (日) 08:58的版本

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.js" type="text/javascript" charset="utf-8">

		</script>


		<title></title>
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				}
			})
		</script>
	</body>
</html>