Vue

1.Vue概述

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

1.1.MVVM模式
  • MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开

  • MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)

  • Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷

在这里插入图片描述

1.2.什么是Vue?

在这里插入图片描述

2.Vue的快速入门

在这里插入图片描述

在这里插入图片描述

3.Vue的语法

3.1.插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新。

  • Vue.js 都提供了完全的 JavaScript 表达式支持。
    在这里插入图片描述

  • 有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效
    在这里插入图片描述

3.2.事件的绑定
v-on:click 点击事件

在这里插入图片描述在这里插入图片描述

v-on:keydown 键盘事件

在这里插入图片描述

v-on:mouseover 鼠标事件

在这里插入图片描述
在这里插入图片描述

事件修饰符

在这里插入图片描述

按键修饰符

在这里插入图片描述

3.3.数据的显示
v-text v-html

在这里插入图片描述
在这里插入图片描述

v-bind

在这里插入图片描述
在这里插入图片描述

v-model

在这里插入图片描述
在这里插入图片描述

v-show v-if

在这里插入图片描述
在这里插入图片描述

3.4.逻辑判断和循环输出
遍历数组

在这里插入图片描述
在这里插入图片描述

遍历对象

在这里插入图片描述
在这里插入图片描述

遍历商品

在这里插入图片描述

在这里插入图片描述

4.Vue的生命周期

在这里插入图片描述
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值