Vue.js基本概念解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56686568/article/details/116137021

Vue.js是一个流行的前端MVVM框架，适用于渐进式和自底向上增量开发。它旨在解决数据绑定问题，支持大型单页面应用开发，并具备组件化特性。MVVM模式中，Model管理数据，View显示内容，ViewModel作为数据通信桥梁。Vue的声明式渲染让开发者只需关注期望效果，数据驱动确保视图随着数据变化。模板语法中，{{}}用于显示表达式，但应避免使用复杂表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue基本概念

1.Vue.js是目前最流行的前端MVVM框架，是一套构建用户界面的渐进式的自底向上增量开发MVVM框架

2.渐进式：可以在原有的大系统的是上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发不会做职责之外的事

3.自底向上增量开发：先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。

目的

1.解决数据绑定问题
2.Vue.js主要的目的是为了开发大型单页面应用
3.支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高

MVVM

M:model 模型等同于数据 m层的作用就是用来管理数据
V:view 视图层就等同于用户可以看见的内容区域
VM：viewModel 视图模型层相当于用户就看见的视层与模型层之间的数据通信桥梁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- M:  model   模型等同于数据  m层的作用就是用来管理数据

    V: view   视图层   就等同于用户可以看见的内容区域
    
    VM：viewModel   视图模型层  相当于   用户看见的视图层与模型层之间的数据通信桥梁 -->

    <!-- 2.新建一个根节点  （V层） -->
    <div id="demodiv">
        <h1>{{num}}</h1>
        <h1>{{text}}</h1>
        <h1>{{arr[2]}}</h1>
    </div>

</body>
</html>
 <!-- 1.引包 -->
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        // 3.新建vm层  视图模型层 他就是vue实例
        new Vue({
            el:"#demodiv",//关联视图层
            data:{ //m层  模型层
                text:"我是一个字符串",
                num:18,
                bool:true,
                arr:[1111,2222,3333,4444],
                obj:{
                    name:"xixi",
                    age:18
                }
            }
        })
    </script>

Vue声明式渲染

命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染：我们只需要告诉程序我们想要什么效果，其他的交给程序来做。

数据驱动

通过控制数据的变化来显示vue的数据驱动是视图的内容随着数据的改变而改变

## {{}}---- 模板语法

{{}}中放的是表达式

 <h1>{{text}}中方的都是表达式</h1>

表达式：通过计算可以返回结果的内容

注意：避免在双括号中使用复杂表达式

常见问题

如何区分插值中的内容是表达式还是普通文本？
Vue.js 会通过是否带引号区分两者