Vue-32、Vue单文件组件

1、School.vue

<template>
    <h1>{{schoolName}}</h1>
    <h2>{{address}}</h2>
    <button @click="showname">点我提示学校名</button>
</template>
<!---->
<script>
    export default {
        name: "School",
        data(){
            return{
                schoolName:'清华大学',
                address:'北京',
            }
        },
        methods:{
            showname(){
                alert(this.schoolName)
            }
        }
    }
</script>

<style scoped>

</style>

2、Student.vue

<template>
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
</template>

<script>
    export default {
        name: "Student",
        data(){
            return{
                name:'凡妹妹',
                age:'18',
            }
        },
    }
</script>

<style scoped>

</style>

3、App.vue

<template>
    <div>
        <School></School>
        <student></student>
    </div>
</template>

<script>
<!--    引入组件 -->
    import  School from './School.vue'
    import  Student from './Student.vue'
    export default {
        name: "App",
        components:{
            School,Student
        }
    }
</script>

<style scoped>

</style>

4、main.js

import App from './App.vue'
new Vue({
   el:'#root',
   components:{
       App
   }
});

5、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单文件组件语法</title>
</head>
<body>
    <div id="root">
        <App></App>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

你可能感兴趣的:(vue,vue.js,前端,javascript)