Vue基础入门（二）------侦听器、计算属性、vue-cli、vue组件

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/ 深度选择器