vue---我的第一个vue程序及vue的基本思想的理解-CSDN博客

本文是我在学习vue过程中记录学习的点点滴滴，仅仅为了学完之后巩固一下，日后忘记了也可以方便快速的复习。

我的第一个vue程序

前言
一、vue.js 核心思想
1.1、数据驱动
- 1.2、组件化
二、 MVVM 框架理解
- 2.1、MVC（Model-View-Controller）
- 2.2、MVVM（Model-View-ViewModel）
三、源码

前言

今天主要学习的是关于我在学习vue写的第一个vue程序，简单的讲述了一下我对vue的基本思想和理念的理解。

一、vue.js 核心思想

用 <script> 标签引入Vue后，Vue 会被注册为一个全局变量，也即浏览器的内存中就存在了一个 Vue 对象，编程中就可以直接使用 Vue

1.1、数据驱动

dom 的渲染、显示、隐藏，均由数据的状态控制。当我们决定在项目中使用 Vue，需要转变我们的思路，将操作 DOM 转变成操作数据。因此，写 vue 时，尽量不要有操作 dom
的代码出现。

1.2、组件化

通过扩展 html 元素，封装可重复用的一个代码。

二、 MVVM 框架理解

2.1、MVC（Model-View-Controller）

是一种表现模式，它将软件的 UI 部分的设计拆分成三个主要单元，分别是 Model、View 和 Controller。MVC 核心是控制器，它负责处理浏览器传送过来的所有请求，并决定要将什么内容响应给浏览器。
Model：模型，用于存储数据的组件；
View：视图，根据 Model 数据进行内容展示的组件；
Controller：控制器，接受并处理用户指令，并返回内容。

2.2、MVVM（Model-View-ViewModel）

MVVM 的核心是 ViewModel，它提供了对于 Model 和 View的双向数据绑定，通过 ViewModel 连接 View 和 Model,确保视图与数据的一致性,而这个过程是框架自动完成的（交给 Vue）,无需手动干预。如下图所示：
M（model）：普通的 javascript 数据对象，也就是数据部分
V（view）：前端展示页面，也就是 DOM 元素
VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是 vue 的实例
MVVM：当改变 view 中的数据，Model 中的数据也改变；Model数据改变，view 数据也改变
MVVM 响应式编程模型，避免直接操作 DOM , 降低 DOM 操作的复杂性

三、源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入Vue-->
    <script src="js/vue.js"></script>
</head>

<body>
    <!--1、view部分 -->
    <div id="hello">
      <!--文本插值获取数据（声明式渲染） -->
        <h1>{{msg}}</h1>
    </div>
    <!-- js部分 -->
    <script>
       /* 2、 // model部分
        var datamodel = {
            msg: "helloword",
        }
        // 3、viewmodel部分
        new Vue({
            el:"#hello",
            data:datamodel
        }) */
// viewmodel部分---当model部分的代码少时，将model部分也一并写入viewmodel中更简便（合二为一）
         new Vue({
            el:"#hello",
            data:{
                msg:"hello"
            }
        })

        
    </script>
</body>
</html>