一陷虎、vue.js基礎(chǔ)
1.vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架
2.是一個(gè)輕量級(jí)的MVVM框架(Model-View-ViewModel)框架，其實(shí)就是數(shù)據(jù)的雙向綁定
3.最簡單的一個(gè)vue.js案例
?二杠袱、vue.js常用指令
1.v-for對(duì)數(shù)組或?qū)ο筮M(jìn)行循環(huán)操作
案例：
一：v-for
body部分:
?{{value.name}}?
{{value.name}}
{{value.price}}
?
js部分:
new Vue({
? ? el:'#app',
? ? data:{
? ? ? ? arr:[1,2,3,4,5],
? ? ? ? obj:{name:'jack',old:'18'},
? ? ? ? arrs:[
? ? ? ? ? ? {num:1,name:'香蕉',price:3},
? ??????????{num:2,name:'蘋果',price:2},
? ??????????{num:3,name:'鴨梨',price:1},
????????]
????}
})
2.v-model雙向綁定,用于表單元素
案例:
dody代碼:
{{message}}
js代碼:
new Vue({
? ? el:'#app',
? ? data:{
? ? ? ? message:''
????}
})
效果:表單下面的文字會(huì)隨著表單中的文字的變化而變化
3.v-on事件監(jiān)聽
案例
點(diǎn)擊button會(huì)彈出111
body部分:
? ? 按鈕
js部分:
new Vue({
? ? el:'#app',
? ? data:{
? ? ? ? message:'hello World'
????},
? ? methods:{
? ? ? ? alt:function(){
? ? ? ? ? ? alert(111)
????????}
? ? ?}
})
4案例1：課下小練習(xí)的效果
<尚猿！DOCTYPE html>
<html? lang="en">
????????? <head>
??? ? ? ? ? ? ? ? ? <meta charset="UTF-8">
??????????????????? <title>Document</title>
???????? </head>
??????? <body>
??? ? ? ? ? ? ? ? ? <div id='itany'>
???????? ? ? ? ? ? ? ? ? ?? <input type='text' name='' v-model='fruit'>
?????????? ? ? ? ? ? ? ? ? <button v-on：click=‘a(chǎn)dd’>添加食物</button>
??????????? ? ? ? ? ? ? ? ? ? ? ? ?? <ul>
??????????????????????????????????????? ? ? ? ? ?? <li v-for='value in arr'>{{value}}</li>
??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>
??? ? ? ? ? ? ? ? ? </div>
?????? ? ? ? ? ? ? <script src='vue.js'></script>
????????????????? <script type='text/javascript'>
???????????? ? ? ? ? ? ? ? ?? new Vue({
?????????????? ? ? ? ? ? ? ? ? ? ? ? ? ?? el:'#itany',
????????????????????????????????????????? data:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? arr:['面包','餃子','包子'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? fruit:''},
??????????????????????????????????????? methods:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? add:function(){
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.fruitList.push(this.fruit)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.fruit=''
?????????????????????????????????????????????????????? },
?????????????????????????????????? delt:function(index){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.fruitlist.splice(index,1);
????????????????????????????????????????????????????? },
???????????????????????????????????????????????????? },
???????????????????????????????? });
? ? ? ? ? ? ? ? ? </script>
???????????? </body>
</html>
