目录

1. 单页面应用程序

1)单页面应用程序

2)特点

3)优点

4)缺点

5)如何快速创建vue的SPA项目

2. vite的基本使用

1)创建vite的项目

2)梳理项目的结构

3)vite项目的运行流程

①在App.vue中编写模块结构

②在index.html中预留el区域

③在main.js中进行渲染

3. 组件化开发

1)组件化开发

2)组件化开发的好处

3)vue中的组件化开发

4. vue组件的构成

1)vue组件构成结构

2)组件的template节点

①在template中使用指令

②在template中定义根节点

3)组件的script节点

①script中的data节点

②script中的methods节点

4)组件的style节点 

①让style中支持less语法

5. 组件的基本使用

1)组件的注册

①注册组件的两种方式

② 全局注册组件

③局部注册组件

④组件注册时名称的大小写

⑤通过name属性注册组件 

2)组件之间的样式冲突问题

①解决组件样式冲突的问题

② style节点的scoped属性

③/deep/ 样式穿透

3)组件的props

①props

② 在组件中声明props

③无法使用未声明的props

④动态绑定props的值

⑤props的大小写命名

4)Class与Style绑定

①动态绑定HTML的class

②以数组语法绑定HTML的class

③以对象语法绑定HTML的class

④以对象语法绑定内联的style


1. 单页面应用程序

1)单页面应用程序

单页面应用程序(Single Page Application)简称SPA,指的是一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。

2)特点

单页面应用程序将所有的功能局限于一个web页面中,仅在该web页面初始化时加载相应的资源(HTML、JavaScript和CSS)。

一单页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript动态的变换HTML的内容,从而实现页面与用户的交互。

3)优点

良好的交互体验

  • 单页应用的内容的改变不需要重新加载整个页面
  • 获取数据也是通过Ajax异步获取
  • 没有页面之间的跳转,不会出现“白屏现象”

良好的前后端工作分离模式

  • 后端专注于提供API接口,更易实现API接口的复用
  • 前端专注于页面的渲染,更利于前端工程化的发展

减轻服务器的压力

  • 服务器只提供数据,不负责页面的合成与逻辑的处理,吞吐能力会提高几倍

4)缺点

首屏加载慢,解决方案:

  • 路由懒加载
  • 代码压缩
  • CDN加速
  • 网络传输压缩

不利于SEO,解决方案:

  • SSR服务器渲染

5)如何快速创建vue的SPA项目

  1. 基于vue创建SPA项目
  2. 基于vue-cli创建SPA项目

2. vite的基本使用

1)创建vite的项目

按照顺序执行如下的命令,即可基于vite创建vue3.x的工程化项目:

2)梳理项目的结构

3)vite项目的运行流程

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

其中:

  • App.vue:编写待渲染的模板结构
  • index.html:需要与留一个el区域
  • main.js:把App.vue渲染到了index.html所预留的区域中

①在App.vue中编写模块结构

<template>
  <div>
    <h1>App组件</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>

</style>

②在index.html中预留el区域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

③在main.js中进行渲染

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

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

// 4.调用mount()把App组建的目标结构,渲染到指定的el区域中
app.mount('#app')

结果为:

3. 组件化开发

1)组件化开发

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

例如:ibootstrap - Bootstrap可视化布局系统

所展示的效果,就是组件化开发的思想,用户可以通过拖拽页面的方式,快速生成一个页面的布局结构。

2)组件化开发的好处

  • 提高了前端代码的复用性灵活性
  • 提升了开发效率和后期的可维护性

3)vue中的组件化开发

vue是一个完全支持组件化开发的框架。vue中规定组建的后缀名是.vue

App.vue文件本质上就是一个vue的组件。

4. vue组件的构成

1)vue组件构成结构

每个.vue组件都由3部分构成,分别是:

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

每个组件中必须包含template模板结构,而script行为和style样式是可选的。

2)组件的template节点

vue规定:每个组件对应的模板结构,需要定义到<template>节点中。

注意:<template>是vue提供的容器标签,只起到包裹性的作用,它不会被渲染为真正的DOM元素。 

①在template中使用指令

②在template中定义根节点

在vue2.x的版本中,<template>节点内的DOM结构仅支持单个根节点

但是,在vue3.x的版本中,<template>中支持定义多个根节点

3)组件的script节点

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

①script中的data节点

vue组件渲染器件需要用到的数据,可以定义在data节点中:

②script中的methods节点

组件中的事件处理函数,必须定义到methods节点中:

4)组件的style节点 

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

其中 <style>标签上的lang="css"属性是可选的,它表示所使用的样式语言,默认只支持普通的css语法,可选值还有less、scss等。

①让style中支持less语法

配置步骤:

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

5. 组件的基本使用

1)组件的注册

组件之间可以进行相互的引用,例如:

vue中组件的引用原则:先注册后使用

①注册组件的两种方式

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

② 全局注册组件

使用app.component()方法注册的全局组件,直接以标签的形式进行使用即可。

③局部注册组件

④组件注册时名称的大小写

在进行组建的注册时,定义组件注册名称的方式有两种:

  1. 使用kebab-case命名法(俗称短横线命名法,例如my-swiper和my-search)
  2. 使用PascalCase命名法(俗称帕斯卡命名法或大驼峰命名法,例如MySwiper和MySearch)

短横线命名法的特点:

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

帕斯卡命名法的特点:

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

⑤通过name属性注册组件 

在注册组件期间,除了可以直接提供组件的注册名称之外,还可以把组件的name属性作为注册后组件的名称。

2)组件之间的样式冲突问题

默认情况下,写在.vue组件中的样式会全局失效,因此很容易造成多个组件之间的样式冲突问题,导致组件之间样式冲突的根本原因是:

  1. 单页面应用程序中,所有组件的DOM结构,都是基于唯一的index.html页面进行呈现的
  2. 每个组件中的样式,都会影响整个index.html页面中的DOM元素

①解决组件样式冲突的问题

为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域。

② style节点的scoped属性

为了提高开发效率和开发体验,vue为style节点提供了scoped属性,从而防止组件之间的样式冲突问题。

/deep/ 样式穿透

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

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

3)组件的props

为了提高组件的复用性,在封装vue组件时需要遵守如下的原则:

  • 组件的DOM结构、style样式要尽量复用
  • 组件中要展示的数据,尽量由组件的使用者提供

①props

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

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

好处:提高了组件的复用性 

② 在组件中声明props

在封装vue组件时,可以把动态的数据项声明为props自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。

③无法使用未声明的props

如果父组件给子组件传递了未声明的props属性,则这些属性会被忽略,无法被子组件使用。

④动态绑定props的值

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

⑤props的大小写命名

 组件中如果使用camelCase(驼峰命名法)声明了props属性的名称,则有两种方式为其绑定属性的值:

4)Class与Style绑定

在实际开发中经常会遇到动态操作元素样式的需求。因此,vue允许开发者通过v-bind属性绑定指令,为元素动态绑定class属性的值和行内的style样式

①动态绑定HTML的class

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

②以数组语法绑定HTML的class

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

③以对象语法绑定HTML的class

使用数组语法绑定class会导致模版结构臃肿的问题,此时使用对象语法进行简化:

④以对象语法绑定内联的style

:style的对象语法十分直观,实际上是一个JavaScript对象。CSS property名可以用驼峰式(camelCase)或短横线分割(kebab-case)来命名:

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐