Vue.js前端开发框架应用（微课版） 课件 第一章 Vue.js基础.pptx

Vue.js前端开发框架应用

Vue.js基础

目录Vue.js简介Vue.js的获取与使用MVVM模式与Vue.js应用

Vue.js基础一、Vue.js简介Vue.js（简称Vue，发音为/vju?/，类似view）是一款用于构建前端Web页面的JavaScript框架。它基于标准HTML、CSS和JavaScript开发，为高效地开发前端Web页面，提供了一套声明式的、组件化的JavaScript框架。Vue.js是一款基于数据驱动思想设计并开发的前端框架。Vue.js采用MVVM架构实现“双向数据绑定”的核心功能，可以非常方便地与其他前端库进行有效整合。Vue.js最初发布于2014年。Vue.js经历了0.x版本阶段（2014年2月～2015年10月），1.x版本阶段（2015年10月～2016年9月），2.x版本阶段（2016年9月～2020年9月），发行版名称为，3.x版本阶段（2020年9月~本书出版时）。Vue.js不同的版本在构建和编码上有较大的差异，本教材将专注于介绍Vue.js3.x版本的应用，并默认读者对HTML、CSS和JavaScript的知识已基本熟悉。

目录Vue.js简介Vue.js的获取与使用MVVM模式与Vue.js应用

Vue.js基础二、Vue.js的获取与使用使用Vue.js框架开发前端项目需要使用代码编辑工具和前端项目管理与构建工具。本书使用的代码编辑工具为VisualStudioCode，前端项目管理与构建工具为npm（NodePackageManager）。1、VisualStudioCode的安装与配置VisualStudioCode是一款通用型代码编辑工具，默认安装后可以通过插件配置功能。Vue.js项目开发推荐安装的插件有“简体中文”“LiveServer”和“Volar”。2、npm的安装与配置npm是NodePackageManager的缩写，它是一个软件包管理器，主要负责JavaScript库的管理。通过npm，可以很方便地进行JavaScript库的下载和版本管理，也可以把自己开发的JavaScript库共享给其他使用者。npm是Node.js的一个组件，先安装Node.js再添加npm。3、使用Vue.js引入使用Vue.js或构建方式使用Vue.js。【案例1-1】引入使用Vue.js。

目录Vue.js简介Vue.js的获取与使用MVVM模式与Vue.js应用

Vue.js基础三、MVVM模式与Vue.js应用1、双向数据绑定双向数据绑定指的是数据模型和视图之间的双向绑定，在Web前端开发中，视图指的是HTML页面，数据模型指的是保存在JavaScript对象中的数据。实现双向数据绑定指的是，当数据模型发生变化时，视图也发生变化；当视图数据被更改时，数据模型也会同步更新。2、MVVM模式MVVM是Model-View-ViewModel的缩写，即模型-视图-视图模型，它代表了一种软件开发中的架构模式，其核心是实现View（视图）和Model（数据模型）之间的双向数据绑定，可以使某一方数据更新时能自动传递到另一方。3、Vue.js创建MVVM模式Web前端应用Vue.js是按照MVVM模式开发的支持双向数据绑定等功能的JavaScript库，它的核心是实现了ViewModel，使得View和Model之间能够双向数据绑定。在Web前端开发中，使用Vue.js库可以快速实现MVVM模式应用开发。【案例1?2】创建MVVM模式Web前端应用。