首先，今天我们来了解一些Vue.js：
1.>Vue.js是什么？
Vue.js是一个用来开发web界面的前端库，它本身具有响应式编程和组件化的特点。
2.>引入vue.js的方式：
1.可以直接采用CDN;
2.可以通过NPM进行安装：
npm install vue
3.>链接vue：
<script src="../vue.js"></script>
4.>v-for实例：
<!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}} {{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}}</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 vue"
, 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>
<div class="logo">
<img src="./TB1eEgNwYZnBKNjSZFhXXc.oXXa-290-130.gif" alt="">
</div>
</body>
</html>
v-for为固定格式，vue中的for 循环val/value为一个随机数，可以用别的名字代替，但{{}}此处的名字要与val所在位置的名字一致；‘val in num’其中in为固定值，num与script中data里面的num一致，代表val在num中，在编辑过程中可根据需要改变val和num的值；
网友评论