vue笔记 9.10

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，数组循环

<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>

4，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>