第七十篇：Vue组件的使用

好家伙,

 

1.vue的组件化开发

1.1.什么是组件?

组件是对UI结构的复用,

 

vue是一个支持组件化开发的前端框架,

vue中规定:组件的后缀名是.vue

例如:App.vue文件本质上就是一个vue组件

 

2.vue组件的三个组成部分

每个.vue组件都由3部分构成，分别是：

template—→  组件的模板结构            —→   对应html

script     —→  组件的JavaScript行为   —→   对应js

style      —→   组件的样式                   —→  对应css

 

来简单地使用一下.vue组件

在App.vue文件中,

<template>
  
  <div>
    <h3>{{ username }}</h3>
  </div>
</template>

<script>
//默认到处,这是固定写法
export default {
    //data数据源
   
    //不能像在.html文件中的写法data:{  username:'panghu'  }
    //注意:.vue组件中的data必须是一个函数,不能指向对象
    //这里我们把data写成一个函数,让其返回username

    data:function(){
        return{
        username:'panghu'
      }
    }
}
</script>    

看看效果

 

 

同样的,像方法,监听器,计算属性过滤滤器之类的,也是这样的写法

<script>
//默认到处,这是固定写法
export default {
    //data数据源
    //注意:.vue组件中的data必须是一个函数,不能指向对象
    //不是之前的data:{  username:'panghu'  }
    data:function(){
      return{
        username:'panghu'
      }
    },
    methods:{
      changename(){
        this.username = '胖虎'
      }

    },
    watch:{},
    computed:{},
    filters:{},
}
</script>

 

 

3.补充

在<template>标签中应只有一个<div>

报错信息中:Component template should contain exactly one root element.

组件的模板结构中,应该包含一个根元素

即,必须只能有唯一的一个根节点

 

 

解决方法:在两个<div>标签的外层再套一层div