当前位置：首页 > 前端技术 > Vue.js

Vue.js

前端技术

课程介绍

Vue.js _ JavaClub全栈架构师技术笔记

内容概述
◼ 认识 Vuejs
◼ 为什么学习 Vuejs
◼ 简单认识一下 Vuejs
◼ Vuejs 安装方式
◼ CDN 引入
◼ 下载和引入
◼ NPM 安装管理
◼ Vuejs 初体验
◼ Hello Vuejs
◼ Vue 列表展示
◼ 案例：计数器
◼ Vuejs 的 MVVM
◼ Vue 中的 MVVM
 

为什么学习Vuejs？

我相信每个人学习 Vue 的目的是各不相同的。
◼ 可能你的公司正要将原有的项目使用 Vue 进行重构。
◼ 也可能是你的公司新项目决定使用 Vue 的技术栈。
◼ 当然，如果你现在正在换工作，你会发现招聘前端的需求中， 10 个有 8 个都对 Vue 有或多或少的要求。
◼ 当然，作为学习者我们知道 Vuejs 目前非常火，可以说是前端必备的一个技能。
 

简单认识Vuejs

◼ Vue ( 读音 /vjuː/ ，类似于 view) ，不要读错。
◼ Vue 是一个渐进式的框架，什么是渐进式的呢？
◼ 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验。
◼ 或者如果你希望将更多的业务逻辑使用 Vue 实现，那么 Vue 的核心库以及其生态系统。
◼ 比如 Core+Vue-router+Vuex ，也可以满足你各种各样的需求。
◼ Vue 有很多特点和 Web 开发中常见的高级功能
◼ 解耦视图和数据
◼ 可复用的组件
◼ 前端路由技术
◼ 状态管理
◼ 虚拟 DOM
◼ 这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行
讲解。
◼ 学习 Vuejs 的前提？
◼ 从零学习 Vue 开发，并不需要你具备其他类似于 Angular 、 React ，甚至是 jQuery 的经验。
◼ 但是你需要具备一定的 HTML 、 CSS 、 JavaScript 基础。
 

Vue.js安装

◼ 使用一个框架，我们第一步要做什么呢？安装下载它
◼ 安装 Vue 的方式有很多：
◼ 方式一：直接 CDN 引入
◼ 你可以选择引入开发环境版本还是生产环境版本
◼
方式二：下载和引入
◼
方式三： NPM 安装
◼ 后续通过 webpack 和 CLI 的使用，我们使用该方式
 
Vue.js _ JavaClub全栈架构师技术笔记
 

Hello Vuejs

我们来做我们的第一个 Vue 程序，体验一下 Vue 的响应式
◼
代码做了什么事情？
◼
我们来阅读 JavaScript 代码，会发现创建了一个 Vue 对象。
◼
创建 Vue 对象的时候，传入了一些 options ： {}
◼
{} 中包含了 el 属性：该属性决定了这个 Vue 对象挂载到哪一个元
素上，很明显，我们这里是挂载到了 id 为 app 的元素上
◼
{} 中包含了 data 属性：该属性中通常会存储一些数据
◼
这些数据可以是我们直接定义出来的，比如像上面这样。
◼
也可能是来自网络，从服务器加载的。
◼
浏览器执行代码的流程：
◼
执行到 10~13 行代码显然出对应的 HTML
◼
执行第 16 行代码创建 Vue 对象，并且对原 HTML 进行解析和修改。
◼
并且，目前我们的代码是可以做到响应式的。
 
Vue.js _ JavaClub全栈架构师技术笔记
 

Vue列表显示

 

 
现在，我们来展示一个更加复杂的数据：数据列表。
◼
比如我们现在从服务器请求过来一个列表
◼
希望展示到 HTML 中。
◼
HTML 代码中，使用 v-for 指令
◼ 该指令我们后面会详细讲解，这里先学会使用。
◼
是不是变得 So Easy ，我们再也不需要在 JavaScript 代码中完成
DOM 的拼接相关操作了
◼
而且，更重要的是，它还是响应式的。
◼
也就是说，当我们数组中的数据发生改变时，界面会自
动改变。
◼
依然让我们打开开发者模式的 console ，来试一下
 
Vue.js _ JavaClub全栈架构师技术笔记
 
案例：计数器
◼
现在，我们来实现一个小的计数器
◼
点击 + 计数器 +1
◼
点击 - 计数器 -1
◼
这里，我们又要使用新的指令和属性了
◼
新的属性： methods ，该属性用于在 Vue 对象中定义方
法（函数）。
◼
新的指令： @click, 该指令用于监听某个元素的点击事
件，并且需要指定当发生点击时，执行的方法 ( 方法通
常是 methods 中定义的方法 )
◼
你可能会疑惑？
◼
这些 @click 是什么东西？
◼
Vue 对象中又是定义 el/data/methods ，到底都有哪些
东西可以定义，以及它们的作用是什么？
◼
这些疑惑在后续学习中都会一一解开。
 
Vue.js _ JavaClub全栈架构师技术笔记
 

Vue中的MVVM

什么是 MVVM 呢？
◼ 通常我们学习一个概念，最好的方式是去看维基百科 ( 对，千万别看成了百度百科 )
◼ https://zh.wikipedia.org/wiki/MVVM
◼ 维基百科的官方解释，我们这里不再赘述
◼ 我们直接来看 Vue 的 MVVM
 
 
View 层：视图层
➢
在我们前端开发中，通常就是 DOM 层。
➢
主要的作用是给用户展示各种信息。
 
Model 层：数据层
➢
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
➢
在我们计数器的案例中，就是后面抽取出来的 data ，当然，里面的数据可能没有这么简
单。
 
ViewModel 层：视图模型层
➢
视图模型层是 View 和 Model 沟通的桥梁。
➢
一方面它实现了 Data Binding ，也就是数据绑定，将 Model 的改变实时的反应到 View 中
➢
另一方面它实现了 DOM Listener ，也就是 DOM 监听，当 DOM 发生一些事件 ( 点击、滚动、
touch 等 ) 时，可以监听到，并在需要的情况下改变对应的 Data 。
 

计数器的MVVM

计数器的 MVVM
 
我们的计数器中就有严格的 MVVM 思想
 
View 依然是我们的 DOM
 
Model 就是我们我们抽离出来的 data
 
ViewModel 就是我们创建的 Vue 对象实例
 
它们之间如何工作呢？
 
首先 ViewModel 通过 Data Binding 让 obj 中的数据实时的在 DOM 中显示。
 
其次 ViewModel 通过 DOM Listener 来监听 DOM 事件，并且通过 methods 中的操作，来改变 data 中的数据。
 
有了 Vue 帮助我们完成 ViewModel 层的任务，在后续的开发，我们就可以专注于数据的处理，以及 DOM 的编写工作了。
 

创建Vue实例传入的options

 

你会发现，我们在创建 Vue 实例的时候，传入了一个对象 options 。
这个 options 中可以包含哪些选项呢？
详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
目前掌握这些选项：
el:
类型： string | HTMLElement
作用：决定之后 Vue 实例会管理哪一个 DOM 。
data:
类型： Object | Function （组件当中 data 必须是一个函数）
作用： Vue 实例对应的数据对象。
methods:
类型： { [key: string]: Function }
作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用。
 
 

模板语法

内容概述

插值操作
 
绑定属性
 
计算属性
 
事件监听
 
条件判断
 
循环遍历
 
阶段案例
 
v-model
 
 

Mustache

 

如何将 data 中的文本数据，插入到 HTML 中呢？
我们已经学习过了，可以通过 Mustache 语法 ( 也就是 双大括号 ) 。
Mustache: 胡子 / 胡须 .
我们可以像下面这样来使用，并且数据是响应式的
 
Vue.js _ JavaClub全栈架构师技术笔记
 

v-once

但是，在某些情况下，我们可能不希望界面随意的跟随改变
这个时候，我们就可以使用一个 Vue 的指令
v-once:
该指令后面不需要跟任何表达式 ( 比如之前的 v-for 后面是由跟表达式的 )
该指令表示元素和组件 ( 组件后面才会学习 ) 只渲染一次，不会随着数据的改变而改变。
代码如下：
 
Vue.js _ JavaClub全栈架构师技术笔记
 

v-html

某些情况下，我们从服务器请求到的数据本身就是一个 HTML 代码
 
如果我们直接通过 { {}} 来输出，会将 HTML 代码也一起输出。
 
但是我们可能希望的是按照 HTML 格式进行解析，并且显示对应的内容。
 
如果我们希望解析出 HTML 展示
  可以使用 v-html 指令
 
该指令后面往往会跟上一个 string 类型
 
会将 string 的 html 解析出来并且进行渲染
 
Vue.js _ JavaClub全栈架构师技术笔记
 

v-text

v-text 作用和 Mustache 比较相似：都是用于将数据显示在界面中
 
v-text 通常情况下，接受一个 string 类型
 
Vue.js _ JavaClub全栈架构师技术笔记
 
 

v-pre

v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法。
 
比如下面的代码：
 
第一个 h2 元素中的内容会被编译解析出来对应的内容
 
第二个 h2 元素中会直接显示 { {message}}
Vue.js _ JavaClub全栈架构师技术笔记

 

v-cloak

 

在某些情况下，我们浏览器可能会直接显然出未编译的 Mustache 标签。
 
cloak: 斗篷
 
前面我们学习的指令主要作用是将值插入到我们 模板的内容 当中。
 
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
 
比如动态绑定 a 元素的 href 属性
 
比如动态绑定 img 元素的 src 属性
 
这个时候，我们可以使用 v-bind 指令：
 
作用 ：动态绑定属性
 
缩写 ： :
 
预期 ： any (with argument) | Object (without argument)
 
参数 ： attrOrProp (optional)
 
下面，我们就具体来学习 v-bind 的使用。
 

v-bind基础

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值 ( 这个学到组件时再介绍 )
 
在开发中，有哪些属性需要动态进行绑定呢？
  还是有很多的，比如图片的链接 src 、网站的链接 href 、动态绑定一些类、样式等等
 
比如通过 Vue 实例中的 data 绑定元素的 src 和 href ，代码如下：
 
Vue.js _ JavaClub全栈架构师技术笔记
 

v-bind语法糖 

v-bind 有一个对应的语法糖，也就是简写方式
 在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
 
简写方式如下：
Vue.js _ JavaClub全栈架构师技术笔记

作者：晚风yY
来源链接：https://blog.csdn.net/m0_55689351/article/details/118108241


版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。





本文链接：https://www.javaclub.cn/front/68816.html

标签: vue
分享给朋友：

关于本站   |   免责申明   |   意见反馈   |   网站历程   |   友情链接   |   标签大全
京ICP备2022013903号

Powered By JavaClub. Theme by TOYEAN.

 
QQ在线咨询
关注公众号
java全栈架构师
回复【加群】
加入微信交流群
微信扫一扫
加入微信交流群
欢迎访问,扫码回复【加群】
邀您进入技术交流群！

欢迎访问本站，JavaClub全栈架构师技术笔记整理、收藏、分享全网优质技术文章教程。

Java全栈架构师:分享Java技术干货，包含多线程、JVM、 Spring Boot、Spring Cloud、IDEA、Dubbo、Zookeeper、Redis、架构设计、微服务、消息队列、Git、面试、程序员攻略、最新动态等。