Vue从入门到实战：Vue实例

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

在一个使用Vue.js的框架的页面应用程序中，至少要创建一个Vue实例，语法为new Vue( ).

Vue实例充当了MVVM模式中的ViewModel.

在选项对象中，通过el属性绑定要渲染的View, data属性指定一个Model ，所有的数据都在该数据对象中定义。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hello Vue.js</title>
	</head>
	<body>
		<!--View-->
		<div id="app">
			<!--简单的文本插值-->
			<p>{{message}}</p>
			<!--使用 JavaScript 表达式-->
			<p>{{message.toUpperCase()}}</p>
			<!--HTML代码将以普通文本的方式输出-->
			<p>{{spanHtml}}</p>
			<!--输出HTML代码-->
			<p v-html="spanHtml"></p>
			<!--使用v-bind指令对HTML元素的属性进行绑定-->
			<a v-bind:href="url">新浪网</a>
		</div>
	
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
			  el: '#app',
			  data: {
			  	message: "Hello Vue.js",
			  	url: "http://www.sina.com.cn/",
			  	spanHtml: "<span style='color: red'>HTML元素，以红色字体显示</span>",
				}
			})
			// vm.$mount("#app");
		</script>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：Vue实例&oldid=24757”