零基础可以学的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 结构。