博客

官网:https://v3.cn.vuejs.org/guide/introduction.html

目录

一、单页面应用程序

二、创建SPA

三、vite项目结构

四、Vue的组件构成

一、单页面应用程序

二、创建SPA

三、vite项目结构

• 
  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的组件构成

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

• 
  template
  
  
  -> 组件的
  
  
  模板结构
  
• 
  script
  
  
  -> 组件的
  
  
  JavaScript 行为
  
• 
  style
  
  
  -> 组件的
  
  
  样式
  

其中，


每个组件中必须包含 template 模板结构


，而


script 行为


和


style 样式


是


可选的


组成部分。

template组件

<template> 是 vue 提供的


容器标签


，只起到


包裹性质的作用


，它不会被渲染为真正的 DOM 元素。支持使用前面所学的


指令语法


，来辅助开发者渲染当前组件的 DOM 结构。

script组件

组件相关的data数据，methods方法等，都需要定义到


export default{ }


内进行默认到处导出，其内部有


name


节点，


data


节点，


methods


节点等

style组件

<style> 标签上的


lang=”css”


属性是


可选的


，它表示所使用的


样式语言


。默认只支持


普通的 css 语法


，可选值还有 less、scss 等。选择less则需要运行


npm install less -D


命令安装依赖包，从而提供 less 语法的编译支持。

组件化思想可以大大

提高了代码的


复用性


和


灵活性，App.vue 本身也是一个组件。


当我们想要进行组件的复用时，需要对组件进行


先注册


，然后


再使用


。

vue 中注册组件的方式分为“


全局注册


”和“


局部注册


”两种，其中：

• 
  被
  
  
  全局
  
  
  注册的组件，
  
  
  可以在全局任何一个组件内使用
  
• 
  被
  
  
  局部
  
  
  注册的组件，
  
  
  只能在当前注册的范围内使用
  

全局注册

// 1. 按需导入 createApp 函数
import { createApp } from 'vue'
// 2. 导入待渲染的 App.vue 组件
import App from './App.vue'

// 1. 导入需要被全局注册的组件，之前提过components目录用来存放项目中所有的自定义组件 
import Swiper from './components/Swiper.vue'
import Test from './components/Test.vue'

// 3. 调用 createApp 函数，创建 SPA 应用的实例
const app = createApp(App)

// 2. 调用 app.component() 方法全局注册组件
app.component('MySwiper', Swiper)
app.component('MyTest', Test)

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

<template>
  <h1>这是组件</h1>
  <!-- 全局注册后的组件，在其他组件中可以通过标签的形式直接使用 -->
  <MyTest></MyTest>
</template>

局部注册

<template>
  <my-search></my-search>
</template>

<script>
import Search from './components/Search.vue'

export default {
  // 组件的名称
  name: 'MyApp',
  components: {
    //相当于重命名
    'my-search': Search,
  },
}
</script>

组件注册时名称的大小写

在进行组件的注册时，


定义组件注册名称的方式


有两种：

• 
  使用
  
  
  kebab-case
  
  
  命名法（俗称
  
  
  短横线命名法
  
  
  ，例如 my-swiper 和 my-search）
  
• 
  使用
  
  
  PascalCase
  
  
  命名法（俗称
  
  
  帕斯卡命名法
  
  
  或
  
  
  大驼峰命名法
  
  
  ，例如 MySwiper 和 MySearch）
  

短横线命名法的特点：

• 
  必须严格按照短横线名称进行使用
  

帕斯卡命名法的特点：

• 
  
  
  既可以严格按照帕斯卡名称进行使用，又可以
  
  
  转化为短横线名称
  
  
  进行使用
  

推荐使用帕斯卡命名法



为组件注册名称，因为它的



适用性更强


。

也可以通过 name 属性注册组件

组件之间的样式冲突问题

组件的自定义属性

既然组件可以以标签的形式进行使用，那必然少不了标签属性。

<!-- 其他组件 -->
<template>
  <div>
   <p> 姓名：{{name}}</p>
   <p>年龄：{{age}}</p>
  </div>
</template>

<script>
export default {
  name: 'Test',
  // 外界可以传递指定的数据，到当前的组件中
  props: ['name', 'age']
}
</script>

<!-- App.vue组件 -->
<template>
  <div>
    <h3 class="title">这是 App 组件</h3>
    <test age="18" name="王强"></test>
  </div>
</template>

<script>
import test from './components/Test.vue'
export default {
  name: 'App',
  components:{
    test
  }
}
</script>

Class 与 Style 绑定

动态绑定 HTML 的 class

<template>
  <div>
    <h3 class="thin" :class="isItalic ? 'italic' : ''">MyStyle 组件</h3>
    <button @click="isItalic = !isItalic">Toggle Italic</button>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      isItalic: false,
    }
  },
}
</script>

<style lang="less">
.italic {
  font-style: italic;
}
</style>

以数组语法绑定 HTML 的 class

<template>
  <div>
    <h3 class="thin" :class="[isItalic ? 'italic' : '', isDelete ? 'delete' : '']">MyStyle 组件</h3>
    <button @click="isItalic = !isItalic">Toggle Italic</button>
    <button @click="isDelete = !isDelete">Toggle Delete</button>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      isItalic: false,
      isDelete: false,
    }
  },
}
</script>

<style lang="less">
.italic {
  font-style: italic;
}

.delete {
  text-decoration: line-through;
}
</style>

以对象语法绑定 HTML 的 class

<template>
  <div>
    <h3 class="thin" :class="classObj">MyStyle 组件</h3>
    <button @click="classObj.italic = !classObj.italic">Toggle Italic</button>
    <button @click="classObj.delete = !classObj.delete">Toggle Delete</button>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      classObj: {
        italic: false,
        delete: false,
      }
    }
  },
}
</script>

<style lang="less">
.thin {
  font-weight: 200;
}

.italic {
  font-style: italic;
}

.delete {
  text-decoration: line-through;
}
</style>

以对象语法绑定内联的 style

<template>
  <div>
    <div :style="{ color: active, fontSize: fsize + 'px', 'background-color': bgcolor }">黑马程序员</div>
    <button @click="fsize+=1">字号 +1</button>
    <button @click="fsize-=1">字号 -1</button>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      active: 'red',
      fsize: 30,
      bgcolor: 'pink',
    }
  },
}
</script>

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