前端(vue组件)

1组件对象

1.1定义组件对象 defineComponent( {} )

1.2注册组件

1.3使用组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组件</title>
</head>
<body><div id="app">{{person}}<my-component1></my-component1><my-component2></my-component2></div><script type="module">import { createApp, defineComponent } from './Js/vue.esm-browser.js';// 定义 MyComponent 组件const MyComponent1 = defineComponent({template: '<div><div><h1>李四真帅{{person}}</h1></div></div>',// 可以在这里添加更多的选项，如 props, data, methods 等等setup(props) {let person={name:"李四"};return{person}}});const MyComponent2= defineComponent({template: '<div><div><h1>李四真帅{{person}}</h1></div></div>',// 可以在这里添加更多的选项，如 props, data, methods 等等setup(props) {let person={name:"李四"};return{person}}});// 创建应用实例，并全局注册组件const app = createApp({// 根组件可以为空对象，因为我们在全局注册了组件components:{MyComponent1,MyComponent2},setup(props) {let person={name:"李四"};return{person}}});// 挂载应用到 DOM 中app.mount('#app');</script>
</body>
</html>

2组件对象和Vue对象的区别

vue.__proto__  == MyComponent.__proto__ ;  //true

vue是通过createApp({}) 创建的对象MyComponent是通过defineComponent({})创建的对象js中每个对象都有一个 ‌proto 属性，它指向该对象的原型对象也就是父对象也就是 vue 和 MyComponent 这两个对象拥有同一个父亲根据现象对象继承规则 , vue ≈ MyComponent

因此MyComponent 中的组件选项写法和vue中的写法一致

3组件化编程

3.1模块与组件模块化与组件化

4vite

网址:https://vitejs.cn/vite3-cn/guide/

vite创建项目的步骤

1 选定项目路径

2 在此路径输入指定命令: npm create vite@latest

project-name
│
├── public                  # 静态资源目录
│   ├── favicon.ico         # Favicon
│   └── index.html          # HTML 模板
│
├── src                     # 源代码
│   ├── assets              # 资源目录(图片,视频,音频等文件)
│   │   └── logo.svg        # 项目 LOGO
│   ├── components          # 组件目录( 组件对象存放目录 )
│   │   └── HelloWorld.vue  # 示例组件
│   ├── App.vue             # 主组件
│   └── main.js             # 入口文件
│
├── vite.config.js          # Vite 配置文件(重要)
└── package.json            # 依赖管理和配置文件 (重要)
└── index.html              # 主页模板文件，通常会被 public/index.html 替代 (重要)
└── README.md               # 项目说明文件 (忽略)
└── tsconfig.json           # TypeScript 配置文件，如果使用 TypeScript 的话 (忽略)
└── .gitignore              # Git 忽略文件列表 (忽略)
└── .editorconfig           # 编辑器配置文件 (忽略)
└── .eslintrc.js            # ESLint 配置文件，如果使用 ESLint 的话 (忽略)
└── babel.config.js         # Babel 配置文件，如果使用 Babel 的话 (忽略)

运行:

在项目文件夹目录下:

1 执行 npm i //安装所有的依赖

2 执行 npm run dev

项目的入口为index.html

在index.html中引入了 main.js

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

import { createApp } from 'vue'import './style.css' //引入样式文件
import App from './App.vue'  //此行代码等价于 let App = defineComponent({})//将App注册到vue对象上 并且 vue对象绑定页面id为app的标签
createApp(App).mount('#app')

每个vue文件就是一个组件对象

let vue文件名 = defineComponent({})

template标签来时书写组件的html标签

style标签用来书写针对html标签的样式

script中定义js数据,可以在html标签中使用这些数

5vite使用组件

语法: import 组件名 from "组件路径"

import HelloWorld from './components/HelloWorld.vue'
组件名一般首字母大写,多个单词则驼峰命名(和java类名规则一致)

5.2使用组件(在此不需要注册了)

<script setup>
//引入组件
import HelloWorld from './components/HelloWorld.vue'
</script><template>
<!--  使用组件--><HelloWorld/>
<!--  自定义标签--><div class="box">自定义标签div,字体为红色</div>
</template><style scoped>
.box{
color: red;
}
</style>