【Vue】基础入门 —— 黑马程序员

vue 简介

1. 什么是 vue

官方给出的概念:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的前端框架。
【Vue】基础入门 —— 黑马程序员_第1张图片

2. vue 的特性

vue 框架的特性,主要体现在如下两方面:
① 数据驱动视图
② 双向数据绑定

2.1 数据驱动视图

在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构。示意图如下:
【Vue】基础入门 —— 黑马程序员_第2张图片
好处:当页面数据发生变化时,页面会自动重新渲染!
注意:数据驱动视图是单向的数据绑定。

2.2 双向数据绑定

在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源
中。示意图如下:

在这里插入图片描述 【Vue】基础入门 —— 黑马程序员_第3张图片
好处:开发者不再需要手动操作 DOM 元素,来获取表单元素最新的值!

2.3 MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel,它把每个 HTML 页面都拆分成了这三个部分,如图所示:【Vue】基础入门 —— 黑马程序员_第4张图片
在 MVVM 概念中:
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例,它是 MVVM 的核心。

2.4 MVVM 的工作原理

ViewModel 作为 MVVM 的核心,是它把当前页面的数据源(Model)和页面的结构(View)连接在了一起。
【Vue】基础入门 —— 黑马程序员_第5张图片
当数据源发生变化时,会被 ViewModel 监听到,VM 会根据最新的数据源自动更新页面的结构。

当表单元素的值发生变化时,也会被 VM 监听到,VM 会把变化过后最新的值自动同步到Model 数据源中。

3. vue 的版本

当前,vue 共有 3 个大版本,其中:
2.x 版本的 vue 是目前企业级项目开发中的主流版本
3.x 版本的 vue 于 2020-09-19 发布,生态还不完善,尚未在企业级项目开发中普及和推广
1.x 版本的 vue 几乎被淘汰,不再建议学习与使用

总结:
3.x 版本的 vue 是未来企业级项目开发的趋势;
2.x 版本的 vue 在未来(1 ~ 2年内)会被逐渐淘汰;

vue 的基本使用

1. 基本使用步骤

① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象(vue 实例对象)

2. 基本代码与 MVVM 的对应关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    
</body>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</html>

vue 的调试工具

1. 安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具,能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools :
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

FireFox 浏览器在线安装 vue-devtools :
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

2. 配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角的 按钮,选择更多工具-> 扩展程序 -> Vue.js devtools 详细信息,并勾选如下的两个选项:【Vue】基础入门 —— 黑马程序员_第6张图片
注意:修改完配置项,须重启浏览器才能生效!

3. 使用 vue-devtools 调试 vue 页面

在浏览器中访问一个使用了 vue 的页面,打开浏览器的开发者工具,切换到 Vue 面板,即可使用 vue-devtools调试当前的页面【Vue】基础入门 —— 黑马程序员_第7张图片

vue 的指令与过滤器

1. 指令的概念

指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类:
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令
注意:指令是 vue 开发中最基础、最常用、最简单的知识点。

1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个:
⚫ v-text
⚫ {{ }}
⚫ v-html

v-text
用法示例:
【Vue】基础入门 —— 黑马程序员_第8张图片
注意:v-text 指令会覆盖元素内默认的值。

{{ }} 语法
vue 提供的 {{ }} 语法,专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式(英文名为:Mustache)。
【Vue】基础入门 —— 黑马程序员_第9张图片

注意:相对于 v-text 指令来说,插值表达式在开发中更常用一些!因为它不会覆盖元素中默认的文本内容。

v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素,则需要用到 v-html 这个指令:
【Vue】基础入门 —— 黑马程序员_第10张图片
最终渲染的结果为:
【Vue】基础入门 —— 黑马程序员_第11张图片

1.2 属性绑定指令

如果需要为元素的属性动态绑定属性值,则需要用到 v-bind 属性绑定指令。用法示例如下:
在这里插入图片描述
属性绑定指令的简写形式
由于 v-bind 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的:)。
【Vue】基础入门 —— 黑马程序员_第12张图片

1.3 使用 Javascript 表达式

在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持Javascript 表达式的运算,例如:在这里插入图片描述

1.4 事件绑定指令

vue 提供了 v-on 事件绑定指令,用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下:
【Vue】基础入门 —— 黑马程序员_第13张图片
注意:原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件,替换为 vue 的事件绑定形式后,
分别为:v-on:click、v-on:input、v-on:keyup

通过 v-on 绑定的事件处理函数,需要在 methods 节点中进行声明
在这里插入图片描述
事件绑定的简写形式
由于 v-on 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的 @ )。
【Vue】基础入门 —— 黑马程序员_第14张图片
事件参数对象
在原生的 DOM 事件绑定中,可以在事件处理函数的形参处,接收事件参数对象 event。同理,在v-on 指令(简写为 @ )所绑定的事件处理函数中,同样可以接收到事件参数对象 event,示例代码如下:
在这里插入图片描述
绑定事件并传参
在使用 v-on 指令绑定事件时,可以使用 ( ) 进行传参,示例代码如下:
【Vue】基础入门 —— 黑马程序员_第15张图片
$event
$event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event。$event 可以解决事件参数对象event被覆盖的问题。示例用法如下:
在这里插入图片描述
事件修饰符
在事件处理函数中调用event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此,
vue 提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下:

在这里插入图片描述

【Vue】基础入门 —— 黑马程序员_第16张图片
按键修饰符
在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符,例如:【Vue】基础入门 —— 黑马程序员_第17张图片

1.5 双向绑定指令

vue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。
【Vue】基础入门 —— 黑马程序员_第18张图片
v-model 指令的修饰符
为了方便对用户输入的内容进行处理,vue 为 v-model 指令提供了 3 个修饰符,分别是:
【Vue】基础入门 —— 黑马程序员_第19张图片
示例如下:
【Vue】基础入门 —— 黑马程序员_第20张图片

1.6 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个,分别是:
⚫ v-if
⚫ v-show
示例用法如下:
【Vue】基础入门 —— 黑马程序员_第21张图片
v-if 和 v-show 的区别

实现原理不同:
⚫ v-if 指令会动态地创建或移除DOM 元素,从而控制元素在页面上的显示与隐藏;
⚫ v-show 指令会动态为元素添加或移除 style=“display: none;” 样式,从而控制元素的显示与隐藏;

性能消耗不同:
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此:
⚫ 如果需要非常频繁地切换,则使用 v-show 较好
⚫ 如果在运行时条件很少改变,则使用 v-if 较好

v-else
v-if 可以单独使用,或配合 v-else 指令一起使用:
【Vue】基础入门 —— 黑马程序员_第22张图片
注意:v-else 指令必须配合 v-if 指令一起使用,否则它将不会被识别!

v-else-if
v-else-if 指令,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:
【Vue】基础入门 —— 黑马程序员_第23张图片
注意:v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别!

1.7 列表渲染指令

vue 提供了 v-for 列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法,其中:
⚫ items 是待循环的数组
⚫ item 是被循环的每一项
【Vue】基础入门 —— 黑马程序员_第24张图片
v-for 中的索引
v-for 指令还支持一个可选的第二个参数,即当前项的索引。语法格式为 (item, index) in items,示例代码如下:
【Vue】基础入门 —— 黑马程序员_第25张图片
使用 key 维护列表的状态
当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的DOM 元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。

为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能。此时,需要为每项提供一个唯一的 key 属性:
在这里插入图片描述
key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性(即:key 的值不能重复)
③ 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
④ 使用 index 的值当作 key 的值没有任何意义(因为index 的值不具有唯一性)
⑤ 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

2. 过滤器

过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用,示例代码如下:【Vue】基础入门 —— 黑马程序员_第26张图片

2.1 定义过滤器

在创建 vue 实例期间,可以在 filters 节点中定义过滤器,示例代码如下:
在这里插入图片描述

2.2 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器,则可以按照如下的格式定义全局过滤器:
【Vue】基础入门 —— 黑马程序员_第27张图片

2.3 连续调用多个过滤器

过滤器可以串联地进行调用,例如:
【Vue】基础入门 —— 黑马程序员_第28张图片
示例代码如下:
【Vue】基础入门 —— 黑马程序员_第29张图片

2.4 过滤器传参

过滤器的本质是 JavaScript 函数,因此可以接收参数,格式如下:
【Vue】基础入门 —— 黑马程序员_第30张图片
示例代码如下:
【Vue】基础入门 —— 黑马程序员_第31张图片

2.5 过滤器的兼容性

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

在企业级项目开发中:
⚫ 如果使用的是 2.x 版本的 vue,则依然可以使用过滤器相关的功能
⚫ 如果项目已经升级到了3.x 版本的 vue,官方建议使用计算属性或方法代替被剔除的过滤器功能。具体的迁移指南,请参考 vue 3.x 的官方文档给出的说明:https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

2.6 过滤器的注意点

  1. 要定义到 filters 节点下,本质是一个函数
  2. 在过滤器函数中,一定要有 return 值
  3. 在过滤器的形参中,可以获取到“管道符”前面待处理的那个值
  4. 如果全局过滤器和私有过滤器名字一致,此时按照“就近原则”,调用的是”私有过滤器“

watch 侦听器

1. 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。语法格式如下:在这里插入图片描述

2. 使用 watch 检测用户名是否可用

监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用:【Vue】基础入门 —— 黑马程序员_第32张图片

3. immediate 选项

默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使
用 immediate 选项。示例代码如下:
【Vue】基础入门 —— 黑马程序员_第33张图片

4. deep 选项

如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选项,代码示例如下:【Vue】基础入门 —— 黑马程序员_第34张图片

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

如果只想监听对象中单个属性的变化,则可以按照如下的方式定义watch 侦听器:【Vue】基础入门 —— 黑马程序员_第35张图片

6. 侦听器的格式

1. 方法格式的侦听器

  • 缺点1:无法在刚进入页面的时候,自动触发!!!
  • 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器!!!

2. 对象格式的侦听器

  • 好处1:可以通过 immediate 选项,让侦听器自动触发!!!
  • 好处2:可以通过 deep 选项,让侦听器深度监听对象中每个属性的变化!!!

计算属性

1. 什么是计算属性

计算属性指的是通过一系列运算之后,最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下:【Vue】基础入门 —— 黑马程序员_第36张图片

2. 计算属性的特点

① 虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性
② 计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算

特点总结:

  1. 定义的时候,要被定义为“方法”
  2. 在使用计算属性的时候,当普通的属性使用即可

好处:

  1. 实现了代码的复用
  2. 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!

axios

axios 是一个专注于网络请求的库!

axios 的基本使用

1. 发起 GET 请求:

axios({
  // 请求方式
  method: 'GET',
  // 请求的地址
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  // URL 中的查询参数
  params: {
    id: 1
  }
}).then(function (result) {
  console.log(result)
})

2. 发起 POST 请求:

document.querySelector('#btnPost').addEventListener('click', async function () {
  // 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
  // await 只能用在被 async “修饰”的方法中
  const { data: res } = await axios({
    method: 'POST', 
    url: 'http://www.liulongbin.top:3006/api/post',
    data: {
      name: 'zs',
      age: 20
    }
  })

  console.log(res)
})

【Vue】基础入门 —— 黑马程序员_第37张图片

vue-cli

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

单页面应用程序(英文名:Single Page Application)简称 SPA,顾名
思义,指的是一个 Web 网站中只有唯一的一个HTML 页面,所有的功能
与交互都在这唯一的一个页面内完成。例如资料中的这个 Demo 项目:在这里插入图片描述

2. 什么是 vue-cli

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

引用自 vue-cli 官网上的一句话:程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。

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

3. 安装和使用

vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:npm install -g @vue/cli
基于 vue-cli 快速生成工程化的 Vue 项目:vue create 项目的名称

3.1 vue-cli 的使用

  1. 在终端下运行如下的命令,创建指定名称的项目:

    vue cerate 项目的名称
    
  2. vue 项目中 src 目录的构成:

    assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
    
    components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
    
    main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
    
    App.vue 是项目的根组件。
    

【Vue】基础入门 —— 黑马程序员_第38张图片
请添加图片描述
请添加图片描述
【Vue】基础入门 —— 黑马程序员_第39张图片
请添加图片描述

4. vue 项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中:
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

vue 组件

1. 什么是组件化开发

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

2. vue 中的组件化开发

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

3. vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成,分别是:

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

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

3.1 template

vue 规定:每个组件对应的模板结构,需要定义到 节点中。
【Vue】基础入门 —— 黑马程序员_第40张图片

注意:

  • template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
  • template 中只能包含唯一的根节点

3.2 script

vue 规定:开发者可以在

你可能感兴趣的:(Vue,vue.js,javascript,前端)