17513365663
/
test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <div id="root">
        <h1 v-text="name+'!'">hello {{name}}</h1>
        <h2 v-text="age[1]+'!'"></h2>
        <h3 v-html="content"></h3>
        
        <!--  @click点击事件， @keyup点击键盘回车事件 -->

        <input type="button" value="v-on指令" v-on:click="doIt(2)">
        <input type="button" value="v-on简写" @click="doIt(5)">
        <input type="button" value="双击事件" @dblclick="doIt(6)">
        <input type="button" value="键盘" @keyup.enter="doIt(18)">

        <h3 @click="changeFood">{{food}}</h3>
        
        <h4 v-show="ifshow">demo1</h4>
        <h4 v-show="true">demo2</h4>
        <h4 v-show="false">demo3</h4>

        <h4 v-if="true">demo10</h4>
        <h4 v-if="false">demo11</h4>
        <!-- v-bind 指令的使用-->
</div>
    <div id="bind">
        <img v-bind:src="imgSrc" alt="">
         <img :src="imgSrc" alt="">

    </div>
        <div id="vue_for">
                <li v-for="(index,item) in school">
                        {{index}} : {{item}}
                </li>
        </div>
    
    <!-- v-model数据双向绑定 -->

        <input type="button" value="get请求" id="get">
        <input type="button" value="post请求" id="post">

    <script type="text/javascript">


            document.querySelector("#get").onclick = function(){
                axios.get("").then(function(response){

                    console.log(response);
                },function (err){

                })
            }


            const vue = new Vue({
                    el:'#root',
                    data:{
                        name:'zhangsan',
                        school:{
                            class:'163',
                            grade:'123'
                        },
                        age:['12','15'],
                        content: "<a href='www.baidu.com'>百度</a>",
                        food: "橘子",
                        ifshow: true
                    },
            
                    methods: {
                        doIt:function(a){
                            alert(a);
                        },
                        changeFood:function(){
                            this.food+="香蕉";
                            this.ifshow=false;
                        }
                    }
           
                });
           
            const vue_bind = new Vue({
                el:"#bind",
                data:{
                    imgSrc:"http://www.itheima.com/images/logo.png"
                },
                methods:{

                }
            })
           
            const vue_for=new Vue({
                el:"#vue_for",
                data:{
                   school:["a","b","c","d"]
                },
                methods:{

                }
            })
    </script>
</body>
</html>