黑马JavaWeb开发笔记06——Vue（概述、指令、生命周期）

---

前言

本篇文章是2023年最新黑马JavaWeb开发笔记06：Vue（概述、指令、生命周期）的总结，帮助需要学习Web开发的朋友温故而知新。

1. Vue概述
2. Vue指令
3. 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时渲染,否则不渲染
    

只会渲染符合条件的< span >标签

• v-show

  • 根据条件展示某元素，区别在于切换的是display属性的值
    
    所有的< span >标签都会渲染，只是通过display来控制是否展示该渲染标签
    

• v-for

  • 列表渲染，遍历容器的元素或者对象的属性
  • 语法
    
    
    
    

三、Vue生命周期

• 指的是vue对象从创建到销毁的过程。
• vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法
• 其完整的生命周期如下图所示：
  
  
  其中我们需要重点关注的是mounted,其他的我们了解即可。
• mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
  

---

总结

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单DAY2完结）06：Vue（概述、指令、生命周期）的总结，帮助需要学习Web开发的朋友温故而知新。

1. Vue概述
2. Vue指令
3. Vue生命周期