引用 .vue 文件 后

引用  .vue 之前

MyCompo.js

import Vue from "vue";

const MyCompo = Vue.extend({
    template : `
        <div>
            <h1>我是MyCompo组件，我的a值是{{a}}，我的c值是：{{c}}</h1>
            <input type="button" value="+++" v-on:click="add"/>

        </div>
    `,
    props : ["c"],
    methods : {
        add : function(){
            this.c ++;
        }
    }
});

export default MyCompo;

引用  .vue 之后

MyCompo.vue

　//如果要封闭css作用域，在style中加 scoped

<style scoped>   
    div{
        color:red;
    }
</style>

<template>
    <div>我是组件{{a}} <button v-on:click="add">按我</button> {{m}}</div>
</template>

<script>
    export default {
        props : ["m"],
        data : function(){
            return {
                a : 100
            }
        },
        methods : {
            add : function(){
                this.a++;
            }
        }
    }
</script>

一切都被简化了，不需要写export default Vue.extend();