一厂抽、vue.js基礎(chǔ)
1.vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架
2.是一個輕量級的MVVM框架(Model-View-ViewModel)框架需频，其實(shí)就是數(shù)據(jù)的雙向綁定
3.最簡單的一個vue.js案例
<div id='itany'>{{msg}}</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{//存儲數(shù)據(jù)
msg:'hello vue'
}
})
</script>
二、vue.js常用指令
1.v-for對數(shù)組或?qū)ο筮M(jìn)行循環(huán)操作
案例：
<div id='itany'>
<ul>
//數(shù)組
//<li v-for='value in arr'>{{value}}</li>
//下標(biāo)
//<li v-for='(value,index) in obj'>{{index}}=>{{value}}</li>
// 數(shù)組對象
<li v-for='value in arrs'>
{{value.num}}
{{value.name}}
{{value.price}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arr:[1,2,3,4,5,6],
obj:{name:'jack',age:18,hobby:'聽音樂'},
arrs:[
{num:1,name:'蘋果',price:3},
{num:2,name:'香蕉',price:2},
{num:3,name:'鴨梨',price:1}
]
}
})
</script>
2.v-model雙向綁定,用于表單元素
案例:
<div id="itany">
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
}
})
</script>
3.v-on：事件（函數(shù)或方法） 簡寫@:函數(shù)
methods是一個方法筷凤，點(diǎn)擊事件執(zhí)行一個方法
案例：
<div id='itany'>
<button v-on:click='alt'>按鈕</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
methods:{
alt:function(){
alert(this.msg)
}
}
})
</script>
三昭殉、表格案例
<div id="itany">
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>編號</th>
<th>名稱</th>
<th>價格</th>
</tr>
</thead>
<tobody>
<tr v-for="value in arrs">
<td>{{value.編號}}</td>
<td>{{value.名稱}}</td>
<td>{{value.價格}}</td>
</tr>
</tobody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arrs:[
{編號:1,名稱:'香蕉',價格:25},
{編號:2,名稱:'鴨梨',價格:20},
{編號:3,名稱:'橘子',價格:15},
{編號:4,名稱:'西瓜',價格:10}
]
}
})
</script>
