定义数据

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

 

 

 

 

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

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

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

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

1 
      13 14 31 32 

定义方法：

 

 在app.vue中定义了一个方法

export default{
   //导出模块/组件        data(){                        return{                name:'perfect',                count:0                            }        },        methods:{                        addCount(){                                this.count++;            }        }                            }

在template中进行调用

定义方法总的代码：

1 
      13 14 39 40 

 

 

定义组件之间的相互引用

 

新建一个目录components---->在目录中建一个user.vue

user.vue

1 
      8  9 24 25 

 

在app.vue中引入该文件：import+自定义名称+from+自定义路径

import user from './components/user.vue'

 

 

注册组件：

components:{
   //注册组件                        user        }

使用组件：

由效果图可以看到“用户信息”字样的样式为红色，而在user.vue中我并没有为它使用样式，所以说明默认使用全局的样式，如果不想使用全局的样式，想使用user.vue中设计的样式，可以加入如下代码：

 

 在app.vue

 

 

 

1 
      15 16 46 47