Vue.js

目录

  • 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 v-text和v-html
      • 3.6 案例
    • 4 进阶指令
      • 4.1 事件修饰符
      • 4.2 v-bind对样式控制的增强-操作class
      • 4.3 v-bind对有样式控制的增强-操作style
      • 4.4 computed计算属性
      • 4.5 computed计算属性 VS methods方法
        • 1.computed计算属性
        • 2.methods计算属性
        • 3.计算属性的优势
        • 4.总结
      • 4.6 计算属性的完整写法
      • 4.7 watch侦听器(监视器)
    • 5 生命周期

Vue

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开发思想的含义:

Vue.js_第1张图片

基于上述的MVVM思想,其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分,我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作,让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢?可以参考下图对比:

Vue.js_第2张图片

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

接下来我们来介绍一下vue。

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

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

2 快速入门

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

第一步:导入vue.js。

第二步:然后编写

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