Vue.component 來定義全局組件
new Vue({ el: '#container '}) 在每個頁面內(nèi)指定一個容器元素
缺點：
*全局定義 (Global definitions) 強制要求每個 component 中的命名不得重復
*字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的
*不支持 CSS (No CSS support) 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
*沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器素挽，如Pug(formerly Jade) 和 Babel
html：
{{ message }}
</div>
js：var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="jie">
{{msg}}
{{num}}
{{obj}}
{{arr}}
</div>
<script>
new Vue({//vue實例
el:'#jie',//element
data:{
msg:'hello vue',
num:7,
obj:{name:'劫',age:'18'},
arr:[3,9,18]
}
})
</script>
</body>
</html>
[條件與循環(huán)]
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="jie">
<ul>
<table border=1 cellspacing="0">
<tr>
<th>編號</th>
<th>名稱</th>
<th>價格</th>
</tr>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</table>
</ul>
</div>
<script>
new Vue({
el:'#jie',
data:{
// arr:[1,2,3],
// obj:{name:'jie',age:'18'}
arrs:[
{num:1,name:'apple',price:3},
{num:2,name:'banana',price:5},
{num:3,name:'orange',price:4}
]
}
})
</script>
</body>
</html>
代碼2
