1，
vue.js是一个简化了的javascript库相对于Angular React来说上手更简单
vue.js相比其他语言来说它是尤雨溪个人创建的语言
2，
v-for 对数组、对象、数组对象进行循环操作
哪一个html标签需要循环 就写在哪个元素上
使用v-for可以把obj的每个key对应的value值遍历出来，并且填到对应的li元素中
v-for除了可以使用在数组上之外还可以应用在对象上
3数组循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="text">
{{msg}}
<ul>
<li v-for='val in arr'>{{val}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({ //el element的缩写 可 以在Vue js里对dom元素进行更改
el:'.text',//只要是选择器皆可 id选择器 class选择器 各种选择器
data:{
msg:'hello vue',
arr:[1,2,3]
}
})
</script>
</body>
</html>
4v-for循环实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<ul>
<!--
<li v-for="value in arr">{{value}}</li>
<li v-for="v in obj">{{v}}</li>-->
<!-- 值 下标 下标对应值-->
<!--
<li v-for="(val,ind) in arr">{{ind}}-------{{val}}</li>
<li v-for="(val,ind) in obj">{{ind}}------{{val}}</li>
-->
<!-- val不是固定命名 只是一个值可以任意切换 但是v-for后的值与解析的内容值必须相同-->
<li v-for="val in arrs">{{val.num}}{{val.name}}{{val.price}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arr:[1,2,3],
obj:{name:'jack',age:'18'},
arrs:[
{
num:'1',
name:'lidandan',
price:'20'
},
{
num:'2',
name:'dongyue',
price:'200'
}
]
}
})
</script>
</body>
</html>
网友评论