Vue3 学习笔记--基础部分

1、介绍

Vue 是一套用于构建用户界面的 渐进式框架

渐进式框架的意思就是，我们可以在项目中一点点的引入和使用 Vue

而不一定要使用 Vue 来开发整个项目

Vue 的本质就是一个 JavaScript 库

1.1 CDN 引入

我们在使用 Vue 时，需要将其添加到项目中

对于初学者，可以使用 CDN 引入

CDN 是一种通过互联网相互连接的电脑网络系统

利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件

发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户

引入方式如下：

1.2 命令式编程和声明式编程

命令式编程关注的是 how to do

声明式编程关注的是 what to do，由框架完成 how 的过程

Vue 就属于声明式编程

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

---

2、模板

下面来介绍一下模板中的内容

2.1 template

一个字符串模板，用作 component 实例的标记 ？

模板将会 替换 所挂载元素的 innerHTML

挂载元素的原有内容都将被忽略，除非模板中存在通过插槽分发的内容

分离写法和 Vue2 相同

传入的时候加 # 是因为，如果值以 # 开始，那么它将被用作 querySelector

并且使用 匹配元素 的 innerHTML 作为模板字符串

2.2 data

类型：Function

该函数返回组件实例的 data 对象

注：data 中返回的对象会被 Vue 的响应式系统劫持

       之后对该对象的修改或者访问都会在劫持中被处理

2.3 methods

类型：{ [ key：string ]：Function }

通常我们会在 methods 里面定义很多方法

这些方法可以被绑定到 template 模板中

我们可以直接使用 this 关键字访问 data 中返回的对象的属性

因为方法中的 this 自动绑定为组件实例

注意：methods 中不能使用箭头函数，理由是箭头函数绑定了父级作用域的上下文

所以 this 将不会按照期望指向组件实例

2.4 Mustache

也称双大括号语法，数据绑定最常见的形式

Mustache 中不仅可以是 data 中的属性，也可以是一个 JavaScript 中的表达式

---

3、常见指令

3.1 v-once

只渲染元素和组件一次

随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过

这可以用于优化更新性能

用法如下：

This will never change: {{msg}}


  
comment
  
{{msg}}





  
{{i}}

3.2 v-text

更新元素的文本内容

  
  
  {{message}}

3.3 v-html

更新元素的 innerHTML

页面效果如图：

3.4 v-pre

跳过这个元素和它的子元素的编译过程

可以用来显示原始的 Mustache 标签

跳过大量没有指令的节点会加快编译

页面效果如图：

3.5 v-cloak

可以隐藏未编译的 Mustache 标签直到组件实例准备完毕

只有在编译结束之后 h2 里面的内容才会显示出来

3.6 v-bind

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式

缩写为 :

用法如下：

3.6.1 绑定 HTML Class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class

所以上面 active 这个 class 是否存在 取决于 isActive 的值是否为 true

此外，v-bind:class 也可以与普通的 class 属性共存

如下：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

渲染结果为：

其中 static 就是静态绑定的 class，后面两个 class 则是动态绑定的

注：我们可以看到 text-danger 外面加了引号，短横线拼接的字符串就需要加引号

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

渲染结果为：

3.6.2 绑定内联样式

对象语法

直接上代码

也可以像下面这样写：

css 的属性名可以用驼峰式和短横线分割来命名，值得注意的是后者要加引号

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

我们也可以把上面两个样式合并到一个对象中，使模板更加清晰

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

3.7 v-on

用于监听 DOM 事件

缩写为 @

基本用法：

 ... 

如果希望一个元素绑定多个事件，可以传入一个对象 

修饰符：

• .stop - 调用 event.stopPropagation()
• .prevent - 调用 event.preventDefault()
• .capture - 添加事件侦听器时使用 capture 模式
• .self - 只有当事件是从侦听器绑定的元素本身触发时才触发回调
• .{ keyAlias } - 仅当事件是从特定键触发时才触发回调
• .once - 只触发一次回调
• .left - 只当点击鼠标左键时触发
• .right - 只当点击鼠标右键时触发
• .middle - 只当点击鼠标中键时触发
• .passive - { passive: true } 模式添加侦听器

v-on 的参数传递问题 ？

---

4、条件渲染

4.1 基本用法

Vue is awesome!

Oh no 

条件为 true 时才会渲染

4.2 在 template 元素上使用

因为 v-if 是一个指令，所以必须将它添加到一个元素上

但是如果想切换多个元素呢

4.3 v-show

用于条件性展示元素的另一种方式

Hello!

4.4 v-show 和 v-if 的区别

首先，在用法上的区别

v-show 是不支持和 template 一起使用

v-show 不可以和 v-else 一起使用

其次，本质的区别是

v-show 元素无论是否需要显示到浏览器上，它的 DOM 实际都是有渲染的

只是通过 CSS 的 display 属性来进行切换

v-if 条件为 false 时，其对应的元素不会被渲染到 DOM 中

在实际开发中，应该如何进行选择呢？

如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用 v-show

如果不会频繁的发生切换，那么使用 v-if

---

5、列表渲染

5.1 v-for 的基本使用

页面效果如图：

5.2 在