第一个Vue程序

来自CloudWiki
跳转至： 导航， 搜索

案例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”