0
点赞
收藏
分享

微信扫一扫

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

Vue目录


写在前面

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


一、Vuejs学习导图

在这里插入图片描述

二、邂逅Vuejs

2.1.认识Vuejs

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

在这里插入图片描述

渐进式框架

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

学习Vue前提

2.2.Vue.js安装

方式一:直接CDN引入

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

<!-- 开发环境版本,包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二:下载和引入

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

方式三:NPM安装

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

2.3.Vuejs初体验

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

在这里插入图片描述

Vue列表显示

现在,我们来展示一个更加复杂的数据:数据列表。
比如我们现在从服务器请求过来一个列表 希望展示到HTML中
在这里插入图片描述
在这里插入图片描述

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

2.4.案例:计数器

点击 + 计数器+1
点击 - 计数器 -1
在这里插入图片描述

2.5.Vue中的MVVM

什么是MVVM呢?

我们直接来看Vue的MVVM
在这里插入图片描述
View层:

Model层:

VueModel层:

2.6.Vue的生命周期

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

三、基础语法

3.1.内容概述

3.2.Mustache

可以通过Mustache语法(也就是双大括号)将data中的文本数据,插入到HTML中。
Mustache: 胡子/胡须.

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

在这里插入图片描述

3.3.v-once

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

v-once:

代码如下:
在这里插入图片描述

3.4.v-html

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

如果我们希望解析出HTML展示
可以使用v-html指令

在这里插入图片描述

3.5.v-text

v-text作用和Mustache比较相似:都是用于将数据显示在界面中
v-text通常情况下,接受一个string类型
在这里插入图片描述

3.6.v-pre

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

比如下面的代码:

在这里插入图片描述
在这里插入图片描述

3.7.v-cloak

在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。
cloak: 斗篷
在这里插入图片描述

在这里插入图片描述

3.8.v-bind

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

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

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(二)

绑定方式:对象语法

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

用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

3.8.5.v-bind绑定class(三)

绑定方式:数组语法

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

用法一:直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二:也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三:和普通的类同时存在,并不冲突
注:会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

3.8.6.v-bind绑定style(一)

可以利用v-bind:style来绑定一些CSS内联样式
在写CSS属性名的时候,比如font-size

绑定class有两种方式:

3.8.7.v-bind绑定style(二)

绑定方式一:对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

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

绑定方式二:数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

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

3.9.计算属性

3.9.1.什么是计算属性?

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

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

在这里插入图片描述
在这里插入图片描述

3.9.2.计算属性的复杂操作

算属性中也可以进行一些更加复杂的操作,比如下面的例子:
在这里插入图片描述

3.9.3.计算属性的setter和getter

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

在需要写setter的时候,代码如下:

在这里插入图片描述

3.9.4.计算属性的缓存

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

在这里插入图片描述
在这里插入图片描述

3.10.事件监听

在前端开发中,我们需要经常和用于交互。

v-on介绍

3.10.1.v-on基础

们用一个监听按钮的点击事件,来简单看看v-on的使用
下面的代码中,我们使用了v-on:click="counter++”
另外,我们可以将事件指向一个在methods中定义的函数

在这里插入图片描述
在这里插入图片描述
注:v-on也有对应的语法糖:
v-on:click可以写成@click

在这里插入图片描述

3.10.2.v-on参数

当通过methods中定义方法,以供@click调用时,需要注意参数问题:

在这里插入图片描述
在这里插入图片描述

3.10.3.v-on修饰符

Vue提供了修饰符来帮助我们方便的处理一些事件:

在这里插入图片描述

3.11.条件判断

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

v-if、v-else-if、v-else

简单的案例演示:
在这里插入图片描述
在这里插入图片描述
v-if的原理:

3.11.2.条件渲染案例

用户再登录时,可以切换使用用户账号登录还是邮箱地址登录。
类似如下情景:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.11.3.v-show

v-show的用法和v-if非常相似,也用于决定一个元素是否渲染
v-if和v-show对比
v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?

开发中如何选择呢?

在这里插入图片描述

3.12.循环遍历

3.12.1.v-for遍历数组

v-for的语法类似于JavaScript中的for循环。
格式如下:item in items的形式

案例:
在这里插入图片描述
在这里插入图片描述

3.12.2.v-for遍历对象

v-for可以用户遍历对象:
比如某个对象中存储着你的个人信息,我们希望以列表的形式显示出来。

在这里插入图片描述

3.12.3.组件的key属性

官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢(了解)?

当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点
我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的。
即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
所以一句话,key的作用主要是为了高效的更新虚拟DOM。

3.12.4.检测数组更新

因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。

在这里插入图片描述

3.13.阶段案例

3.13.1.代码实现:HTML、CSS

在这里插入图片描述
在这里插入图片描述

3.13.2.代码实现:JS代码

在这里插入图片描述
在这里插入图片描述

3.14.v-model

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定

当然,我们也可以将v-model用于textarea元素
在这里插入图片描述在这里插入图片描述

3.14.1.v-model原理

v-model其实是一个语法糖,它的背后本质上是包含两个操作:
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
也就是说下面的代码:等同于下面的代码:

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

在这里插入图片描述

3.14.2.v-model:radio

当存在多个单选框时在这里插入图片描述

3.14.3.v-model:checkbox

复选框分为两种情况:单个勾选框和多个勾选框
单个勾选框:

多个复选框:

在这里插入图片描述
在这里插入图片描述

3.14.4.v-model:select

和checkbox一样,select也分单选和多选两种情况。
单选:只能选中一个值。

多选:可以选中多个值。

3.14.5.值绑定

即为动态的给value赋值而已:

3.14.6.修饰符

lazy修饰符

number修饰符:

trim修饰符:

在这里插入图片描述

👇🏻可通过点击下面——>关注本人运营 公众号👇🏻
举报

相关推荐

0 条评论