首页
   /       /   
Vue单文件组件
3月
24
Vue单文件组件
作者:大彭Sir    分类: 学习笔记

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
app.vue
<template>
    <Student></Student>
</template>
<script>
import Student  from './Student.vue'
export default {
    name:"App",
    components:{
        Student
    }
}
</script>
student.vue
<template>
    <div>
        <ul>
            <li>姓名:{{name}}</li>
            <li>年龄:{{age}}</li>
            <li>性别:{{sex}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"Student",
    data(){
        return{
        name:"小王",
        age:18,
        sex:"男"
        }
    }
}
</script>
<style scoped>

</style>
main.js
new Vue({
    el:"#app",
    template:"<App></App>",
    components:{
        App
    }
})

vue.js安装地址https://cn.vuejs.org/v2/guide/installation.html

本文标签:标签: VUE
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录