Vue教程01-课程导入

watchping

已于 2023-02-12 16:26:38 修改

阅读量218

点赞数

分类专栏：前端Vue教程文章标签： vue.js javascript 前端

于 2023-02-11 17:36:41 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128986024

版权

前端Vue教程专栏收录该内容

10 篇文章 3 订阅

订阅专栏

Vue教程01-课程导入

1.传统Web开发中的问题
2.什么是Vue
3.什么是MVVM？
- 3.1MVVM是什么？
- 3.2MVVM的组成部分
4.Vue是如何实现MVVM的
5.如何使用Vue？
- 5.1通过引入vue.js文件
- 5.2通过Vue脚手架

1.传统Web开发中的问题

1.1浏览传统Web开发的项目

1、学生作品-电商网站: 点击进入http://www.zjff495.cn:5050/StudentDemo/

王海颖老师提供，20移动2 李宇恒实现，孔肖峰老师美术设计
技术：HTML、CSS、BootStrap、JQuery

2、学子商城：点击进入http://www.zjff495.cn:5050/xz-pc/

达内课程案例项目

以上项目源码在课程钉钉群文件夹下，压缩包文件名Web-CSS-Demo.rar

1.2传统Web开发中的问题

问题: 传统Web开发重复代码量太大！效率太低！
问题分析，传统Web开发分为三部分组成:

HTML：专门编写网页内容的静态语言
CSS：专门编写网页样式的静态语言
JS：专门为网页添加交互行为的程序语言

问题: HTML和CSS都是静态语言，缺少编程语言必须的要素！

没有变量，内容只能是静态的
缺少程序结构，没有分支，循环…。太弱了！导致js必须承担所有查找，修改操作，重复代码极多！

1.3传统DOM元素的交互操作方法

涉及DOM元素的交互操作，主要有4步骤。

查找触发事件的元素
绑定事件处理函数
查找要修改的元素
修改元素

DOM元素交互操作原生js案例的核心代码参见如下。

<body>
    <button id="btnMinus">-</button>
    <span id="count">0</span>
    <button id="btnAdd">+</button>
    <script>
        //DOM4步骤
        //1.查找触发事件的元素。本例中：点击+按钮
        var btnAdd = document.getElementById("btnAdd");
        //2.绑定事件处理函数。
        btnAdd.onclick = function () {
            //3.查找要修改的元素。
            var count = document.getElementById("count");
            //4.修改找到的元素。获取内容，转为整数
            let n = parseInt(count.innerHTML);
            n++;
            count.innerHTML = n; //再把n值放回去
        };
        //以下省略实现的减号按钮的交互操作   
    </script>
</body>

DOM元素交互操作JQuery案例的核心代码参见如下：

<head>  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
  <button id="btnMinus">-</button>
  <span>0</span>
  <button id="btnAdd">+</button>
  <script>
    //DOM4步骤
    //1.查找触发事件的元素。本例中：先点击+按钮
    $("#btnAdd")
      //2.绑定事件处理函数
      .click(function () {
        //3.查找要修改的元素。本例中：查找当前按钮兄弟中的元素span元素
        let $span = $(this).siblings("span");
        //4.修改找到的元素。获取span的内容，转为整数
        let n = parseInt($span.html());
        n++;
        $span.html(n); //再把n值放回去
      });
    //以下省略实现绑定减号按钮的交互操作
  </script>
</body>

2.什么是Vue

Vue是第三方开发的渐进式的基于MVVM设计模式的纯前端js框架。

关键字：第三方、渐进式、MVVM、纯前端、js框架

进一步理解

原生的js和第三方：第三方js库（框架）浏览器是需要下载的，如JQuery函数库是基于原生的js 重新封装的一批函数的集合，简化了传统DOM的操作。

框架：已经具有核心功能的半成品项目代码。开发人员只需要根据具体业务的需求，添加定制自己个性化的那一部分内容即可！

渐进式: 可逐步在项目中引入Vue的各项功能

MVVM设计模式: 后面会介绍

纯前端: 没有后端技术，Vue照样执行！

2.1Vue的优点

便于大项目开发，避免重复代码，提高开发效率

2.2Vue应用场景

以数据为主的项目，都可以适用Vue框架开发。

2.3第一个Vue案例

步进器功能的页面用Vue实现，参考代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--0. 先引入vue.js，注意其相对路径位置-->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 1.View层 -->
    <div id="app">
        <button @click="btnMinus">-</button>
        <span>{{n}}</span>
        <button @click="btnAdd">+</button>
    </div>
    <script>
        //2.ViewModel层，创建Vue实例
        var vm = new Vue({
            el: "#app",
            data: {
                n: 0
            },
            methods: {
                btnAdd() {
                    this.n++;
                },
                btnMinus() {
                    this.n--;
                },
            },
        });
    </script>
</body>
</html>

与JQuery实现比较，涉及DOM交互4步:

查找触发事件的元素不用程序找了！用肉眼找！
绑定事件处理函数不用js绑定了！改为在HTML中手工绑定！<button @click=“add”>
查找要修改的元素彻底没有了！因为Vue不直接修改元素！
修改元素 Vue实现了数据绑定。只要data中变量值变化，Vue会自动将data中的新变量值同步到界面上{{}}指定位置。

官网学习: Vue介绍 https://cn.vuejs.org/v2/guide/

3.什么是MVVM？

3.1MVVM是什么？

MVVM(Model-View-ViewModel) 是一个软件架构设计模式，源自于经典的 Model-View-Controller（MVC）模式。
MVVM 的出现促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。
MVVM 的核心是 ViewModel 层，向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用，如下图所示：
在这里插入图片描述

MVVM 已经相当成熟了，当下流行的 MVVM 前端框架框架有 Vue，Angular 等。

3.2MVVM的组成部分

简单画了一张图来说明 MVVM 的各个组成部分：
在这里插入图片描述

分层设计一直是软件架构的主流设计思想之一。

1. View层

View 是视图层，也就是用户界面。增强了HTML和CSS的功能，比如提供了变量，程序控制（分支、循环）、事件绑定等这些程序必备功能。大大减轻了JS的负担！

2. Model层

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控。不管后端业务处理如何复杂，只要对外提供接口就行了，前端请求api，后端返回数据。

用一个data对象（数据模型），统一保存这个界面所需的所有变量。数据集中保存，便于维护！

问题：数据模型中的变量值，不会自动跑到页面上指定位置的！

3. ViewModel层

ViewModel 是由前端开发人员组织生成和维护的视图数据层。

在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

ViewModel 所封装出来的数据包括视图状态和视图行为两部分，使得它可以完整地去描述 View 层。

页面中这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）。

由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。

由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

4.Vue是如何实现MVVM的

4.1加载data对象

将data对象打散，data内部的属性直接隶属于new Vue()对象。
为data中的每个属性设置一对get/set方法。
今后只要试图修改data中的属性值，都会自动调用set()，也会自动调用set中植入的notify()函数发出通知。

4.2加载虚拟DOM树

通过el属性值的选择器找到要监控区域的元素
扫描这个要监控的区域，创建虚拟DOM树
每发现一个{{变量}}的元素，就将该元素的信息，记录进虚拟DOM树，同时首次用data中的同名变量值替换页面中{{变量}}的位置。每发现一个@事件名="函数名"的元素，就自动变为：On事件名=“new Vue().函数名” …