《Vue入门到精通系列》--- 两万字带你入门Vue

• 3.8.2.v-bind语法糖

• 3.8.3.v-bind绑定class（一）

• 3.8.4.v-bind绑定class（二）

• 3.8.5.v-bind绑定class（三）

• 3.8.6.v-bind绑定style（一）

• 3.8.7.v-bind绑定style（二）

• 3.9.计算属性

• • 3.9.1.什么是计算属性？

• 3.9.2.计算属性的复杂操作

• 3.9.3.计算属性的setter和getter

• 3.9.4.计算属性的缓存

• 3.10.事件监听

• • 3.10.1.v-on基础

• 3.10.2.v-on参数

• 3.10.3.v-on修饰符

• 3.11.条件判断

• • 3.11.1.v-if、v-else-if、v-else

• 3.11.2.条件渲染案例

• 3.11.3.v-show

• 3.12.循环遍历

• • 3.12.1.v-for遍历数组

• 3.12.2.v-for遍历对象

• 3.12.3.组件的key属性

• 3.12.4.检测数组更新

• 3.13.阶段案例

• • 3.13.1.代码实现：HTML、CSS

• 3.13.2.代码实现：JS代码

• 3.14.v-model

• • 3.14.1.v-model原理

• 3.14.2.v-model：radio

• 3.14.3.v-model：checkbox

• 3.14.4.v-model：select

• 3.14.5.值绑定

• 3.14.6.修饰符

---

写在前面

================================================================

💥本篇开始更新Vue入门到精通由浅入深学习 有兴趣小伙伴可关注专栏 持续更新

🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

👇

👉🚔直接跳到末尾🚔👈 ——>领取专属粉丝福利💖

☝️

---

一、Vuejs学习导图

=======================================================================

二、邂逅Vuejs

=====================================================================

2.1.认识Vuejs

---

在这之前 我们先看下Vue岗位的职业要求

渐进式框架

1.渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

2.或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

3.比如Core+Vue-router+Vuex，也可以满足你各种各样的需求

Vue特点和Web开发中常见的高级功能

1.解耦视图和数据

2.可复用的组件

3.前端路由技术

4.状态管理

5.虚拟DOM

学习Vue前提

1.从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。

2.但是你需要具备一定的HTML、CSS、JavaScript基础。

2.2.Vue.js安装

---

方式一：直接CDN引入

你可以选择引入开发环境版本还是生产环境版本

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

通过webpack和CLI的使用，我们使用该方式

2.3.Vuejs初体验

---

我们来做我们的第一个Vue程序，体验一下Vue的响应式

创建Vue对象的时候，传入了一些options：{}

1.{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上

2.{}中包含了data属性：该属性中通常会存储一些数据

这些数据可以是我们直接定义出来的，比如像上面这样。

也可能是来自网络，从服务器加载的。

浏览器执行代码的流程：

1.执行到10~13行代码显然出对应的HTML

2.执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。

并且，目前我们的代码是可以做到响应式的

Vue列表显示

现在，我们来展示一个更加复杂的数据：数据列表。

比如我们现在从服务器请求过来一个列表 希望展示到HTML中

当我们数组中的数据发生改变时，界面会自动改变

2.4.案例：计数器

---

点击 + 计数器+1

点击 - 计数器 -1

methods，该属性用于在Vue对象中定义方法。

@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)

2.5.Vue中的MVVM

---

什么是MVVM呢？

通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)

https://zh.wikipedia.org/wiki/MVVM

维基百科的官方解释，我们这里不再赘述

我们直接来看Vue的MVVM

View层：

1.视图层

2.在我们前端开发中，通常就是DOM层。

3.主要的作用是给用户展示各种信息。

Model层：

1.数据层

2.数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

3.在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

1.视图模型层

2.视图模型层是View和Model沟通的桥梁。

3.一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中

4.另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

2.6.Vue的生命周期

---

三、基础语法

==================================================================

3.1.内容概述

---

插值操作

绑定属性

计算属性

事件监听

条件判断

循环遍历

阶段案例

v-model

3.2.Mustache

---

可以通过Mustache语法(也就是双大括号)将data中的文本数据，插入到HTML中。

Mustache: 胡子/胡须.

我们可以像下面这样来使用，并且数据是响应式的

3.3.v-once

---

在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个Vue的指令

v-once:

1.该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

2.该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

代码如下：

3.4.v-html

---

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

如果我们希望解析出HTML展示

可以使用v-html指令

该指令后面往往会跟上一个string类型 会将string的html解析出来并且进行渲染

3.5.v-text

---

v-text作用和Mustache比较相似：都是用于将数据显示在界面中

v-text通常情况下，接受一个string类型

3.6.v-pre

---

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

比如下面的代码：

第一个h2元素中的内容会被编译解析出来对应的内容

第二个h2元素中会直接显示{{message}}

3.7.v-cloak

---

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

cloak: 斗篷

3.8.v-bind

---

当某些属性我们也希望动态来绑定。

比如动态绑定a元素的href属性

比如动态绑定img元素的src属性

我们可以使用v-bind指令：

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

3.8.1.v-bind基础

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

比如通过Vue实例中的data绑定元素的src和href，代码如下：

3.8.2.v-bind语法糖

在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。

3.8.3.v-bind绑定class（一）

很多时候，我们希望动态的来切换class，比如：

当数据为某个状态时，字体显示红色。

当数据另一个状态时，字体显示黑色

定class有两种方式：

对象语法

数组语法

3.8.4.v-bind绑定class（二）

绑定方式：对象语法

对象语法的含义是:class后面跟的是一个对象。

对象语法有下面这些用法：

用法一：直接通过{}绑定一个类

Hello World

用法二：也可以通过判断，传入多个值

Hello World

用法三：和普通的类同时存在，并不冲突

注：如果isActive和isLine都为true，那么会有title/active/line三个类

Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

Hello World

3.8.5.v-bind绑定class（三）

绑定方式：数组语法

数组语法的含义是:class后面跟的是一个数组。

数组语法有下面这些用法：

用法一：直接通过{}绑定一个类

Hello World

用法二：也可以传入多个值

用法三：和普通的类同时存在，并不冲突

注：会有title/active/line三个类

用法四：如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

Hello World

3.8.6.v-bind绑定style（一）

可以利用v-bind:style来绑定一些CSS内联样式

在写CSS属性名的时候，比如font-size

我们可以使用驼峰式 (camelCase) fontSize

或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

绑定class有两种方式：

对象语法

数组语法

3.8.7.v-bind绑定style（二）

绑定方式一：对象语法

:style=“{color: currentColor, fontSize: fontSize + ‘px’}”

style后面跟的是一个对象类型

对象的key是CSS属性名称

对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二：数组语法

style后面跟的是一个数组类型

多个值以，分割即可

3.9.计算属性

---

3.9.1.什么是计算属性？

在模板中可以直接通过插值语法显示一些data中的数据 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完整的名称。

但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

我们可以将上面的代码换成计算属性：

OK，我们发现计算属性是写在实例的computed选项中的。

3.9.2.计算属性的复杂操作

算属性中也可以进行一些更加复杂的操作，比如下面的例子：

3.9.3.计算属性的setter和getter

每个计算属性都包含一个getter和一个setter

在上面的例子中，我们只是使用getter来读取。

在某些情况下，你也可以提供一个setter方法（不常用）。

在需要写setter的时候，代码如下：

3.9.4.计算属性的缓存

我们可能会考虑这样的一个问题：

methods和computed看起来都可以实现我们的功能，

那么为什么还要多一个计算属性这个东西呢？

原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】