Vue组件（一）Vue组件基础_Vue组件入门

一、Vue 组件概念

Vue 组件理解： 封装，重用

组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分组件进行单独思考。在实际应用中，组件常常被组织层层嵌套的树结构。

HTML，JS，CSS 代码都可以独立的封装。

.vue是单文件组件

二、Vue 组件注册/定义

组件命名：新版vue框架，命名组件默认需要两个单词。

 

单文件组件定义：

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

js字符串定义组件：

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
}

三、Vue 组件引入

3步：

1.导入

import StudentInfo from "./components/StudentInfo.vue";

2.注册

  components: {
    StudentInfo,
  },

3.使用

  <StudentInfo :num="100"></StudentInfo>
  <StudentInfo :num="parentNum" ref="parentStu"></StudentInfo>

 

更多：

Vue3实现复制功能_vue-clipboard3 Vu3复制插件

Vue 无法展示网络图片处理方案

Vue3 路由增加过度效果-淡入淡出