/**PageBeginHtml Block Begin **/ /***自定义返回顶部小火箭***/ /*生成博客目录的JS 开始*/ /*生成博客目录的JS 结束*/

Vue 非单文件组件

Vue  非单文件组件


1：文件结构

image

2：文件代码内容：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习一下单文件组件的语法</title>
</head>
<body>
    <div id="root">  </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>




3：文件代码内容：main.js

import App from "./App.vue";


const vm=new Vue({
    el:"#root",
    template:`    <App></App>    `,
    components: {
        App:App
    }

});


4：文件代码内容：App.vue

<!-- App.vue 为管理所有的组件的管理者 -->
<template>
    <div>
        <DomainName></DomainName>
        <hr/>
        <DamainChridren></DamainChridren>
    </div>
</template>

<script>
    // 引入组件
    import DomainName from './domainName.vue';
    import DamainChridren from './DamainChridren.vue';

    export default {
        name:"App",
        components:{
            // 组成组件
            DomainName,
            DamainChridren
        }
    };
</script>

<style>

</style>


5：文件代码内容：DomainName.vue

 <!-- 组件的结构 -->
<template>
    <div class="demo">
        <h2>网站名称：{{name}}</h2>
        <h2>网站域名：{{url}}</h2>
        <button @click="showName">点击提示网站名称</button>
    </div>
</template>

<script>
 //组件交互相关的代码(数据、方法等)
 //export const domainName ... 该方式为分别暴露组件方式
 /*export*//* const domainName =Vue.extends({
    data(){
        return{
            name:"百度",
            url:"www.baidu.com"
        }
    },
    methods: {
        showName(){
            alert(this.name);
        }
    },
 });
//统一暴露组件方式  引入时需要这么写： import ｛？？？｝ from  ???
// export {  domainName }
// 默认暴露组件方式  当暴露对象往往只有一个的时候，默认都用这个 默认暴露组件方式来实现,因为引入简单  只需要写 import 引入组件名  from  哪里的文件名
export default domainName;
*/
// 默认暴露组件方式：或者下面的简写实现方式
/* export default  Vue.extends({
    data(){
        return{
            name:"百度",
            url:"www.baidu.com"
        }
    },
    methods: {
        showName(){
            alert(this.name);
        }
    },
 }); */
//默认暴露组件方式：或者下面的简写实现方式：进一步简写方式
export default   {
    name:"DomainName",/* 非单文件组件的组件文件名 */
    data(){
        return{
            name:"百度",
            url:"www.baidu.com"
        }
    },
    methods: {

        showName(){
            alert(this.name);
        }
    },
 };

</script>
<style  >
/* //组件的样式 */
 .demo{
    background-color: orange;
 }

</style>


6：文件代码内容：DamainChridren.vue

 <!-- 组件的结构 -->
<template>
    <div class="chridren">
        <h2>子网站名称：{{name}}</h2>
        <h2>子网站域名：{{url}}</h2>
        <button @click="showName">点击提示网站名称</button>
    </div>
</template>
<script>
//默认暴露组件方式：或者下面的简写实现方式：进一步简写方式
export default   {
    name:"DamainChridren",/* 非单文件组件的组件文件名 */
    data(){
        return{
            name:"百度地图",
            url:"map.baidu.com/"
        }
    },
 };

</script>
<style  >
/* //组件的样式 */
 .chridren{
    background-color:blue;
 }

</style>



7：执行情况

image




8：说明


该文件需要在vue脚手架环境下执行才能显示正常





posted @ 2022-11-28 17:05  一品堂.技术学习笔记  阅读(52)  评论(0)  编辑  收藏  举报