17.vue文件中代码的写法

vue格式的文件写法

.vue结尾的文件就好比是一个独立的组件，它分为三个部分，首先是template，这里面写html结构，然后是script，这里面写的是需要导出的组件对象，最后一个是style，这里面写的是样式

<template>
    <div>
        <h2>{{msg}}</h2>
        <h2>{{name}}</h2>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            msg: 'hello world2222',
            name: 'lucy'
        }
    }
}
</script>
<style >
    h2 {
        font-size: 70px;
        color: brown;
    }
</style>

main.js中的内容，如下：

import app from './vue/demo.vue'
new Vue({
    el: "#app",
    template: '<app></app>',
    data: {
    },
    components: {
        app
    }
})

在配置好webpack之后，我们就可以直接写vue格式的文件了