創建Vue.js對象：我的第一個Vue.js輸出信息
<!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
創建Vue.js對象：我的第一個Vue.js輸出信息