1.v-model双向数据绑定

v-model主要用于表单元素

<div id="itany">
        <div>
            <input type="text" v-model="name">//绑定span中的name
            <span>你的名字是：{{name}}</span>
        </div>
        <br>
        <div>
            <input type="text" v-model="age">//绑定span中的age
            <span>你的年龄是：{{age}}</span>
        </div>
        <br>
</div>

Vue.js部分
<script>
        new Vue({
            el:"#itany",
            data:{
                name:"",
                age:""
            }
        })
</script>

2.v-on 点击切换

v-on是用来绑定事件

methods:{}中是存放函数（方法）的；

Vue中的方法想要用Vue中的属性需要用到this；

<div id="itany">
        <p>{{name}}</p>
        <button v-on:click="fun1">点击</button>
</div>

Vue.js部分
<script>
        new Vue({
            el:"#itany",
            data:{
                name:"路飞",
                name2:"娜美"
            },
            methods:{
                fun1:function(){
                    /*this.name= "索隆";*/     //第一种方法
                    this.name = this.name2;  //第二种方法 点击时将name2值赋给name1；                    
                    console.log(this.name);
                }
            }
        })
</script>

3.添加及删除

<div id="iy">
        <input v-model="a">
        <button v-on:click="fun1">点击添加</button>
        <ul>
            <li v-for="(val,index) in arr">{{val}}<button v-on:click="fun2(index)" >删除</button></li>
        </ul>
</div>
<script>
        new  Vue({
            el:"#iy",
            data:{
                arr:["吃饭","睡觉","打豆豆"],
                a:""    //定义一个空字符串将他绑定到input标签上
            },
            methods:{
                fun1:function(){
                    this.arr.push(this.a),  //push给数组末尾添加新元素
                            this.a=""
                },
                fun2:function(ind){
                    this.arr.splice(ind,1);  //splice从数组中删除元素，第一个值是从哪删除，第二个是删除几个
                }

            }
        })
</script>