vue概述及入门

最新推荐文章于 2024-07-24 08:13:08 发布

weixin_45122202

最新推荐文章于 2024-07-24 08:13:08 发布

阅读量180

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45122202/article/details/104101078

版权

Vue.js

目前三个常用框架Vue.js、React、Angular.js

1.Vue.js是目前最火的一个框架(使用最多)，React是最流行的一个框架（React除了开发网页，也可以开发手机app）
2.Vue.js是一套构建用户界面的框架，不仅易于上手，还便于跟第三方库整合

框架和库的区别

框架：提高开发效率。是一套完整的解决方案；对项目的入侵性很大，项目如果需要更换框架，则需要重构整个项目
库（组件）：提供一个小功能，对项目的入侵性很小，如果某个库无法完成某些需求，可以容易的更换其他库来实现这些需求。

MVC和MVVM

MVC是后端的分层开发概念

即Model、View、Controller即模型、视图、控制器。

View：它是提供给用户的操作界面，是程序的外壳；
Model：是程序需要操作的数据和信息；
Controller：接收View层传递过来的指令，选取Model层对应的数据，进行相应操作。

MVC有如下两种模式，不管哪种模式，MVC的通信都是单向的，由图也可以看出，View层会从Model层拿数据，因此MVC中的View层和Model层还是存在耦合的。在这里插入图片描述

2 . MVVM是前段开发的分层思想，主要把每个页面分成M、V、VM

M：是每个页面中单独的数据
V：就是每个页面中的HTML结构
VM：是个调度者，分割了M和V，每当V层想要获取保存数据的时候，都要由VM做中间的处理

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>       <!-- 当导入包之后，在浏览器的内存中，就多了个Vue的构造函数 -->
  </head>
   <body>
    <div id="app">    <!--vue实例所控制的元素区域，就是MVVM中的V -->
        <p>
            {{ msg }}
        </p>
    </div>  

    <script>                            // 创建VUE实例，
        var vm = new Vue({               // 注意：此处new出来的vm对象就是MVVM中的vm调度者
            el: '#app',                 //vue控制此处指定的元素的所有内容
            data: {                     // data属性中存放的是el中要用到的数据，相当于MVVM中的M
                msg: 'chengjiawei'      // 通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素
            }
        })
    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

MVVM的原理：Vue框架是如何实现MVVM设计模式的
（1）new Vue()加载data对象
a.new Vue()将data对象打散为单个变量！
b.将当个变量隐姓埋名，且半隐藏。
c.再为每个隐藏的变量请保镖，保镖冒名顶替原变量名
1).Data中每个属性都有一对get/set方法
2）今后只要想修改data中的变量都会自动触发set()
3）在每个属性的set方法中，都自动植入一个notify()函数调用，只要试图修改data中的属性值时，都会自动调用set(),只要自动调用set()势必会自动notify()发出通知
(2).加载虚拟DOM树：
a.通过el属性值的选择器找到要监控区域的父元素
b.创建虚拟dom树
c.扫描这个要监控的区域：
1）只要发现标有绑定语法{{变量}}的元素，立刻加入虚拟DOM树中保存。
2）每发现一个@事件名=“函数名”的元素，就自动变为：on事件名=“new Vue().函数名”
3）加载methods对象：methods对象中的所有方法，都会被打散，直接隶属于new Vue()和data中被打散的属性平级
所以，在methods中的方法中，像操作data中的属性，都可以写为“this.属性名”即可
4）当触发事件时，自动调用new Vue()中的methods中指定的函数，执行其中this.属性名的修改。修改会自动触发属性的set()方法，自动触发set()内部的notify函数：
a.遍历虚拟DOM树，只找出受影响的个别元素
b.利用虚拟ＤＯＭ树提前封装好的ＤＯＭ操作，只修改页面中受影响的个别元素－－效率高
总结：ＭＶＶＭ的原理／Ｖｕｅ的绑定原理
访问器属性＋观察者模式+虚拟DOM树
什么是虚拟DOM树：
什么是虚拟DOM树：仅保存可能发生变化的页面元素的极简化版DOM树。
优点：
1). 小，遍历极快！
2). 只更新受影响的元素效率高！
3). 已经封装了增删改查的DOM操作，所以无需重复编码，就可自动更新页面内容。

MVVM中的数据可以实现双向绑定，即View层数据变化则ViewModel中的数据也随之变化，反之ViewModel中的数据变化，则View层数据也随之变化
在这里插入图片描述
下面总结MVC和MVVM关系

weixin_45122202

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue概述及入门

Vue.js目前三个常用框架Vue.js、React、Angular.js1.Vue.js是目前最火的一个框架(使用最多)，React是最流行的一个框架（React除了开发网页，也可以开发手机app）2.Vue.js是一套构建用户界面的框架，不仅易于上手，还便于跟第三方库整合框架和库的区别框架：提高开发效率。是一套完整的解决方案；对项目的入侵性很大，项目如果需要更换框架，则需要重构整个...
复制链接

扫一扫