Vue_01 第一个Vue程序

Vue

• Vue是一套用于构建用户界面的渐进式框架，与其他大框架不同的是，Vue被设计为自底向上逐层应用。Vue的和核心库只关心视图层，不仅易于上手，还便于与第三方库（vue-router，vue-resource，vuex）或既有项目整合。

• Vue是MVVM模式的实现者。

  • Model：模型层，在这里表示JavaScript对象。
  • View：视图层，在这里表示DOM（HTML操作的元素）。
  • ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者。
  • 在MVVM架构中，是不允许 数据 和 视图 直接通信的，只能通过ViewModel进行通信，而ViewModel就是定义了一个Observer观察者。
  • ViewModel能观察到数据的变化，并对视图的对应的内容进行更新。
  • ViewModel能够监听到视图的变化，并能够通知数据发生改变。

• Vue.js就是一个MVVM的实现者，它的核心就是实现了 DOM 监听 与数据绑定。

Vue优点

1. 轻量级，体积小是一个重要的指标。
2. 移动优先，更适合移动端，比如移动端的Touch事件。
3. 易于上手，学习曲线平稳。
4. 吸取了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能，如：计算属性。
5. 开源。

第一个Vue程序

1. 新建vue/vue-first，使用IDEA打开vue-firstr文件。
   
2. Vue——CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

• 新建demo1.html，导入vue.js

3. 新建Vue对象，编写模板，并添加id属性，将Vue对象和模板绑定。

<!--view层 : 模板-->
<div id="app">
    {{message}}
</div>

<!--    1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 2.创建Vue对象
    var vue = new Vue({
        el: "#app",
        // model层 : 数据
        data: {
            message: "hello Vue!"
        }
    });
</script>

4. 打开测试
   
   

为什么要使用MVVM

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