手把手带你学习Vue框架-Vue入门程序

手把手带你学习Vue框架-Vue入门程序 2023-09-19 279

一、Vue概述

Vue：是一个渐进式的JavaScript框架

框架：是一个架子【半成品项目】，那么我们不需要每次开发该类型的项目时，手动重复的搭建架子

Vue框架：别人封装好的一些功能，以及项目的一些配置环境，供别人直接使用库：封装的某一个功能

二、Vue好处

Vue的好处

# 开发方便
  1、Vue采用了MVVM设计模式
# 性能高
  1、Vue采用了真实DOM和虚拟DOM【Diffing算法】

三、Vue的MVVM设计模式

M：数据【后端响应给前端的数据】 V：页面 VM：view model【视图模型】

四、Vue入门程序

采用CDN形式开发Vue入门程序：https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js

创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>

<!-- app容器 -->
<div id="app">
    <div>
        <h1>{
         
  {message}}</h1>
    </div>

    <div>
        <h1>{
         
  {abc}}</h1>
    </div>
</div>




    <script>

        // 实例化Vue对象[配置：数据、容器]
        new Vue({
            el:"#app", // 容器
            data:{
                message:"这是一个数据",
                abc:123
            }
        });


    </script>


</body>
</html>

运行流程：