加载vue.js的几种方法

一、直接链接加载

直接从vue的服务器请求下来，缺点是可能会受到源服务器的速度影响，会比较慢。
<script src="https://unpkg.com/vue/dist/vue.js"></script>

二、本地资源加载

已经放在本地文件夹里了
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

三、模板加载

image.png

下面是app.vue文件的代码：
它作为一个组件，使用的export来将自己导出

<template>
    <div id="app">
        <Mycomponent ref="child" @myEvent="mine" :parentParams="params">
        </Mycomponent>
        <button @click="clickMethod"></button>
    </div>
</template>
<script></script>
<script>
    import Mycomponent from './components/MyComponent.vue'

    export default {
        name: 'App',
        data() {
            return {
                params: "哈哈哈"
            }
        },
        components: {
            Mycomponent
        },
        mounted() {

        },
        methods: {
            mine(a) {
                console.log('调用父模块方法' + a)
            },
            clickMethod() {
                console.log(this.$refs['child'].age)
            }
        }

    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
    
    p {
        color: #42B983;
    }
</style>