零基础可以学的vue（2）

一、vue 过滤器

1. 过滤器

过滤器是给在 模板中使用的数据 做 格式转换 的。

过滤器可以用在两个地方： 插值表达式 和 v-bind 属性绑定 。

 2.过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中 剔除了过滤器 相关的功能。

在企业级项目开发中：

 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能

 如果项目已经升级到了 3.x 版本的 vue，官方建议使用 计算属性 或 methods 方法 代替被剔除的过滤器功能

 二、侦听器 

1. 什么是 watch 侦听器

watch 侦听器 可以监听数据的变化，从而针对数据的变化 做特定的操作。

2. 检测用户输入的用户名是否可用

需求：检测当前输入的用户名是否可用（类似百度搜索）

实现：使用 watch 监听 username 值的变化，并使用 axios 发起 Ajax 请求。

3. immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器一进入页面就 立即被

调用一次 ，则需要使用 immediate 选项。

 4. deep 选项

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

5. 监听对象单个属性的变化

如果 只想监听对象中单个属性的变化 ，则可以按照如下的方式定义 watch 侦听器：

 三、计算属性

什么是计算属性

计算属性是依赖于 data 中的数据 动态计算 出来的 一个值 。

特点：计算属性所依赖的任何一个 data 数据发生变化，这个计算属性也会跟着变化。

 计算属性的缓存

计算属性能做的事，都可以使用方法代替。

区别是：计算属性会 缓存计算的结果 ，只有计算属性 依赖的数据变化时 ，才会重新进行计算。而函数不会缓存计算的结果，所以计算属性的性能比函数要好。

四、vue-cli

1. 什么是单页面应用程序

单页面应用程序 （英文名： S ingle P age A pplication）简称 SPA，顾名

思义，指的是 一个 Web 网站中只有唯一的一个 HTML 页面 ，所有的功

能与交互都在这唯一的一个页面内完成。

vue 的项目 90% 以上都是单页面应用。

2. 什么是 vue-cli

vue-cli 的作用是可以帮助我们一键生成工程化的 Vue 项目。它简化了程序员基于 webpack 创建工程化的Vue 项目的过程。

3. 安装和使用

①全局安装 vue-cli

npm install -g @vue/cli

使用 vue -V 命令检查是否安装成功

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

vue create 项目的名称 （如： vue create demo-1 ）

③启动项目

cd 项目的名称

npm run serve

4. vue 项目介绍

1.项目目录构成

2.工程化的 Vue 项目运行流程

index.html ：单页面应用的唯一的一个 html 页面

1. 中预留了一个 el 区域

2. 还引入一个打包后的脚本文件。

main.js ：webpack 打包的入口文件

把 App.vue 渲染到了 index.html 所预留的 el 区域

App.vue ：项目中最顶层的组件

它包含了所有将来要在页面上渲染的 UI 结构。