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

Vue.js

2022年11月09日 14:29:59前端技术6

课程介绍

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
分享给朋友:

“Vue.js” 的相关文章

vue中对html标签中的属性进行字符串拼接

先用v-bind将该属性的属性值转化为变量模式,然后即可实现拼接 //若再发现有其它方式,再进行更新 <div v-for="(item,index) in tabs" @click="tab(index)">...

vue框架中更改body,html页面背景颜色

beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { document.query...

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤 首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

vue init webpack 建vue项目报错的解决方法

vue init webpack my-project   C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.ar...

vue原理简介

vue原理简介

写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下。 vue.js中有两个核心功能:响应式数据绑定,组件系统。主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件,从而动态地修改model和view。...

vue实现菜单权限控制

vue实现菜单权限控制

大家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两种——前端控制和后端控制。我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由。下面我会分别介绍这两种方法的优缺点以及如何实现(不熟悉vue-router API的同学可以先去官网看一...

Vue系列教程(一)基础介绍

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也可以进行手机App的开发,需要借助Weex) Vue.js 是前端的主流框架之一,...

优秀的 Vue框架案例

总链接:https://github.com/vuejs/awesome-vue#component-collections 链接1:https://github.com/TonyLuo/element-vue-admin 移动端UI框架链接:htt...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。