Vue.js 9.11
2018-09-11 本文已影响0人
月薪2k的前端程序员
1，
下载js库 npm install vue
vue 相对于Angular React 来说是相对于容易学习的框架
vue 是由尤雨溪个人维护
vue 操作元素更方便 简化了DOM
2，
v-for 对数组或对象进行循环操作
需要哪个元素（HTML的标签）循环，那么v-for就写在那个元素上
使用v-for可以把obj的每个key对应的value值遍历出来，并且填到对应的li元素中
v-for除了可以使用在数组上之外还可以应用在对象上
3，hello vue
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="itany">
{{num}}
{{arr}}
{{msg}}
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'.itany',
data:{
num:'abc',
arr:[1,2,3]
}
})
</script>
</body>
</html>
4，数组循环
<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>
5，table列表
<div id='itany'>
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:[
{pname:'香蕉',price:3},
{pname:'苹果',price:2},
{pname:'鸭梨',price:1}
]
}
})
</script> 
