Vue.js是一款渐进式的框架，Vue相对于市面上流行的React和Angular，入门比较简单 。
Vue.js作者尤雨溪，美籍华人，现任职于Google。\
Vue.js官网：https://cn.vuejs.org/
运用Vue的格式
需要先联入
在使用Vue结构
new Vue({
el: //输入需要获取的元素
data: //输入需要的数据
})
实例
<body>
<div>
{{mag}}
<h1>{{mag}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: 'div',
data:{ mag:'hello vue' }
})
</script>
</body>
v-for
Vue中的v-for，相当于原生js中的for循环
v-for直接写在需要运用的标签内
实例
循环输出数组
<body>
<div>
<ul>
<li v-for='val in arr'>{{val}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'div',
data:{arr:[1,2,3,4] }
})
</script>
</body>
循环输出对象
<body>
<div>
<ul>
<li v-for='val in obj'>{{val}}<li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'div',
data:{
obj:{
name:'狗',
age:5
}
}
})
</script>
</body>
循环输出数组下标
<body>
<div>
<ul>
<li v-for='(val,index) in arr'>{{index}}---{{val}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'div',
data:{
arr:[1,2,3,4]
}
})
</script>
</body>
网友评论