39 vue.js

作者：你好赵伟 | 2024-04-29 19:58:21

踩

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>

1.5 {{}}是什么？

{{}}：它是VUE中的一种语法，它有很多名字，模板语法双花括号赋值法 vue数据插值

作用：在{{}}中间写的表达式，可以直接在页面中解析并展示。

语法：{{表达式}}

下期更新：

vue的延迟挂载是什么？$mount是什么？

data的写法分别是什么？

什么是指令?

v-model 作用

双向绑定是什么与原理

v-show是什么？

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/509504