Vue文本插值

资料:来自Vue的官网

核心思想

Vue.js核心

  1. 用简洁的模板语法
  2. 声明式地将数据渲染进 DOM 的系统
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 引用Vue.js -->
		<script src="vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			{{Message}} {{Dog}}
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					Message:'Helllo ',
					Dog:'Vue'
				}
			})
		</script>
	</body>
</html>

结果打印:Helllo Vue

代码分析

创建一个 Vue (var xx = new Vue({....}))应用会将其挂载到一个 DOM 元素上 (图例中的 #app,通过el:“#app”绑定) ,然后对其进行完全控制