v-for="val /value（值） in arr "用來循環(huán)數(shù)組涝缝、對象
v-model=" "雙向數(shù)據(jù)綁定枉层，用于表單元素
v-on: 事件名=“ ” v-on:click="函數(shù)名” 綁定事件
v-bind:屬性名 src=“值” 綁定屬性
v-show=“ ”控制元素的現(xiàn)實和隱藏 使用display:none來隱藏
點(diǎn)擊切換圖片 選項卡

1.V-for

<ul>
            <li v-for="arrs in arrs">{{arrs}}</li>
 </ul>

<script>
        new Vue({ 
            el:'#itany',
            data:{
                arr:[1,2,3,4,5],
            }
        })
    </script>

2.V-model

<div id='app'>
            <input v-model="message">
            <p>{{message}}</p>
</div>
<script src="vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var arr = new Vue({
              el: '#app',
              data: {
                message: 'Hello Vue.js!'
            }
        })
        </script>

3.V-on

 <div id='itany'>
       <button v-on:click='alt'>按鈕</button>
   </div>
<script>
      var vm=new Vue({
            el:'#itany',
            data:{
                msg:'hello'
            },
            methods:{
                alt:function(){
                    console.log(vm.msg);
                }
            }
        }
    </script>

4.V-bind

               <div id="itany">
            <img v-bind:src="ct" v-on:click="cts">
        </div>
        <script src="vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            new Vue({
                el:'#itany',
                data:{
                    ct:'image/1.bmp'
                },
                methods:{
                    cts:function(){
                        this.ct='image/2.jpg'
                    }
                }
            })
        </script>

5.V-show

<div class='aa'>
     <h1>{{me}}</h1>
     <h3 v-show="seen">{{me}}</h3>        
     <button v-on:click="fun">回來</button>          
</div>
<script>
      new Vue({
            el:".aa",
            data:{
                  me:"才才",
                  me:“桶桶”,
                  seen:false      
            }
            methods:{
                  fun:function(){
                        this.seen=!this.seen          
                  }
            }
      })
</script>

6.點(diǎn)擊切換圖片

<div id="itany">
    <img v-on:click="alt" v-bind:src="url" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
   new Vue({
        el:"#itany",
        data:{
            url:"../images/1.jpg",
            aa:"../images/4.jpg"
        },
        methods:{
            alt:function(){
                this.url=this.aa
            }
        }
    })
</script>

7.選項卡

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
            float: left;
            border: 1px #000000 solid;
            text-align: center;
            width: 50px;
            cursor: pointer;
        }
 #itany{
            margin-left: 30px;
            margin-top: 30px;
        }
    </style>
<div id="itany">
    <img v-bind:src="url" alt="">
   <ul>
        <li v-for="(val,index) in urll" v-on:click="alt(index)">{{index+1}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            url:"../images/1.jpg",
            urll:["../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg"]
        },
        methods:{
            alt:function(ind){
                this.url=this.urll[ind]
            }
        }

    })
</script>