vue知识点

1，vue相对于Angular和React来说是最容易学习的一个框架；

2，vue由华人由雨溪个人维护；

3，vue操作元素更方便，并且也简化了DOM操作；

4，当创建一个新的vue框架时，new Vue 这里的vue要注意开头大写，且 创建一个新的vue框架需要有一个选择器作为容器来承载，id选择器，class选择器等皆可；

5，可以在vue.js里对dom元素进行更改；

6，vue中的data是用来存放数据的地方；

7，vue指令：v-for，将数组，对象，或是文字信息等需要使用的值，在dom中循环遍历，例：

 <div class="text">
   <ul>
     <li v-for="val in arr">{{val}}</li>
   </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
      el:'.text',
      data:{
         arr:[1,2,3]
   }
  })
</script>

8，v-for循环 值和下标 写法为 ：

<ul>
  <li v-for="(val,index) in arr">{{index}}=>{{val}}</li>
</ul>

9，用vue制作table表格：

 <div class="text">
    <table border="1" cellspacing="0" style="width:300px;text-align:center">
       <thead>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
      <thead>
      <tbody v-for="(val,index) in arrs">
        <td>{{index+1}}</td>
        <td>{{val.pname}}</td>
        <td>{{val.price}}</td>
      </tbody>
   </table>
</div>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el:'.text',
    data:{
       arrs:[
          {pname:'桃子'，price：'5'},
          {num:2,pname:'苹果',price：'4'},
          {num:3,pname:'香蕉',price:'3'}
       ]
    }
  })
</script>