【JavaWeb学习-第三章】Vue

文章目录

  • 1. Vue 概述
  • 2. 快速入门
  • 3. Vue 指令
    • 3.1. v-bind和v-model
    • 3.2. v-on
    • 3.3. v-if 和 v-show
    • 3.4. v-for
    • 3.5. 案例
  • 4. 生命周期


注:
文章信息来源:b站黑马程序员相关的教学视频
    
关于该专栏的文章
    由于最近发现越来越多的小伙伴关注了我最近的文章,所以感觉有必要和大家说明一下。首先非常感谢大家的关注! 然后,我对于JavaWeb的学习来自b站up主黑马程序员。根据教学视频,撰写该专栏的文章,内容了也做出了一些修改和调整,使形式更适合文章阅读,更适合新手学习,我会把完整的代码给出来,也会附上工程目录结构。另外,如果小伙伴们有什么疑惑也可以评论或私信我,我会尽己所能解答疑惑。


1. Vue 概述

    通过前面学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求 从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。正因为这种开发流程,所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想,即让我们开发者更加关注数据,而非数据绑定到视图这种机械化的操作

    那么具体什么是MVVM思想呢?
        MVVM:其实是 Model-View-ViewModel 的缩写,有3个单词,具体释义如下:
        Model: 数据模型,特指前端中通过请求从后台获取的数据
        View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据
        ViewModel: 数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上

如图所示就是MVVM开发思想的含义:

【JavaWeb学习-第三章】Vue_第1张图片
    基于上述的MVVM思想,其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分,我们将来会学习一款ElementUI框架来替代HTML+CSS,从而更加方便的搭建View;而本片博文要学习的就是侧重于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作,让数据展示到视图的代码开发变得更加的简单

    可以简单到什么程度呢?可以参考下图对比:

【JavaWeb学习-第三章】Vue_第2张图片

    在更加复杂的dom操作中,vue只会变得更加的简单!在上述的代码中,我们看不到之前的DOM操作,因为vue全部帮我们封装好了

    接下来我们来介绍一下vue。
    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合Vue.js目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    框架即是一个半成品软件,是一套可重用的通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。

2. 快速入门

接下来我们通过一个vue的快速入门案例,来体验一下vue。

第一步:在VS Code中创建 .html的文件,并且在html文件同级创建js目录,将资料文件vue.js拷贝到js目录,如下图所示:
【JavaWeb学习-第三章】Vue_第3张图片
第二步:然后编写

你可能感兴趣的:(JavaWeb学习,学习,vue.js,前端)