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

来自CloudWiki
跳转至： 导航， 搜索
第1行： 第1行：
 +
==操作步骤==
 +
===引入vue文件===
 +
<nowiki>
 +
<head>
 +
<meta charset="utf-8">
 +
<script src="vue.js" type="text/javascript" charset="utf-8">
 +
 +
</script>
 +
 +
 +
<title></title>
 +
</head></nowiki>
 +
 +
===视图层===
 +
<nowiki>
 +
<div id="app">
 +
{{ message }}
 +
</div></nowiki>
 +
 +
===脚本===
 +
创建一个叫app的Vue对象，
 +
 +
绑定元素app ,赋值message 'Hello Vue'
 +
 +
<nowiki>
 +
<script type="text/javascript">
 +
var app = new Vue({
 +
el: '#app',
 +
data: {
 +
message: 'Hello Vue!'
 +
}
 +
})
 +
</script></nowiki>
 
==代码==
 
==代码==
  

2022年2月6日 (日) 09:02的版本

操作步骤

引入vue文件

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

		</script>


		<title></title>
	</head>

视图层

	<div id="app">
			{{ message }}
		</div>

脚本

创建一个叫app的Vue对象，

绑定元素app ,赋值message 'Hello Vue' 

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

代码

<!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>
取自“http://www.openbrains.net/mediawiki/index.php?title=第一个Vue程序&oldid=29447”