1.Vue

1.Vue （国内） Angular（国外） React（国外）前端流行语言框架
vue最容易学习，为轻量级语言，它的创始人是尤雨溪（华人）
vue操作元素更方便，简化了DOM操作

2.Vue指令

v-for="val /value（值） in arr "用来循环数组、对象
v-model=" "双向数据绑定，用于表单元素
v-on: 事件名=“ ” v-on:click="函数名” 绑定事件

3.v-model

p中与input中输出的内容一致

<div id="itany">
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            msg:"hello"
        }
    })
</script>

4.v-on

<div id="itany">
    <p>{{msg}}</p>
    <button v-on:click="alt">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#itany",
        data:{
            msg:"hello"
        },
         methods:{
             alt:function(){
                 //alert(000)
                console.log(this.msg)
                 //console.log(vm.msg)
             }
         }
    })
</script>

5.点击切换文字

只能切换一次

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

6.点击来回切换文字

<div id="itany">
    <p>{{msg}}</p>
    <button v-on:click="alt">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
    new  Vue({
        el:"#itany",
        data:{
            msg:"hello",
            flag:true

        },
        methods:{
            alt:function(){
                //this.msg="hello,vue"
                //this.msg=this.txt
                if(this.flag){
                    this.msg="hello,vue"
                    this.flag=false
                }else {
                    this.msg="hello"
                    this.flag=true
                }
            }
        }
    })
</script>

7.添加删除

<div id="itany">
    <input type="text" v-model="msg">
    <button v-on:click="add">添加</button>
    <ul>
        <li v-for="(val,index) in arr">
            {{val}}
            <button v-on:click="delt(index)">删除</button>
        </li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{

           arr:["吃饭","睡觉","打游戏"],
            msg:""
        },
        methods:{
            add:function(){
                this.arr.push(this.msg)
                this.msg=""
            },
            delt:function(ind){
                this.arr.splice(ind,1);
            }

        }
    })
</script>

效果如图所示：

Image 1.png