Vue 组件 basics

一、单页面应用程序

单页面应用程序（SPA）指的是一个web网站只有一个唯一的HTML页面

1.创建 Vue 的 SPA 项目:

① 基于 vite 创建SPA项目支持 vue 3.x 功能完整度小而巧（逐渐完善）速度快

② 基于 vue-cli 创建SPA项目基于webpack 支持 vue 3.x 和 2.x （大而全）速度较慢

vite 的基本使用 :

创建 vue3.x 的工程化项目 

npm init vite -app 项目名称 

cd 项目名称 

npm install 

npm run dev

vite官网

2.创建项目结构：

其中

node_modules 目录用来存放第三方依赖包
public是公共的静态资源目录
src是项目的源代码目录（程序员写的所有代码都要放在此目录下)
.gitignore是 Git的忽略文件
index.html是SPA单页面应用程序中唯一的HTML页面
package.json是项目的包管理配置文件

其中src项目代码目录包含了如下文件：

assets目录用来存放项目中所有的静态资源文件( css、fonts等)
components目录用来存放项目中所有的自定义组件
App.vue是项目的根组件
index.css是项目的全局样式表文件
main.js 是整个项目的打包入口文件

vite项目运行流程：在工程化的项目中，vue 要做的事情很单纯:通过main.js 把 App.vue渲染到index.html的指定区域中。

二、组件化开发思想

根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。

3.组件的构成：每个vue组件都由3个部分构成

分别是

template -> 组件的模板结构 （必须） 
script -> JavaScript 行为 （可选）
style -> 组件的样式 （可选）

1) template:

<template> 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。
在 vue 2.x 版本 <template> 节点内的 DOM 结构仅支持单个根节点 
在 vue 3.x 版本 <template> 中支持定义多个根节点

2) script:

vue 规定:组件内的 <script> 节点是可选的，开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。

script中

name 节点：为当前组件定义一个名称（清晰区分每个组件）
data 节点：vue 组件渲染期间需要用到的数据，可以定义在 data 节点中
methods 节点：组件中的事件处理函数，必须定义到 methods 节点中

3) style:

 vue 规定:组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。

让 style 中支持 less 运行 npm install less -D 命令安装依赖包，从而提供less语法的编译支持在标签上添加lang="less"属性，即可使用 less 语法编写组件的样式。

scoped属性用来自动为每个组件分配唯一的“自定义属性” 防止组件样式冲突

    <style lang="less" scoped>

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

/deep/ 样式穿透

注意: /deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代/deep/。

三、组件的注册

全局注册-使用频率高：

app.component('my-swiper',Swiper)

局部注册-特定情况使用：

import HelloWorld from './components/HelloWorld.vue' 
 components: {
    HelloWorld
  }

定义组件注册名称方式两种：

使用 kebab-case 命名法（俗称短横线命名法，例如 my-swiper 和 my-search)

使用 PascalCase 命名法（俗称帕斯卡命名法或大驼峰命名法，例如 MySwiper 和 MySearch)

main.js

//1.按需导入 createApp 函数  

import { createApp } from 'vue'

// 2.按需导入带渲染的 App.vue 组件

import App from './App.vue'
import MySwiper from './components/MySwiper.vue'


import './index.css'
// 3.调用createApp函数 
const app= createApp(App)


//4.调用app.component()方法全局注册组件 
                                        // App.component('my-swiper',Swiper)
app.component(MySwiper.name,MySwiper) // Vue3.x 新语法 .name属性 相当于App.component('MySwiper',Swiper)

//调用mount函数 把App组件模板结构，渲染到指定的el区域中
app.mount('#app')

App.vue

  <template>
  <img alt="Vue logo" src="./assets/logo.png" />
  
  <MySwiper :title="info.title" :author="'Ting·' + info.author"></MySwiper>
  
  <hr />
  <hello-world></hello-world>
  <hr>
  </template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      info: {
        title: "面朝大海，春暖花开",
        author: "海子",
      },
    };
  },
  components: {
    HelloWorld,
  },
};
</script>

MySwiper.vue

<template>
  <h1>革命必将进行到底!!</h1>
  <p>标题：{{ title }}</p>
  <h2>作者：{{ author }}</h2>
  <p></p>
</template>

<script>
export default {
  name: "MySwiper", //name属性为当前组件的名字
  props: ["title", "author"],
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped></style>

组件的 props

props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用

props 的作用:父组件通过 props向子组件传递要展示的数据。

在封装vue组件时，可以把动态的数据项声明为 props自定义属性。如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用

可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值

class 与 style样式绑定

可以通过三元表达式，动态的为元素绑定class的类名

<p class="thin" : class= "isItalic  ? 'italic' : '' " ></p>

如果元素需要动态绑定多个 class 类名，此时可以使用数组语法格式

<p class=" thin " : class=" [isItalic  ? 'italic' : '' , isDelete ? 'delete' : '' ] " ></p>

以对象语法进行简化：

<template>
  <div
    :style="{
      color: active,
      fontSize: fsize + 'px',
      'background-color': bgcolor,
    }"
  >
    人世间
  </div>
 
</template>

<script>
export default {
  data() {
    return {
      active: "red",
      fsize: 30,
      bgcolor: "green",
    };
  },
};
</script>

Vue 第二节点-组件基础

Vue 组件 basics

一、单页面应用程序

二、组件化开发思想

三、组件的注册