2018-09-11

前端流行的框架：vue Angular React

vue是最容易学习的 是由个人维护的 操作元素最方便 简化dom操作

Vue.js的作者为Evan You（尤雨溪），曾任职于Google Creative Lab，虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的AngularJs，下面我会将Vue与Angular（Angular 1.0+版本）做一些简单的比较。

Vue的主要特点就和它官网（http://cn.vuejs.org/）所介绍的那样：

（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化

<div class="box">

{{msg}}

</div>

<script src="js/vue.js"></script>

<script>

new Vue({

                  el:".box"            //  el:element元素   获取选择器

                  data:  {   //   写数据

                            msg："hello worder"

}  

})

</script>

1.v-for遍历数组

(1)value in arr 遍历数组中的元素

(2)(value,index) in arr 遍历数组中的元素和数组下标

2.v-for遍历obj对象

(1)value in obj 遍历obj对象中的值

(2)(value,key) in obj 遍历obj对象中的值和键

(3)(value,key,index) in obj 遍历obj对象中的值、键和索引

循环数组

<div class="box">
       <ul>
              <li v-for="value in arr">{{value}}</<li>
        </ul>
</div>
<script src="js/vue.js"></script>
<script>
         new Vue({
                  data:  {   //   写数据
                          arr:[1,2,3,4,5]
}   
})

循环obj

      <ul>
              <li v-for="value in  obj">{{value}}</<li>
        </ul>
<script src="js/vue.js"></script>
<script>
         new Vue({
                  data:  {   //   写数据
                         obj:{name:"jack",age;18}
}   
})

循环数组索引

<ul>
           <li v-for="(val,index) in arr">{{index}}={{val}}</li>
  </ul>
<script src="js/vue.js"></script>
<script>
         new Vue({
                  data:  {   //   写数据
                       arr:[1,2,3,4,5]
}   
})

循环obj的键

<ul>
           <li v-for="(val,index) in obj">{{index}}={{val}}</li>
  </ul>
<script src="js/vue.js"></script>
<script>
         new Vue({
                  data:  {   //   写数据
                         obj:{name:"jack",age:18}
}   
})

循环数组中的对象

<ul>
           <li v-for="value in arrs">{{value.name <http://value.name/>}}{{value.age}}</li>
   </ul>
<script src="js/vue.js"></script>
<script>
         new Vue({
                  data:  {   //   写数据
                         arrs:[
                                   {name:"苹果",age:8},
                                    {name:"李子",age:12},
                                      {name:"提子",age:18}
                             ]
}   
})

建立一个表格 书写中不带有编号 但在浏览器中显示编号

<table border="1" bordercolor="black"  cellspacing="0" >
          <thead>
               <tr>
                  <td>编号</td>
                  <td>名字</td>
                  <td>价格</td>
               </tr>
          </thead>
           <tbody>
                  <tr v-for="(value,index) in arrs">
                   <td>{{index+1}}</td>
                   <td>{{value.name <http://value.name/>}}</td>
                   <td>{{value.age}}</td>
                   </tr>
           </tbody>
       </table>
<style>
     table{
          width:300px;
         text-align: center;
}
</style>
<script src="js/vue.js"></script>
<script>
         new Vue({
                  data:  {   //   写数据
                         arrs:[
                                   {name:"苹果",age:8},
                                   {name:"李子",age:12},
                                   {name:"提子",age:18}
                             ]
}   
})

建立一个表格 书写编号 浏览器中也可以看到编号

<table border="1" bordercolor="black"  cellspacing="0" >
          <thead>
               <tr>
                  <td>编号</td>
                  <td>名字</td>
                  <td>价格</td>
               </tr>
          </thead>
           <tbody>
                  <tr v-for="value in arrs">
                   <td>{{value.num}}</td>
                   <td>{{value.name <http://value.name/>}}</td>
                   <td>{{value.age}}</td>
                   </tr>
           </tbody>
       </table>
<style>
     table{
          width:300px;
         text-align: center;
}
</style>
<script src="js/vue.js"></script>
<script>
         new Vue({
                  data:  {   //   写数据
                         arrs:[
                                   {num:1,name:"苹果",age:8},
                                   {num:2,name:"李子",age:12},
                                   {num:3,name:"提子",age:18}
                             ]
}   
})