Vue组件基本介绍和使用

什么是组件化开发:

组件化开发指的是：根据封装思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

Vue是一个支持组件化开发的前端框架，vue中规定：组件的后缀名为.vue。

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

template->组件的模板结构

script->组件的JavaScript行为

style->组件的样式

首先创建一个text.vue文件

<!-- 先放结构 -->
<template>
    <!-- 只能出现一个根元素，否则两个div并列会报错 -->
    <div>
    <div class="box">
        <p >自定义一个属性{{user}}</p>
        <button @click="change">修改用户名</button>
    </div>
    <div>123</div>
    </div>
</template>
<!-- js在中间 -->
<script>
// 默认导出
export default{
    // 注意：组件中的data不能像之前一样，不能指向对象
    // 组件中的data必须是一个函数，以下写法是会报错的
    // data:{
    //     user:"张三"
    // }

    // 函数data：function（）{}省略写法
    data(){
        // return的对象可以定义数据
        return{
            user:"张三"
        }
    },
    methods:{
        change(){
            // 在组件中，this表示当前组件的实例对象
            console.log(this);
            this.user="哈哈哈哈"
        }
    }
}
</script>
<!-- 样式最后 -->
<!-- 此处是css语法，启用less语法，在style加lang="less"即可 -->
<style lang="less">
.box{
   background-color:blue;
}
p{
    color:chartreuse;
}
</style>

引入到main.js

// 导入vue这个包，得到vue构造函数
import Vue from 'vue'
// 导入app.vue根组件，将来要把app.vue中的模板结构，渲染到html页面中
// import App from './App.vue'
import text from "./text.vue"
// 导入需要被全局注册的那个组件
import count from "./components/count.vue"
// 第一个参数随便起，第二个是要注册的组件
Vue.component("MyCount","count")
// 阻止启动生产消息
Vue.config.productionTip = false
// 创建vue的实例对象
new Vue({
  // el:"#app",
  // 把render函数指定的组件，渲染到html页面中
  render: h => h(text),
}).$mount('#app')

// .$mount('#app')和el："#app"效果一样，二选一

此时在浏览器打开  http://localhost:8080/ 就能出现如下效果

 

vue组件之间的父子关系：

1. 组件在被封装好之后，彼此之间是相互独立的，不存在父子关系 。
2. 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系，兄弟关系。

使用组件的三个步骤：

1. 使用import语法导入需要的组件
2. 使用components节点注册组件
3. 以标签形式使用注册的组件（可以认为是自定义标签）

在components文件夹下创建left.vue和right.vue两个文件，另外在components外面创建一个App.vue文件

 

通过components注册的是私有子组件，如果想要注册全局可按如下方法

在vue项目的main.js入口文件中，通过Vue.component（）方法，可以注册全局组件。

1.App.vue

<template>
  <div id="app">
   <h1>app根组件</h1>
    <div class="box1">
      <!-- 渲染left子组件和right子组件 -->
    <!-- 3.以标签形式，使用注册好的组件 -->
    <left1>left组件</left1>
    <right>right组件</right>
    </div>
  </div>
</template>
<script>
// 1.导入需要使用的.vue组件,此处import后的left的名字自定义可更改
import left1 from "@/components/left.vue"
import right from "@/components/right.vue"
export default{
  // 2.注册组件
components:{
  // left:"left"可简写成left
  left1,
  right
}
  
}
</script>
<style>
#app{
  height: 200px;
  background-color: aqua;
}
</style>

2.left.vue

<template>
  <div>
    <p>left</p>
    <MyCount></MyCount>
  </div>
</template>

<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>

<style>

</style>

3.right.vue

<template>
  <div> 
    <p>right</p>
  </div>
</template>

<script>
import MyCount from "@/components/count.vue"
export default {
components:{
    MyCount
}
}
</script>

<style>

</style>>

4.main.js

// 导入vue这个包，得到vue构造函数
import Vue from 'vue'
// 导入app.vue根组件，将来要把app.vue中的模板结构，渲染到html页面中
// import App from './App.vue'
import App from "./App.vue"
// 导入需要被全局注册的那个组件
import count from "./components/count.vue"
// 第一个参数随便起，第二个是要注册的组件
Vue.component("MyCount","count")
// 阻止启动生产消息
Vue.config.productionTip = false
// 创建vue的实例对象
new Vue({
  // el:"#app",
  // 把render函数指定的组件，渲染到html页面中
  render: h => h(App),
}).$mount('#app')

// .$mount('#app')和el："#app"效果一样，二选一

效果如下：