Vue 极简入门

1. Vue 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 是 MVVM 模式的实现者，被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。。

什么是 MVVM 架构？

MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVC 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更加容易管理和使用。其作用如下：

  1. 该层向上与 View 层进行双向数据绑定；
  2. 向下与 Model 层通过接口请求进行数据交互；

  • Model：Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则；
  • View：View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker, Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言；
  • ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者。

  在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者。ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新。ViewModel 能够监听到视图的变化，并能够通知数据发生改变。视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。

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

MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中，当下流行的 MVVM 框架有 Vue.js，AngularJS 等。

2. Vue 程序

下面我们编写第一个 Vue 程序，编写流程如下：

1、创建 HTML 文件，引入 Vue.js，编写 JS 脚本

<div id="app">
    ...
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",  //绑定元素的id
        //Model:数据
        data:{
            "message":"Hello Vue!",
        }
    })
</script>
  1. el:"#app"：绑定元素的 ID；
  2. data:{message:"Hello Vue!"}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!；

2、将数据绑定到页面元素

<!--View 视图层-->
<div id="app">
    <h3>{{message}}</h3>
</div>

说明：只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果。

3、完整的 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>
    <!--View 视图层-->
    <div id="app">
        <h3>{{message}}</h3>
    </div>
    
    <!--导入Vue.js-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var em = new Vue({
            el:"#app",  //绑定元素的id
            //Model:数据
            data:{
                "message":"Hello Vue!",
            }
        })
    </script>
</body>
</html>

4、测试效果

为了能够更直观的体验 Vue 带来的数据绑定功能，我们可以在浏览器的开发者工具中进行测试。测试流程如下：

  1. 在浏览器上运行第一个 Vue 应用测试，进入开发者工具；
  2. 在控制台输入 vm.message = "Hello World!"，然后回车发现浏览器中显示的内容会直接变成 Hello World！

在这里插入图片描述在这里插入图片描述

Vue.js 的核心是实现了 MVVM 模式，扮演的角色是 ViewModel 层，它的核心就是实现了 DOM 监听与数据绑定，在不改变 DOM 元素，不刷新页面的基础上动态绑定数据。

# vue.js
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign