黑马JavaWeb企业级开发(知识清单DAY2完结)06——Vue(概述、指令、生命周期)

文章目录

  • 前言
  • 一、Vue概述
    • 1. MVVM前端开发思想
    • 2. 框架是什么
    • 3. Vue介绍
    • 4. Vue快速入门
  • 二、Vue常用指令
  • 三、Vue生命周期
  • 总结


前言

本篇文章是2023年最新黑马JavaWeb企业级开发(知识清单DAY2完结)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生命周期

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式篇(DesignPattern - 创建型模式)

目录 模式一&#xff1a;单例模式 一、简介 二、种类 1. 饿汉式(静态常量&#xff09; 1.1. 代码 1.2. 优缺点 2. 饿汉式&#xff08;静态代码块&#xff09; 2.1. 代码 2.2. 优缺点 3. 懒汉式(线程不安全) 3.1. 代码 3.2. 优缺点 4. 懒汉式(线程安全&#xff0c;…

GeoStudio2024:地质工程的瑰宝下载安装介绍

引言 青山隐隐&#xff0c;流水潺潺&#xff0c;吾心所向&#xff0c;乃地质之奥秘。GeoStudio2024&#xff0c;如同一卷古籍&#xff0c;蕴藏无尽智慧&#xff0c;助吾等探寻地质之真谛。今以李白之笔&#xff0c;述其妙用&#xff0c;愿与君共赏。 初识GeoStudio2024 初见…

港股震荡中保持乐观,市场信心回来了!

港股上午盘三大指数集体上涨&#xff0c;恒生科技指数一度冲高至1.54%&#xff0c;最终收涨0.98%&#xff0c;恒生指数上涨1.06%。盘面上&#xff0c;大型科技股多数维持上涨行情&#xff0c;百度、腾讯涨超1.5%&#xff0c;快手、美团小幅上涨&#xff0c;阿里巴巴、京东飘绿&…

蜂鸣器电路为什么要加三极管

在电路设计中加入三极管来驱动蜂鸣器&#xff0c;是为了实现电流放大、保护单片机引脚、电平转换和提高电路稳定性等。以下将详细解析为何要在蜂鸣器电路中加入三极管的原因&#xff1a; 实现电流放大&#xff1a;三极管的主要功能之一是电流放大。在一些需要较大驱动电流的蜂…

工作纪实56-ES搜索串一致性

最近接收到了一个需求&#xff0c;一个用户有一组搜索串&#xff0c;比如字符串&#xff1a;abcdefg&#xff0c;如果新增的数据是abdcdfge&#xff0c;则视为是同一条数据&#xff0c;可以理解为即使顺序不同&#xff0c;但是实际上也是唯一串&#xff1b; 为什么是一个数据串…

没及格,我猜这套华为软件测试面试题没几个人能及格

一&#xff0e;填空 1、 系统测试使用&#xff08; C &#xff09;技术, 主要测试被测应用的高级互操作性需求, 而无需考虑被测试应用的内部结构。 A、 单元测试 B、 集成测试 C、 黑盒测试 D、白盒测试 2、单元测试主要的测试技术不包括&#xff08;B &…

layui栅格布局设置列间距不起作用

layui栅格布局支持设置列间距&#xff0c;只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。   根据layui官网文档的说明&#xff0c;只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示&#xff1a;   但是实际使用…

【数据结构】二叉树的顺序结构,详细介绍堆以及堆的实现,堆排序

目录 1. 二叉树的顺序结构 2. 堆的概念及结构 3. 堆的实现 3.1 堆的结构 3.2 堆的初始化 3.3 堆的插入 3.4 堆的删除 3.5 获取堆顶数据 3.6 堆的判空 3.7 堆的数据个数 3.8 堆的销毁 4. 堆的应用 4.1 堆排序 4.1.1 向下调整建堆的时间复杂度 4.1.2 向上调整建…

GPT-4o System Card is released

GPT-4o System Card is released, including red teaming, frontier risk evaluations, and other key practices for industrial-strength Large Language Models. https://openai.com/index/gpt-4o-system-card/ 报告链接 企业级生成式人工智能LLM大模型技术、算法及案例实战…

MSSQLILABS靶场通关攻略

判断注入 首先用单双引号判断是否存在注入&#xff0c;这里可以看到是单引号 判断是否为 MSSQL 数据库 可以通过以下Payload来探测当前站点是否是MSSQL数据库&#xff0c;正常执行说明后台数据库为MSSQL&#xff1b;也可以根据页面的报错信息来判断数据库 and exists( select…

validateFields里的values是空值

总结-反思 前提&#xff1a;react-后台管理&#xff0c;父组件里套着子组件&#xff0c;如后台管理的待办、待阅页面 情况&#xff1a;后台管理表格页面&#xff0c;输入内容点击查询&#xff0c;查到对应数据后&#xff0c;点击这条数据&#xff0c;当把点开的数据关闭时&…

基于pygame的雷电战机小游戏

import pygame import sys import random# 初始化 Pygame pygame.init()# 设置窗口尺寸 WIDTH, HEIGHT 800, 600 screen pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption("雷电战机")# 设置颜色 BLACK (0, 0, 0) RED (255, 0, 0) GREEN (…

对于现货白银走势图分析,不是单纯为了回报

投资白银选对工具和产品真的很重要。如果投资者选择的是实物银条&#xff0c;或者纸白银等相对低效的投资方式&#xff0c;收益只能跟随白银的价格涨跌&#xff0c;比如今年以来&#xff0c;国际白银价格上涨了大概30%&#xff0c;投资者的收益就顶多只有30%&#xff0c;万一买…

人工智能有哪些应用?

在科技的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;犹如一颗璀璨的明星&#xff0c;以其独特的魅力和无限潜力吸引了全球的目光。随着深度学习、机器学习、自然语言处理等核心技术的飞速发展与迭代&#xff0c;人工智能已经从实验室走向各行各业&#xff0c;深深地…

[数据集][目标检测]道路积水检测数据集VOC+YOLO格式2699张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2699 标注数量(xml文件个数)&#xff1a;2699 标注数量(txt文件个数)&#xff1a;2699 标注…

redis实战——go-redis的使用与redis基础数据类型的使用场景(一)

一.go-redis的安装与快速开始 这里操作redis数据库&#xff0c;我们选用go-redis这一第三方库来操作&#xff0c;首先是三方库的下载&#xff0c;我们可以执行下面这个命令&#xff1a; go get github.com/redis/go-redis/v9最后我们尝试一下连接本机的redis数据库&#xff0…

「C#」EF Core的“迁移”(Migration)

1、“迁移”是什么 “迁移”&#xff08;Migration&#xff09;我觉得可以理解为将实体类的变化 转换为对数据库修改的方案&#xff0c;应用迁移就是将这个修改方案应用到数据库。其次&#xff0c;迁移也记录了数据库的版本历史等信息。 2、添加迁移 2.1、dotnet cli tool …

如何在Java Maven项目中使用JUnit 5进行测试

如何在Java Maven项目中使用JUnit 5进行测试 1. 简介 JUnit 5概述 JUnit是Java编程语言中最流行的测试框架之一。JUnit 5是JUnit的最新版本&#xff0c;它引入了许多新特性和改进&#xff0c;使得编写和运行测试更加灵活和强大。 为什么选择JUnit 5 JUnit 5不仅提供了更强…

Furion+SqlSugar+Swagger企业级后端工程师 - 学习路线总目录

一、Furion框架介绍 Furion 是一个基于 .NET 5 平台开发的框架&#xff08;Furion v5 版本采用 C# 12 和 .NET 8 进行开发。&#xff09;&#xff0c;致力于使 .NET 开发过程更简单、通用和流行。该框架的名字“Furion”源自中文“先知”&#xff0c;意味着它旨在领先和预见技…

设计模式反模式:UML图示常见误用案例分析

第一章 引言 1.1 设计模式与反模式概述 在软件开发领域&#xff0c;设计模式与反模式是两种截然不同的概念&#xff0c;它们在软件设计过程中起着至关重要的作用。设计模式是经过验证的最佳实践&#xff0c;用于解决在特定上下文中经常出现的问题&#xff0c;从而提高软件的可…