当前位置: 首页> 汽车> 行情 > 黑马JavaWeb开发笔记06——Vue(概述、指令、生命周期)

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

时间:2025/7/11 0:16:31来源:https://blog.csdn.net/apple_68589597/article/details/141562132 浏览次数: 0次

文章目录

  • 前言
  • 一、Vue概述
    • 1. MVVM前端开发思想
    • 2. 框架是什么
    • 3. Vue介绍
    • 4. Vue快速入门
  • 二、Vue常用指令
  • 三、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生命周期
关键字:黑马JavaWeb开发笔记06——Vue(概述、指令、生命周期)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: