VUe簡介
Git下載vue:$ npm install vue。
Git官網:https://cn.vuejs.org/。
1,Vue.js 是什么
Vue.js(讀音 /vju?/,類似于 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也完全能夠為復雜的單頁應用程序提供驅動。
2,構造器
每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例 啟動的:
new Vue({
})
3,屬性和方法
每個 Vue 實例都會代理其 data 對象里所有的屬性:
new Vue({
el:"", //選中元素
data:{ //寫數據
}
})
4,循環數組
<div id='eq'>
<li v-for(value in arr)>{{value}}</li>
</div>
<script>
new Vue({
el:"",
data:{
arr:[1,2,3,4,5,6]
}
})
</script>
5,獲取數組的下標
<div id='eq'>
<li v-for='(index,value) in arr'>{{value}}---{{index}}</li>
</div>
<script>
new Vue({
el:'eq',
data:{
arr:[1,2,3,4,5,6]
}
})
</script>
6,循環數組(對象)
<div id='eq'>
<ul>
<li v-for='value in obj'>{{value.name}}</li>
</ul>
</div>
<script>
new Vue({
el:'#eq',
data:{
obj:=[
{name:'zhang',age:18,color:blue},
{name:'zhang',age:18,color:red},
{name:'zhang',age:18,color:baclk},
]
}
})
7,數組循環到表格中
<div id='eq'>
<table>
<thead>
<tr>
<td>編號</td>
<td>名稱</td>
<td>價格</td>
</tr>
</thead>
<tbody>
<tr v-for="value in arr">
<td>
{{value.a}}
</td>
<td>
{{value.b}}
</td>
<td>
{{value.c}}
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'eq',
data:{
arr:[
{a:1,b:蘋果,c:10}
{a:1,b:蘋果,c:10}
{a:1,b:蘋果,c:10}
]
}
})
</script>