入门Vue_一、MVVM与Vue的概述

Sjkuu2al

已于 2022-04-12 21:50:17 修改

阅读量552

点赞数

文章标签： vue.js 前端前端框架

于 2022-04-12 21:47:31 首次发布

本文链接：https://blog.csdn.net/viviid/article/details/124135137

版权

MVVM(Model-View-ViewModel)
Model(模型):后端传递的数据
View(视图):HTML页面
ViewModel(视图模型):视图模型是MVVM模型的核心,是链接Model和View的桥梁
- 将Model转换为View,即将后端传递的数据转换为所看到的页面,实现的方式是数据绑定
- 将View转换为Model,即将所看到的页面转换成后端的数据,实现的方式是DOM事件监听

当上述两个方向都实现,称之为数据的双向绑定

在MVVM的框架中,Model和View是不能直接通信的,两者之间的通信需要通过ViewModel,其中ViewModel要充当监听者的角色:当数据变化时,通知视图也做出相应变化;同样的,当用户操作视图时,也通知数据进行更新,这就是实现了数据的双向绑定

Vue(友好、高效和渐进式的）
Vue就是基于MVVM模式实现的一套框架
在Vue中
- Model:JavaScript中的数据(对象、数组等)
- View:页面视图
- ViewModel:Vue实例化对象
Vue本身具有响应式编程和组件化的特点
- 响应式:保持状态和视图的同步,也称为数据绑定
- 组件化:"一切都是组件".Vue中可以将任意封装好的代码注册成标签,例如:Vue.component('example',Example),可以在模板中以的形式调用

Vue.js的开发模式
Vue是基于MVVM模式实现的一套框架，MVVM模式分离视图(View)和数据(Model),通过自动化脚本实现自动化关联,ViewModel搭起了视图与数据之间的桥梁,同时还进行交互及逻辑处理. 这种模式具有以下优势
- 低耦合:分离视图与数据,两者中一方改变时,另一方不会受到影响
- 重用性:无论是View Model 还是ViewModel,三者都可以进行重用,提高了开发效率
- HTML模板化:修改模板不影响逻辑与数据,模板可以单独直接调试
- 数据自动处理:Model实现了标准的数据封装处理
- 双向绑定:使数据更新自动化,缩短了开发时间

安装Vue
- 直接使用：<script src = "vue.js"></script>
- CDN方式：<script src = "http://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
NPM:在用Vue构建大型应用时才推荐使用NPM安装Vue
命令行工具：Vue提供了一个官方的脚手架（CLI）,当熟悉Vue后可使用

第一个Vue程序

<head>
    <script  src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>aaaa</title>
</head>
<body>
    <div id="app">
        <p>大家好，我是<b>{{name}},</b></p>
        <p>今年<b>{{age}}</b>岁。</p>
    </div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            name:"sjkuu",
            age:"30"
        }
    })
</script>