前言
本篇文章是2023年最新黑马JavaWeb企业级开发(知识清单DAY2完结)06:Vue(概述、指令、生命周期)的总结,帮助需要学习Web开发的朋友温故而知新。
- Vue概述
- Vue指令
- Vue生命周期
一、Vue概述
1. MVVM前端开发思想
- MVVM:其实是Model-View-ViewModel的缩写,有3个单词,具体释义如下:
- Model: 数据模型,特指前端中通过请求从后台获取的数据
- View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据
- ViewModel: 数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展
示到视图(View)上
- 基于上述的MVVM思想,其中的Model我们可以通过Ajax来发起请求从后台获取;
- 对于View部分,将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;
- 此篇文章的侧重在于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作,让数据展示到视图的代码开发变得更加的简单
2. 框架是什么
- 框架是一个半成品软件,是一套可重用的、通用的、软件基础代码模型
- 基于框架进行开发,更加快捷、更加高效
3. Vue介绍
- Vue.js(读音类似于 view) 是一套构建用户界面的渐进式框架(基于MVVM模型的前端JS框架)
- 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计
- Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合
- Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
- Vue官网(点击此处转跳)
4. Vue快速入门
-
第一步:在VS Code中创建名为12. Vue-快速入门.html的文件,并且在html文件同级创建js目
录,将资料/vue.js文件目录下得vue.js拷贝到js目录 -
第二步:编写< script >标签来引入vue.js文件
-
第三步:在js代码区域定义vue对象
- 在创建vue对象时,有几个常用的属性:
- el: 用来指定哪儿些标签受 Vue 管理
- 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
- data: 用来定义数据模型
- methods: 用来定义函数
-
第四步:在html区域编写视图,其中{{}}是插值表达式,用来将vue对象中定义的model展示到页面上
- v-model是数据绑定指令,使用之后数据模型(message)中的数据就会直接在视图层中展示出来
- 视图层的数据和和message数据是一体的,前者变了后者也会跟着变(相互影响)
- 插值表达式
- 形式:
{{表达式}}
- 内容:可以是变量、三元运算符、函数调用、算数运算
- 形式:
二、Vue常用指令
-
HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义。
-
在vue中,通过大量的指令来实现数据绑定到视图
-
vue的常用指令有:
-
v-bind
- 为HTML标签绑定属性值,如设置 href , css样式等。当vue对象中的数据模型发生变化时,标签的属性值会随之发生变化。
- 要给< a >标签的href属性赋值,并且值应该来自于vue对象的数据模型中的url变量:
<a v-bind:href="url">链接1</a>
- v-bind指令是可以省略的,但是 :不能省略 :
<a :href="url">链接2</a>
- v-model
- 在表单元素上创建双向数据绑定
- 双向:vue对象的data属性中的数据变化,视图展示会一起变化视图数据发生变化,vue对象的data属性中的数据也会随着变化
- 双向绑定一定是使用在表单项标签上的
<input type="text" v-model="url">
注意:一旦v-bind或者v-model绑定了某个变量(url),那么这个变量必须要在数据模型中被定义
-
v-on
为html标签绑定事件。注意:- v-on语法给标签的事件绑定的函数,必须是vue对象声明的函数
- 完整语法:
<input type="button" value="按钮" v-on:click="handle()">
- 简写语法:
<input type="button" value="按钮" @click="handle()">
-
v-if
- 条件性的渲染某元素,判定为true时渲染,否则不渲染
- 条件性的渲染某元素,判定为true时渲染,否则不渲染
只会渲染符合条件的< span >标签
-
v-show
- 根据条件展示某元素,区别在于切换的是display属性的值
所有的< span >标签都会渲染,只是通过display来控制是否展示该渲染标签
- 根据条件展示某元素,区别在于切换的是display属性的值
-
v-for
- 列表渲染,遍历容器的元素或者对象的属性
- 语法
三、Vue生命周期
- 指的是vue对象从创建到销毁的过程。
- vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法
- 其完整的生命周期如下图所示:
其中我们需要重点关注的是mounted,其他的我们了解即可。 - mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
总结
本篇文章是2023年最新黑马JavaWeb企业级开发(知识清单DAY2完结)06:Vue(概述、指令、生命周期)的总结,帮助需要学习Web开发的朋友温故而知新。
- Vue概述
- Vue指令
- Vue生命周期