Vue文本插值
资料:来自Vue的官网
核心思想
Vue.js核心:
- 用简洁的模板语法
- 声明式地将数据渲染进 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”绑定) ,然后对其进行完全控制