Vue 循环、点击、双向绑定

vue js 的简介：

Vue.js的特性如下：
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
创始人：尤雨溪

一、常用指令
1.v-for：对数组或对象进行循环操作
例：

<div id="banner">
    <ul>
        <li v-for="value in arr">{{value}}</li>
    </ul>
</div>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#banner',
    data:{
        arr:[1,2,3,4,5]
    }
    })
</script>

2.v-on:绑定一个事件，后面跟事件名 简写：@事件名=“函数”
例：

   <div id='itany'>
   <button v-on:click='alt'>按钮</button>
  </div>

<script src='js/vue.js'></script>
<script>
var vm=new Vue({
       el:'#itany',
       data:{
           msg:'hello vue'
       },
       methods:{
          alt:function(){
              alert(vm.msg)
              alert(this.msg)
          }     
       }
   })
</script>

3.v-model:双向绑定，一般用于表单元素
例：

  <div id='itany'>
  <input type="text" v-model='msg'>
   <p>{{msg}}</p>
   </div>
<script src=' vue.js'></script>
<script>

   new Vue({
       el:'#itany',
       data:{
           msg:''
       }
   })
</script>

练习：
制作一个水果表格

    <div class="top">
    <table border='1' cellspacing="0">
       <thead>
           <tr>
               <th>数量</th>
               <th>名称</th>
               <th>价格</th>
           </tr>
       </thead>
        <tr v-for="value in arrs">
            <td>
                {{value.num}}
            </td>
            <td>
                {{value.name}}
            </td>
            <td>
              {{value.many}}
            </td>
                
            
        </tr>
    </table>
    </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:".top",
        data:{
            arrs:[
            {num:"1",name:"香蕉",many:"1"},
            {num:"1",name:"苹果",many:"3"},
            {num:"1",name:"橘子",many:"3"},
            ]
        }
    })
</script>

作业：

    <div class="top">
   <input type="text" name="" v-model="inp">
   <button v-on:click="btn">添加</button>
   <ul>
       <li v-for="(value,index) in arr">
           {{value}}
           <button v-on:click="btn1(index)">删除</button>
       </li>
   </ul>
  </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:".top",
        data:{
            arr:["草莓","荔枝","葡萄"],
            inp:""
        },
        methods:{
            btn:function(){
                this.arr.push(this.inp),
                this.inp=''
            },
            btn1:function(ind){
                this.arr.splice(ind,1)
            }
    }
    })
</script>