<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--view-->
<div id="vue_app">
<h1>{{message}}</h1>
<h1>{{title}}</h1>
</div>
<div id="vue_det">
<h1>site :{{site}} </h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
//console.log(vue)
var app=new Vue({
el:'#vue_app',
//Model
data:{
title:"hello Vue!",
message:"hello World"
}
})
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
console.log(app)
</script>
</body>
</html>
数据驱动,双向数据绑定。根据js部分的 el来查找innerHTML,然后将里面的变量替换掉。
现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message
的值,你将看到上例相应地更新。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app
) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。