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

来自CloudWiki
跳转至： 导航， 搜索
（→‎案例2）
 
（未显示同一用户的2个中间版本）
第1行： 第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>
 +
===全部代码===
  
 
  <nowiki>
 
  <nowiki>
第29行： 第62行：
  
 
</nowiki>
 
</nowiki>
 +
 +
==案例2==
 +
段代码不难理解，我们的Model就是data变量，而ViewModel就是这里的new Vue()得到的对象。这里两个最简单的属性相信大家一看就能明白。
 +
 +
*el：表示绑定的Dom元素，此例子中表示的是父级的Dom元素。
 +
*data：需要绑定的数据Model。
 +
 +
<nowiki>
 +
<!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">
 +
            <h1>姓名：{{ Name }}</h1>
 +
            <h1>年龄：{{ Age }}</h1>
 +
            <h1>学校：{{ School }}</h1>
 +
        </div>
 +
 +
        <script src="Content/vue/dist/vue.js"></script>
 +
        <script type="text/javascript">
 +
        //Model
 +
        var data = {
 +
            Name: '小明',
 +
            Age: 18,
 +
            School:'光明小学',
 +
        }
 +
 +
        //ViewModel
 +
        var vue = new Vue({
 +
            el: '#app',
 +
            data: data,
 +
        });
 +
   
 +
        </script>
 +
    </body>
 +
</html></nowiki>

2022年4月1日 (五) 07:50的最新版本

案例1

引入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>

案例2

段代码不难理解，我们的Model就是data变量，而ViewModel就是这里的new Vue()得到的对象。这里两个最简单的属性相信大家一看就能明白。

  • el：表示绑定的Dom元素，此例子中表示的是父级的Dom元素。
  • data：需要绑定的数据Model。
<!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">
            <h1>姓名：{{ Name }}</h1>
            <h1>年龄：{{ Age }}</h1>
            <h1>学校：{{ School }}</h1>
        </div>

        <script src="Content/vue/dist/vue.js"></script>
        <script type="text/javascript">
        //Model
        var data = {
            Name: '小明',
            Age: 18,
            School:'光明小学',
        }

        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
        });
    
        </script>
    </body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=第一个Vue程序&oldid=30035”