直接引入vue.js

vue模塊化用了段時間，現在以直引vue.js的方式小小總結下

<meta charset="UTF-8">

<!-- 引入樣式 -->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<link rel="stylesheet" href="../jsBase/lib/element.css">

<div id="app">
   <div style="min-height: 900px;background-color: white">
       {{name}}
       <button @click="testaxios" class="primary">axios</button>
       <button @click="testhttp" class="primary">http</button>
       <button @click="dcurcomponent" class="primary">curcomponent</button>
        <br><br><br>
       <!--//組件動態切換-->
       <component v-bind:is="curcomponent"></component>
       <br><br><br>
       -----------------------------
       <br>
       {{topppppppppmsg}}
       <tdodo :todo-data="groceryList" @child-msg='toPppp'></tdodo>
        <br><br><br>
       ======================================================
       <tdottt/>
   </div>
</div>

<div id="tdo">
    <div style="min-height: 100px;background-color: gray">
        {{name}}
         <button @click="tdaoM" class="primary">tdaoM</button>
        {{pingxing}}
        <br><br>
    </div>
</div>


<div id="tdottt">
    <div style="min-height: 100px;background-color: gray">
        {{name}}
         <button @click="tdotttM" class="primary">tdotttM</button>
    </div>
</div>

<div id="tdodo">
    <div style="min-height: 200px;background-color: gray">
        {{names}}
         <button @click="cMethod" class="primary">cMethod</button>
        <br>
        -----------------------------------------------------------
        <template>
            <div v-for="(item,index) in todoData">
                {{item}}
            </div>
        </template>

        <br>
        =============================================================
        <br>
        <button @click="toParent" class="primary">toParent</button>
    </div>
</div>

<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="../jsBase/lib/vue.js"></script>
<!-- 引入組件庫 -->
<script src="../jsBase/lib/element.js"></script>
<script src="../jsBase/lib/axios.js"></script>
<script src="../jsBase/lib/vueresource.js"></script>
 <!-- 引入組件庫 -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->

<script>
    Vue.http.headers.common['authorization'] = 'mrbase64 mrrest:YWRtaW4mYWRtaW4=';
    Vue.http.headers.common['Content-Type'] = 'application/json';
    //平行組件之間傳值
    const event = new Vue();
    //全局組件1
   Vue.component("tdo",{
        template:"#tdo",
        data: function () {
            return {
                name:'bbbbbbbbbbbb',
                pingxing:''
            }
       },
        mounted:function() {
            event.$on ('tdottt-tdo',(val)=>{
                 this.pingxing = val ;
            });
        },
       methods:{
            tdaoM:function(){
                alert('pppppppppppppppppp')
            },
       }
    });
   //全局組件2
   Vue.component("tdottt",{
        template:"#tdottt",
        data: function () {
            return {
                name:'tdotttMtdotttM'
            }
       },
       methods:{
            tdotttM:function(){
                 event.$emit('tdottt-tdo','tdottt-tdotdotttMtdotttM');
            }
       }
    });

   //私有組件
   var tdodo = Vue.extend({
        template: '#tdodo',
        data: function () {
            return {
                names:'todooooooooooooooooooo'
            }
        },
        props: {
          todoData: {
              type: Array,
              default: []
          }
        },
        methods:{
            cMethod:function(){
                alert('llllllllllllllllllllllll')
            },
            toParent:function(){
                this.$emit("child-msg", '子組件向父組件傳值')
            }
        }
    });
   // 全局組件
    new Vue({
        el: '#app',
        data: function () {
            return {
                name:'this is a test',
                curcomponent:'',
                groceryList: [
                    { id: 0, text: '父組件通過todo-data向子組件tdodo傳值' },
                ],
                topppppppppmsg:''
            }
        },
        components: {
            tdodo: tdodo
        },
        methods: {
            testaxios:function () {
                axios(
                    {
                      method:'post',
                      url:'http://127.0.0.1:8081/rest/magicbox/serial',
                      contentType: 'application/json',
                      data:{

                      },
                     headers: {
                         // 'Content-Type': 'application/json;charset=UTF-8',
                         'authorization':'mrbase64 mrrest:YWRtaW4mYWRtaW4='
                      }
                  }
                ).then(function (res) {
                    console.log(res)
                }).catch(function (err) {
                    console.log(err)
                });
            },
            testhttp:function () {
                this.$http.post(
                    'http://127.0.0.1:8081/rest/magicbox/serial',
                    {}
                ).then(
                    function (res) {
                        console.log(res)
                    },
                    function (err) {
                        console.log(err)
                    }
                )
            },
            dcurcomponent:function(){
                this.curcomponent='tdo'
            },
            toPppp:function(val){
                this.topppppppppmsg = val;
            }

        }

    })
</script>