1. vue基础：
一套用于构建用户界面的渐进式框架，是由底向上逐层应用。
new Vue（{}） 是vue实例 ，切记逗号隔开
<html>
<head>
<meta chatset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">
<ul>
<li>{{num}}</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue（{
el：".box1", //el是element（要素 ）的缩写，用来选用选择器的。
data：{num:[1,2,3]} //data是存放数据的，在页面中出现的是值，需要用
俩个大括号引入属性名。
}）
</script>
## 2.vue指令
### 1>数组
<div class="box2">
<ul>
<li v-for=“value in num”>{{value}}</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue({
el：".box2",
data:{
num[1,2,3]
}
})
</script>
### 2>对象
<div class="box3">
<ul>
<li v-for=“value in obj”>{{value}}</li>
<li v-for=“value in obj”>{{value，index}}</li>
数组中第一个值为值，第二个值为下标；
对象中第一个值为属性，第二个值是属性值。
</ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue({
el：".box3",
data:{
obj：{
name：“皮卡丘”，
age：5
}
}
})
</script>
### 3>数组对象
<div class="box4">
<ul>
<li v-for=“value in arr”>
{{value.name}}
{{value.age}}
同：js中对象的遍历。
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue({
el：".box4",
data:{
arr：[
{name:鲁班，
color：orange
}，
{name:甄姬，
color：blue
}
]
}
})
</script>
## 3.表格
<table class=“box5”>
<thead>
<tr>
<th>编号</th>
<th>商品</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for=“（val,index） in arr”>
<td>{{index+1}}</td>
<td>{{val,friut}}</td>
<td>{{val,price}}</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue（{
el：“.box5”，
data：{
arr：[
{friut:“apple”，
price：3
}，
{friut：“banana”，
price：2
}
]
}
}）
</script>
</body>
</html>
网友评论