1.vue的含義是什么吏口？
Vue（發(fā)音為/vju?/术瓮，類似于視圖）是用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他單片框架不同踊东，Vue是從頭開始設(shè)計(jì)的北滥，可逐步采用。核心庫僅側(cè)重于視圖層闸翅，易于獲取并與其他庫或現(xiàn)有項(xiàng)目集成再芋。另一方面，當(dāng)與現(xiàn)代工具和支持庫結(jié)合使用時(shí)坚冀，Vue完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供動(dòng)力济赎。
2.引入的兩種方法：
? script引入? <script? src="js/vue.js"?>???</script>
? git的安裝，在Git Bash Here里面輸入（$ npm install vue）;
3.js的三種框架：①vue ②angular ③react
? ? npm空格? ? install安裝? ? vue安裝指令
4.用vue輸入hello vue
eg:
? ? ? ? {{msg}}
js/vue.js'>
? ? ? ? new Vue({? ? //element元素? ? ? ? ?Element對象表示HTML里的元素
? ? ? ? ? ? el:'#itany',? ?
? ? ? ? ? ? data:{? ? ? //寫數(shù)據(jù)
? ? ? ? ? ? ? ? msg:'hello vue'
? ? ? ? ? ? }
? ? ? ? })
顯示屏?xí)@示：hello? vue
5.vue里面v-for的使用例子：
? ? {{msg}}
? ? {{num}}
? ? {{arr}}
? ? {{obj}}? ? ? //{}代表對象? {{}}會(huì)和下面的相聯(lián)系
{{val}}
{{val}}
{{index}}=={{val}}
{{index}}=={{val}}
{{val.num}}--{{val.pname}}--{{val.price}}
js/vue.js">
? ? new Vue({//element元素
? ? ? ? el:'#itany',
? ? ? ? data:{//寫數(shù)據(jù)
? ? ? ? ? ? msg:'Hello Vue',
? ? ? ? ? ? num:12,
? ? ? ? ? ? arr:[1,2,3,4,5,6,7,8,9],
? ? ? ? ? ? obj:{name:'jack',age:18},
? ? ? ? ? ? arrs:[
? ? ? ? ? ? ? ? {num:1,pname:"香蕉",price:3},
? ? ? ? ? ? ? ? {num:2,pname:"蘋果",price:4},
? ? ? ? ? ? ? ? {num:3,pname:"西瓜",price:0.3}
? ? ? ? ? ? ]
? ? ? ? }
? ? })
顯示屏顯示的樣子：
Hello Vue 12 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] { "name": "jack", "age": 18 }
1
2
3
4
5
6
7
8
9
jack
18
0==1
1==2
2==3
3==4
4==5
5==6
6==7
7==8
8==9
name==jack
age==18
1--香蕉--3
2--蘋果--4
3--西瓜--0.3
6.vue中table的使用：
Title
? ? ? ? table{
? ? ? ? ? ? width:300px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
編號(hào)
名稱
價(jià)格
{{val.num}}
{{val.pname}}
{{val.price}}
編號(hào)
名稱
價(jià)格
{{index+1}}
{{val.pname}}
{{val.price}}
js/vue.js">
? ? new Vue({//element元素
? ? ? ? el:'#itany',
? ? ? ? data:{//寫數(shù)據(jù)
? ? ? ? ? ? arrs:[
? ? ? ? ? ? ? ? {num:1,pname:"香蕉",price:3},
? ? ? ? ? ? ? ? {num:2,pname:"蘋果",price:4},
? ? ? ? ? ? ? ? {num:3,pname:"西瓜",price:0.3}
? ? ? ? ? ? ],
? ? ? ? ? ? ars:[
? ? ? ? ? ? ? ? {pname:"香蕉",price:3},
? ? ? ? ? ? ? ? {pname:"蘋果",price:4},
? ? ? ? ? ? ? ? {pname:"西瓜",price:0.3}
? ? ? ? ? ? ]
? ? ? ? }
? ? })
顯示：
