Vue2框架学习二:组件基础

侦听器 什么是 watch 侦听器 watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作

使…

侦听器

什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作

使用 watch 监测用户名是否可用

监听 username 值的变化,并使用 axios 发起 ajax 请求,监测当前输入的用户名是否可用

immediate 选项

默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项

deep 选项

如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选项

监听对象单个属性的变化

如果只想监听对象中单个属性的变化,则可以如下定义

计算属性

什么是计算属性

计算属性值的是通过一系列运算之后,最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods 方法使用

计算属性的特点

虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性

计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算

vue-cli

单页面应用程序

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

什么是 vue-cli

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

中文官网:https://cli.vuejs.org/zh/

安装和使用

  • 安装

    vue 是 npm 上的一个全局包,使用 npm install 即可安装。

    npm install g @vue/cli

  • 使用(基于 vue-cli 快速生成工程化的 vue 项目)

    vue create 项目名称

vue 项目的运行流程

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

其中:

  1. App.vue 用来编写待渲染的模版结构

  2. index.html 中需要预留一个 el 区域

  3. main.js 把 App.vue 渲染到了 index.html 所预留的区域中

vue 组件

什么是组件化开发

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

vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。

vue中规定:组件的后缀名是 .vue 。之前的 App.vue 文件本质上就是一个 vue 的组件。

vue 组件的三个组成部分

template 组件的结构

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

格式:

注意:

  1. template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染成真正的 DOM 元素

  2. template 中只能包含唯一的根节点

script 组件的 JavaScript 行为

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

格式:

.vue 组件中的 data 必须是函数

vue规定:.vue 组件中的 data 必须是一个函数,不能直接指向一个数据对象。

原因:vue 组件可以同时存在多个实例,如果直接使用对象形式的data选项,那么所有的实例会共享同一个data对象,这样就会造成数据互相干扰的问题。因此,将data选项设置为函数可以让每个实例都拥有自己独立的data对象。

style 组件的样式

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

格式:

让 style 支持 less 语法

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

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

组件之间的父子关系

使用组件的三个步骤(导入-注册-使用)

  1. 使用 import 语法导入需要的组件

  2. 使用 components 节点注册组件

  3. 以标签形式使用刚才注册的组件

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

组件中注册的是私有子组件,只能供当前组件使用。如果需要给其他组件使用,则需要借用下面的全局组件。

注册全局组件

在 vue 项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。

注册步骤:

  1. 导入需要全局注册的组件

  2. 注册组件

组件的 props

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

格式

props的构成

  • props 是只读的

    vue 规定:组件中封装的自定义属性是只读的,程序员不能直接修改 props 中的值。那么如何才能修改这个值呢,可以通过把 props 的值传给 data进行修改,因为data中的数据是可读可写的。

  • props 的 default 默认值

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

  • props 的 type 值类型

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

  • props 的 require 必填项

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

组件之间的样式冲突问题

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

样式冲突的根本原因如下:

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

如何解决样式冲突问题

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

style 节点的 scoped 属性

vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突

/deep/ 样式穿透

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

如果您喜欢本站分享的资源,点击这儿捐赠我们

这些信息可能会帮助到你: 外卖赚钱 | 进站必看

原创文章,作者:宋小羽,如若转载,请注明出处:https://res.bysjb.cn/vue2-component.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注