Vue基础-贰

Vue基础-贰

单页面应用程序

单页面应用程序 （英文名：Single Page Application）简称 SPA ，顾名思义，指的是一个 Web网站中只有唯一的一个HTML页面，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

优点	缺点
●就良好的交互性 ●前后端分离模式 ●减轻服务器压力	●首屏加载慢 ●不利于SEO ●不适合开发大型项目

vue-cli

介绍

vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程

利用vue-cli，程序员可以专注在写应用上，不必花时间配置webpack

官网（v3）：https://cli.vuejs.org/zh/

官网（v2）：https://github.com/vuejs/vue-cli/tree/v2#vue-cli–

安装

vue-cli 是npm上的一个全局包，使用npm命令安装：

npm install @vue/cli -g

使用

基于vue-cli快速生成工程化的Vue项目：

vue create 项目名称

或者使用图形化GUI创建项目：

vue ui

输入命令后根据项目需要选择项目依赖、配置项目设置

vue项目src文件目录

• assets 文件夹：存放项目中用到的静态资源文件。例如：css样式表、图片资源
• components 文件夹：封装可以复用的组件
• main.js 是项目的入口文件，项目执行要先执行 main.js
• App.vue 是项目的根组件

vue项目运行流程

在工程化项目中，vue要做的事情很单纯：

通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

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

vue 组件

组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。

组件化开发要素：

• 组件是对逻辑的封装，不限于图形元素。
• 组件具备单个可移植性，即“随加载随用”，不需要为其准备复杂的基础条件。
• 组件是声明式定义的，而非命令式。

vue 中的组件化开发

• vue 是一个支持组件化开发的前端框架
• vue 中规定：组件的后缀名是 .vue

vue组件的三个组成部分

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

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

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

template

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

<template>
    <!-- 当前组件的 DOM 结构需要定义到 template 标签内部 -->
</template>

注意：

• template 是vue提供的容器标签，只起到包裹性质的作用 ，它不会被渲染成真正的DOM元素
• template 中只能包含唯一的根节点

script

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

<script> 节点的基本结构如下：

<script>
// 组件相关的data数据，methods方法等，都需要定义到export default所导出的对象
export default{}
</script>

vue组件中的data必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。 因此在组件中定义 data 数据节点时，下面的方式是错误的：

data: {
    // 组件中不能直接让data只想一个数据对象（会报错）
    count: 0
}

会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：组件基础 — Vue.js (vuejs.org)

style

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

<style> 节点的基本结构如下：

<style>
    /* 当前vue组件的样式 */
    div {
        background-color: #fff;
    }
</style>

style中支持less语法

在<style> 标签上添加 lang="less" 属性，即可使用less语法编写组件的样式：

<style lang="less">
/* 支持less语法 */
div {
  background-color: #fff;
  span {
    color: #ccc;
  }
}
</style>

父子组件

组件之间的父子关系

组件在封装好之后，彼此之间是相互独立的，不存在父子关系

在使用组件的时候，根据彼此的嵌套关系，形成了父子关系，兄弟关系

使用组件的三个步骤

• 步骤1：以标签形式使用刚才注册的组件
• 步骤2：使用 import 语法导入需要的组件
• 步骤3：使用 components 节点注册组件

通过components注册的是私有子组件

例如：

在组件A的components节点下，注册了组件F。

则组件F只能在组件A中；不能被用在组件C中。

注册全局组件

在vue项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。实例代码如下：

// 导入需要全局注册的组件
import Count from '@/components/Count.vue'

// 参数1：字符串格式，表示组件的注册名称
// 参数2：需要被全局注册的那个组件
Vue.component('MyCount', Count)

组件的props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！

它的语法格式如下：

export default {
    // 属性的自定义属性
    props: ['自定义属性A','自定义属性B','其他自定义属性',...],

	// 组件的私有数据
    data() {
    return {}
}

props是只读的

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错：

要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

export default {
    // 属性的自定义属性 允许使用者通过自定义属性，为当前组件指定初始值
    // 自定义属性的名字，可以自定义，合法即可
    // props 中的数据，可以直接在模板结构中被使用
    // props 是只读的，不要修改props的值，不然会报错
    props: ["init"],
    data() {
        return {
            // 把this.init的值转存到count
            count: this.init
        }
    }
}

props的default默认值

在声明自定义属性时,可以通过default来定义属性的默认值。

实例代码如下：

export default {
    props: {
        init: {
            // 用default属性定义属性的默认值
            default: 0
        }
    }
}

props的type值类型

在声明自定义属性时，可以通过type来定义属性的值类型。

示例代码如下：

export default {
    props: {
        init: {
            // 用default属性定义属性的默认值
            default: 0,
            // 用type属性自定义属性的值类型
            // 如果传过来的值不符合此类型,则会在终端里报错
            type: Number
        }
    }
}

props的required必填项

在声明自定义属性时，可以通过required选项，将属性设置为必填项，强制用户必须传递属性的值。

示例代码如下：

export default {
    props: {
        init: {
            // 用default属性定义属性的默认值
            default: 0,
            // 用type属性自定义属性的值类型
            // 如果传过来的值不符合此类型,则会在终端里报错
            type: Number,
			// 必填项校验
			required: true
        }
    }
}

组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因时：

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

如何解决样式冲突的问题

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

示例代码如下：

<template>
  <div class="container" data-v-001>
    <h3 data-v-001>轮播图组件</h3>
  </div>
</template>

<style>
/* 通过中括号"属性选择器"来防止组件之间的样式冲突问题 因为每个组件分配的自定义属性是”唯一的“ */
.container[data-v-001]{
  background-color: #fff;
}
</style>

style节点的scoped属性

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

<template>
  <div class="container">
    <h3>轮播图组件</h3>
  </div>
</template>

<style scope>
/* 
  style节点的scoped属性，用来自动为每个组件分配唯一的自定义属性 
  并自动为当前的组件的DOM标签和stle演示用用这个自定义属性，防止组件的样式冲突问题
*/
.container{
  background-color: #fff;
}
</style>

/deep/ 样式穿透

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

<style lang="less" scoped>
    .title {
        color: blue; /* 不加/deep/时，生成的选择器格式为 .title[data-v-052242de] */
    }
    
    /deep/ .title {
        color: blue; /* 加上/deep/时，生成的选择器格式为[data-v-052242de] .title */
    }
</style>

und-color: #fff;
}

#### /deep/ 样式穿透

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

```vue
<style lang="less" scoped>
    .title {
        color: blue; /* 不加/deep/时，生成的选择器格式为 .title[data-v-052242de] */
    }
    
    /deep/ .title {
        color: blue; /* 加上/deep/时，生成的选择器格式为[data-v-052242de] .title */
    }
</style>