vue MVVM的实现者，他的核心就是实现了DOM监听和数据绑定

  1. 引入Vue.js  
     <!--引入vue js 外部文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. 利用IDEA创建第一给Vue的程序 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{{message}}
</div>

<!--引入vue.js 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
　　    //model 层 ：数据
        data:{
            message:"hello,vue!"
        }
    });

</script>

</body>
</html>

     

  3. MVVM 
    Model：模型层
View：视图层
ViewModel：连接视图和数据的中间件

为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图和模型，有几大好处
1.低耦合：视图可以独立于Model变化和修改，一共ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
3.独立开发：开发人员可以转载于业务逻辑和数据的开发，设计人员可以专注于页面设计。
4.可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

     

posted @ 2021-01-22 15:37  创客未来  阅读(156)  评论(0)    收藏  举报