v-model

v-model是双向数据绑定，用于表单元素。
v-model 用法：v-model='数据名'。

实例

<body>
    <div id=‘demo’>
        <input type='text' v-model='aa'>
   </div>
    <script src=''../js/vue.js''></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                aa:'Hellwo Vue'
            }
        })
    </script>
</body>

v-on

v-on是绑定事件
v-on用法：v-on：click=‘函数名‘

实例

<body>
   <div id="demo">
       <button v-on:click='alt'>点击</button>
   </div>
    <script src="../js/vue.js"></script>
    <script>  
        new Vue({
            el:"#demo",
            data:{
                msg:'123456'
            },
            methods:{
                alt:function(){
                    console.log(this.msg);
                }
            }
        })
    </script>
</body>

v-on鼠标点击文字变换效果
方法一

<body>
   <div id="demo">
       <p>{{mag}}</p>
       <button v-on:click='alt'>点击</button>
   </div>
   <script src="../js/vue.js"></script>
   <script>
        new Vue({
            el:'#demo',
            data:{
                mag:'123'
            },
            methods:{
                alt:function(){
                    this.mag='456'
                }
            }
        })
    </script>
</body>

方法二

<body>
    <div id="demo">
        <p>{{mag}}</p>
        <button v-on:click='alt'>点击</button>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                mag:'123',
                txt:'456'
            },
            methods:{
                alt:function(){
                    this.mag=this.txt
                }
            }
        })

v-on鼠标点击文字来回切换效果

<body>
    <div id="demo">
        <p>{{mag}}</p>
        <button v-on:click='alt'>点击</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                mag:'123',
                flag:true
            },
            methods:{
               alt:function(){
                   if(this.flag){
                       this.mag='456',
                       this.flag=false    
                   }else{
                       this.mag='123'
                       this.flag=true  
                   }
               }
           }
        })
    </script>
</body>

组合实例

添加列表

<body>
    <div id="demo">
        <input type="text" v-model='txt'>
        <button v-on:click='alt'>添加</button>
        <ul>
            <li v-for='(val,index) in arr'>{{val}}
                <button v-on:click='dele(index)'>删除</button>
            </li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                arr:['吃饭','睡觉','打游戏'],
                txt:''
            },
            methods:{
            alt:function(){
                this.arr.push(this.txt),
                this.txt=''
            },
            dele:function(ind){
                this.arr.splice(ind,1)
            }
        }
            
        })
    </script>