Vue介绍

VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。

Vue.js是一个提供了MVVM风格的双向绑定的javascript库，专注于view层。它的核心是MVVM中的VM，也即是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性。

虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发，因此会经常使用vm（ViewModel的缩写）这个变量名表示Vue实例。

Vue特点：

采用组件化模式，提高代码复用率，且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

入门示例

创建一个html页面，引入vue的库（vue官方提供了两种方式的库：开发模式库会提示警告和报错信息，生产模式库是压缩后的比较小）。
创建一个带有id的<div>，作为容器
在js中编写vue代码，使用构造函数new Vue()创建一个Vue的VM
使用el属性，让vue接管该id的区域
在data属性中加入需要绑定的变量和变量的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>快速入门</title>
        <!-- 引入vue的库 -->
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- vue的插值表达式，将vue的data定义的变量值显示到这里 -->
            {{message}}
        </div>
    </body>
    <script>
        //view model
        // 创建VUE对象
        new Vue({
            el: "#app", // 由vue接管id为app的区域
            data: { // data中的数据供el管理的容器内部使用
                message: "hello vue!" // 变量名可以自定义，和页面中的变量名对应即可
            }
        });
    </script>
</html>

其中el表示element，值通常为一个css选择器，例如el:"#app"、el:".app"，也可以是直接找到的element对象el: document.getElementById('app')。

运行之后，在浏览器控制台可以看到两个提示：

提示在浏览器安装vue的开发工具

解决方式：根据提示，在浏览器安装vue工具devtools

提示当前使用的是vue开发模式库，不要在生产模式使用

在页面将vue.config的生产模式提示配置为false：Vue.config.productionTip=false;，该属性在Vue 2.2.0之后才有

浏览器还会出现一个报错信息，找不到小图标favicon.ico，加入该图标即可。

提示：浏览器的报错信息在按F5刷新后可能就看不到了，这是因为浏览器并没有全部刷新，可以按住 shift + F5 强制刷新浏览器。

VS Code可以安装一个Live Server插件，使当前工作空间的静态资源以WebServer形式运行

容器和Vue对象是一对一的关系：

当两个Vue对象接管同一个容器时，只有第一个生效

<body>
    <div id="app">
        {{message}}
    </div>
</body>
<script>
    // 两个Vue对象接管同一个容器时，只有第一个生效。
    new Vue({
        el: "#app", 
        data: { 
            message: "hello vue!" 
        }
    });
    new Vue({
        el: "#app", 
        data: { 
            message: "vue" 
        }
    });
</script>

当一个Vue对象对应多个容器时，只对第一个容器接管

<body>
    <!-- Vue对象选中了多个容器，只对第一个容器生效 -->
    <div class="app">
        {{message}}
    </div>
    <div class="app">
        {{message}}
    </div>
</body>
<script>
    new Vue({
        el: ".app", 
        data: { 
            message: "hello vue!" 
        }
    });
</script>

多个Vue对象和多个容器，一一对应，可以正常的一对一接管

<body>
    <div id="app1">
        {{message}}
    </div>
    <div id="app2">
        {{message}}
    </div>
</body>
<script>
    // 可以正常接管app1容器
    const vm1 = new Vue({
        el: "#app1", 
        data: { 
            message: "hello vue!" 
        }
    });
    // 可以正常接管app2容器
    const vm2 = new Vue({
        el: "#app2", 
        data: { 
            message: "VUE" 
        }
    });
</script>

Vue代码和MVVM模型对应关系：

M：模型（Model），对应data中的数据

V：视图（View），页面模板

VM：视图模型（ViewModel），Vue实例对象

前端笔记

01-VUE入门

Vue介绍

入门示例