1.下载并且安装vue.js，输入指令 upm install vue，下载成功之后出现文件即可。
- vue相对于Angular、react来说是最容易学习的一种框架，vue的操作元素更方便，简化了DOM的操作。
3.vue的指令：v-for 当建立一个新的vue框架时，用new Vue； 开头的v要大写，在创建vue框架前要先创建一个选择器来承载，例如：id选择器、class选择器。
4.vue是一套构建用户界面的渐进式框架，vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组。
例子：使用vue制作的table表单
<body>
<div id="itany">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>顺序</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="value in arrs">
<td>{{value.num}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arrs:[
{num:1,name:"鸣人",age:18},
{num:2,name:"佐助",age:19},
{num:3,name:"小樱",age:17}
]
}
})
</script>
</body>
效果如下：
图片.png
例子：使用vue中的数组，对象等；
<body>
<div id='itany'>
{{msg}}
{{num}}
{{obj}}
{{arr}}
<ul>
<li v-for="val in arr">{{val}}</li>
<li v-for="(val,index) in arr">{{val}}-{{index}}</li>
</ul>
<ul>
<li v-for="value in obj">{{value}}</li>
<li v-for="(value,index) in obj">{{index}}-{{value}}</li>
</ul>
<ul>
<li v-for="val in arrs">{{val.num}}-{{val.name}}-{{val.age}}</li>
</ul>
</div>
<script src='node_modules/vue/dist/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'前端一班',
num:'12',
arr:[1,2,3,4],
obj:{name:"杰克",age:17,hobby:"台球"},
arr:[1,2,3,4,5],
}
})
</script>
</body>
效果如下：
图片.png
网友评论