(一)Vue.js简介与安装

Unit 1 Vue.js简介与安装


一、Vue概述
  1. Vue是一个用来开发Web界面的前端框架,是个轻量级的工具,它提供了现代Web开发中常见的高级功能(eg: 逻辑视图与数据、可复用的组件、前端路由、状态管理、虚拟DOM等)。
  2. MVVM模式: 简称“模型-视图-视图模型(Model-View-ViewModel)”:
  • 模型: 指后端传递的数据;(eg: 对象、数组等)

  • 视图: 指HTML页面;(eg: 页面视图)

  • 视图模型: 是MVVM模式的核心,是连接View和Model的桥梁。(eg: Vue实例化对象)

MVVM有两个方向:
(一)是将“模型”转化成“视图”:即将后端传递的数据转化成所看到的页面,实现方式——数据绑定;
(二)是将“视图”转化为“模型”:即将所看到的页面转化成后端的数据,实现方式——DOM事件监听;
如果这两个方向都实现,称之为“数据的双向绑定”。

  1. 在MVVM的框架中,视图和模型是不能直接通信的,它们通过ViewModel来通信,流程图如下:
    (一)Vue.js简介与安装

二、Vue的定义
  1. Vue是一款“友好的、多用途且高性能”的JavaScript框架,它能够帮助你创建“可维护性”和“可测试性更强”的代码库。

Vue是一个渐进式的JavaScript框架,渐进式的意义及体现如下:
(1)用户可以一步一步、有阶段性地来使用Vue;


(2)若已有一个现成的服务端应用,可将Vue作为该应用的一部分嵌入其中,进而使交互体验更丰富;


(3)如果希望将更多业务逻辑放在前端来实现,则Vue的核心库和其生态系统可满足用户的各种需求;(eg: Vue允许用户将一个网分割成可复用的组件,且每个组件都可以通过样式来渲染网页的各个部分。)


(4)若用户构建一个大型的应用,可能需要将东西分割成各自的组件和文件,Vue有一个命令行工具,可简化一个快速初始化真实的工程。


  1. Vue本身具有响应式编程和组件化的特点:

(1)响应式:即“为保持状态和视图的同步”,又称为“数据绑定”,在声明实例new Vue({data:data})后自动对data里面的数据进行了视图上的绑定,修改data的数据,视图中对应数据也会随之更改。


(2)组件化:Vue组件化的理念——“一切都是组件”,Vue可以将任意封装好的代码注册成标签(eg:Vue.component(‘example’,Example),可以在模块中以的形式调用),如果组件设计合理,在很大程度上能减少重复开发,而且配合Vue的插件vue-loader
,可以将一个组件的CSS、HTML和JavaScript都写在一个文件里,做到模块化开发。(当Vue和vue-router和vue-resourse插件配合使用,满足开发单页面应用的基本条件,可"支持路由和异步请求"。)


  1. Vue.js的开发模式
  • Vue是基于MVVM模式实现的一套框架,MVVM模式分离视图和数据,通过自动化脚本实现自动化关联,ViewModel搭起了视图与数据的桥梁,同时在ViewModel里进行交互及逻辑处理。

MVVM模式的优势,如下:
(1)低耦合。将View和Model分离,当两者其中一个发生变更时,另外一个不会受到影响。


(2)重用性。View、ViewModel和Model三者都可以进行重用,可提高开发效率。


(3)HTML模块化。修改模板不影响逻辑和数据,模板可直接调试。


(4)数据自动处理。Model实现了标准的数据处理封装(eg:筛选、排序等)。


(5)双向绑定。通过DOM和Model双向绑定使数据更新自动化,可缩短开发时间。


三、安装Vue
  1. 直接使用script标签引用的两种方式:
  • 可以通过官网https://cn,vuejs.org/下载最新的稳定版本,下载完成后,直接引用下面script语句,引入到页面后,Vue就会被注册成一个全局变量:
<script src="vue.js"></script>
  • 使用CDN方式,可直接使用最新版本的Vue,在页面中添加下面的script语句:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

或者使用指定的版本号,eg:使用2.6.10版本:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
上一篇:docker 运用


下一篇:Asp.NET笔记