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>