Vue基础入门（二）------侦听器、计算属性、vue-cli、vue组件_vue大型项组件选择器监听器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45359288/article/details/124139926

1. 侦听器

侦听器要定义到watch节点下面，和methods平级；
侦听谁就把谁当作函数名（这里是username），只要username变化就会触发username函数
在这里插入图片描述

在这里插入图片描述

侦听器的格式

方法格式的侦听器
缺点1：无法在刚进入页面的时候，自动触发！
缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！
对象格式的侦听器
好处1：可以通过 immediate 选项，让侦听器自动触发！
好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！

在这里插入图片描述
注意加单引号 ‘info.username’

2. 计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值
计算属性都要定义在computed节点下面，要定义成 方法格式
这个动态计算出来的属性值可以被模板结构或 methods 方法使用

计算属性的特点
① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算
在这里插入图片描述
rgb作为一个计算属性，被定义成方法格式，最终在这个方法中，返回一个生成好的 rgb(x,x,x)的字符串，在使用计算属性的时候，当普通的属性使用即可

3. vue-cli

3.1 什么是 vue-cli

中文官网：https://cli.vuejs.org/zh/
在这里插入图片描述

3.2 安装和使用

在这里插入图片描述

npm install -g @vue/cli
vue create 项目的名称

在这里插入图片描述
项目的名称：不要带中文，不要带空格
直接定位到想创建项目的目录下，打开cmd终端，输入命令 vue create mydemo-first

在这里插入图片描述
使用上下箭头选择 Manually select features（初学者建议选这个，灵活度更高）

在这里插入图片描述

3.3 vue 项目的运行流程

VS code中vue代码高亮插件：在扩展里面搜索Vetur，下载即可

在这里插入图片描述

到这里，以后都会使用工程化项目来使用和学习vue，而不是之前所使用的Vue 的基本使用步骤，不再需要导入脚本文件、声明控制区域…

4. vue 组件

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

4.1 vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue ，之前接触到的 App.vue 文件本质上就是一个 vue 的组件

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

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

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

通过 components 注册的是私有子组件
例如：在组件 A 的 components 节点下，注册了组件 F；则组件 F 只能用在组件 A 中；不能被用在组件 C 中

<template>
  <div class="app-container">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 步骤3：以标签形式使用刚才注册的组件 -->
      <!-- 3. 以标签形式，使用注册好的组件 -->
      <Left></Left>
      <Right></Right>
  </div>
</template>

<script>
// 步骤1：使用 import 语法导入需要的组件
// 导入需要使用的 .vue 组件   @表示src路径
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Test from '@/components/Test.vue'

export default {
  // 步骤2：使用 components 节点注册组件
  // 注册组件
  components: {
    Left,
    Right
  }
// 在组件 vue 的 components 节点下，注册了组件 Left/Right
// 但组件 Left/Right 只能用在组件 vue 中；不能被用在组件 Test 中
}
</script>

注册全局组件
vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件
在这里插入图片描述

4.2 组件的 props

这算是父子组件传值的方式（父组件与子组件的通信），面试会问。

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

语法格式如下：

export default {
	// 组件的自定义属性
	props: [ '自定义属性A', '自定义属性B', '其他自定义属性....' ]
	
	// 组件的私有数据
	data() {
		return { }
	}
}

props 是只读的
vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错；
要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

props 的 default 默认值：在声明自定义属性时，可以通过 default 来定义属性的默认值
props 的 type 值类型：在声明自定义属性时，可以通过 type 来定义属性的值类型
props 的 required 必填项：在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值

（props改成对象格式，不是上面的数组格式，在props对象中自定义属性init）
在这里插入图片描述

组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题；
为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题；
如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器

在这里插入图片描述