1.什么是vue?
Vue（发音为/vjuː/，类似于视图）是用于构建用户界面的渐进式框架。与其他单片框架不同，Vue是从头开始设计的，可逐步采用。核心库仅侧重于视图层，易于获取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue完全能够为复杂的单页应用程序提供动力。
2.vue的两种引入方式：
1,>script引入；
2.>git的安装，Git Bash Here里面输入（$ npm install vue）;
3.用vue输入hello vue；
4.vue-for的指令；
5.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany"> {{msk}}
<ul>
<li v-for="a in arr">{{a}}</li>
<li v-for="i in obj">{{i}}</li>
<li v-for="(val,index) in arr">{{index}}--{{val}}</li>
<li v-for="(value,ins) in obj">{{ins}}--{{value}}</li>
<li v-for="(val,index) in arrs">{{[val.name](http://val.name/)}} {{val.pname}} {{val.price}}</li>
</ul>
<table>
<thead border="1px">
<tr>
<th>编号</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in arrs">
<td>{{[val.name](http://val.name/)}}</td>
<td>{{val.pname}}</td>
<td>{{val.price}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
//element元素
el: "#itany"
, data: {
msk: "hello kitty"
, arr: [1, 2, 3, 4, 5]
, obj: {
name: "泰迪"
}
, arrs: [
{
name: "1"
, pname: "香蕉"
, price: "3"
}
, {
name: "2"
, pname: "苹果"
, price: "2"
}
, {
name: "3"
, pname: "橘子"
, price: "1"
}
]
}
})
</script>
</body>
</html>
网友评论