Vue学习笔记

本博客记录Vue v2.7.8的学习,参考文档

目录

  • Vue概述
  • 入门案例
  • Vue指令
    • v-bind和v-model
    • v-on
    • v-if和v-show
    • v-for
    • 综合案例
  • 生命周期

Vue概述

一个完整的html页面包括了视图和数据,数据是通过请求 从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。

正因为这种开发流程,所以引入了一种叫MVVM(Model-View-ViewModel)的前端开发思想,

Model: 数据模型,特指前端中通过请求从后台获取的数据
View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据
ViewModel: 数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上

Vue学习笔记_第1张图片

基于MVVM思想,Model部分我们可以通过Ajax来发起请求从后台获取;对于View部分,我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而侧重于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作,让数据展示到视图的代码开发变得更加的简单,DOM操作vue全部帮我们封装好了:

Vue学习笔记_第2张图片

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

入门案例

首先编写

你可能感兴趣的:(javaweb,vue.js,学习,笔记)