<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一條信息</title><script src=”js/vue.js”></script></head><body><div id=”app”><p>{{ message }}</ ...
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Vue第一條信息</title>
<script src=”js/vue.js”></script>
</head>
<body>
<div id=”app”>
<p>{{ message }}</p>
</div><script>
new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue.js!’
}
})
</script>
</body>
</html>
new Vue（）相當於新建了一個Vue對象。
el: ‘#app’,是選擇器
data: {
message: 'Hello Vue.js!'
}
是數據，如果要增加數據，在data添加就可以：
data: {
message: ‘Hello Vue.js!’,
name:’簡慶旺’
}
我們輸出下：
<div id=”app”>
<p>{{ message }}</p>
<p>{{name}}</p>
</div>
得到：
Vue.js
創建多個vue.js對象：
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
name:'簡慶旺'
}
})
new Vue({
el:'#school',
data:{
school_name:'永定一中',
address:'福建省龍岩市永定區',
type:'高中'
}
})
</script>
我們來看看兩個綁定的div:
<div id=”app”>
<p>{{ message }}</p>
<p>{{name}}</p>
</div>
<div id=”school”>
<p>{{ school_name }}</p>
<p>{{ address }}</p>
<p>{{ type }}</p>
</div>
輸出結果：
vue.js新建多個對象
第一個綁定的 對象el: ‘#app’對應<div id=”app”></div>，第二個綁定的 對象el:’#school’對應<div id=”school”></div>。好了，到這裡我們總結下，每次新建一個js對象都是 new Vue（），不同的只是el對應綁定的模塊。
本人博客地址：創建Vue.js對象：我的第一個Vue.js輸出信息 原文：http://www.wangtuizhijia.com/archives/196
