39 vue.js

1.1 vue是什么？

vue是当下主流的前端框架，用于构建用户界面的 渐进式自底向上增量开发的MVVM框架。

渐进式：其实每个框架都有自己的特点，在开发的过程中，可以在原有的系统上，把其中一两个功能用VUE开发，也可以整个系统都用VUE开发，------不会做职责以外的事情。

自底向上增量开发：就是先把页面写好，然后在写好的页面的基础上，再去逐一添加功能和效果，由简单到繁琐的过程。

1.2 vue的特点?

Vue.js 是一款轻量、高效、灵活且易上手的 JavaScript 框架，具有以下特点：

渐进式框架：Vue.js 是一款渐进式框架，可以将它作为一个库来使用，也可以将它作为一个完整的框架来使用。这使得它非常灵活和可扩展。
双向数据绑定：Vue.js 支持双向数据绑定，即当数据发生变化时，视图会自动更新，当视图发生变化时，数据也会自动更新。
组件化开发：Vue.js 采用组件化开发，可以将一个页面拆分成多个独立的组件，每个组件具有自己的状态和行为，可以通过 props 和 events 来进行组件之间的通信。
模板语法：Vue.js 的模板语法简洁易懂，支持插值、指令、过滤器等，使得编写模板变得更加简单。
虚拟 DOM：Vue.js 使用虚拟 DOM 技术来优化 DOM 操作，可以避免频繁操作 DOM 导致性能下降的问题。
生命周期：Vue.js 组件具有生命周期，可以在组件的不同阶段做出相应的操作，例如在 created 钩子函数中初始化数据，在 mounted 钩子函数中进行 DOM 操作等。
插件机制：Vue.js 提供了插件机制，可以方便地扩展 Vue.js 的功能，例如 Vue Router、Vuex 等。

1.3 什么是MVVM？

是Model-View-ViewModel的简写

M：model 模型 > 数据 > 变量 data数据

V：view 视图 > 页面模板

VM：viewModel 视图模型>用来关联数据与视图之前的桥梁 vue实例

1.4 可以建多个VUE实例吗？怎么用？

创建多个实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    

    <div id="demoDiv">
        <h1>{{text}}</h1>
    </div>

    <div id="demoDivb">
        <h1>{{text}}</h1>
    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"我是第一个实例",
                
            }
        })


        new Vue({
            el:"#demoDivb",
            data:{
                text:"我是第二个实例"
            }
        })
    </script>

</body>
</html>