標籤：地址 UI content 第一個 lan sage wan tar sch
<!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輸出資訊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
