Vue-Router路由Vue-CLI脚手架和模块化开发之在单文件组件项目中定义数据、方法和组件之间的相互引用

定义数据

根据上一篇博文配置项目的结构的基础上继续进行优化；

在app.vue中的导出模块/组件部分设置其属性：

export default{//导出模块/组件
        data(){
            
            return{
                name:'perfect',
                count:0
                
            }
        },

在一个template标签中进行调用：

<template>
    <div>
        
        <h2> 欢迎来到perfect*的博客园！！！</h2>
    <h3>{{name}}</h3>
    
    

    
    
</template>

实现上述定义数据的总代码，只修改了app.vue

 1 <template>
 2     <div>
 3         
 4         <h2> 欢迎来到perfect*的博客园！！！</h2>
 5     <h3>{{name}}</h3>
 6     
 7     </div>
 8     
 9 
10     
11     
12 </template>
13 
14 <script>
15     //console.log('欢迎来到perfect*的博客园')
16     
17     
18     export default{//导出模块/组件
19         data(){
20             
21             return{
22                 name:'perfect',
23                 count:0
24                 
25             }
26         }
27         
28         
29     }
30 </script>
31 
32 <style>
33     
34     h2{
35         
36         color: red;
37     }
38 </style>

定义数据