快速入门 VueJS 一篇博客就够了

最新推荐文章于 2024-05-22 21:15:32 发布

南淮北安

最新推荐文章于 2024-05-22 21:15:32 发布

阅读量1k

点赞数 1

分类专栏： VUE 学习笔记文章标签： vue java

本文链接：https://blog.csdn.net/nanhuaibeian/article/details/106749344

版权

VUE 学习笔记专栏收录该内容

6 篇文章 3 订阅

订阅专栏

文章目录

一、VueJS 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网:https://cn.vuejs.org/

二、MVVM 模式

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

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

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。

ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
在这里插入图片描述

三、VueJS 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 快速入门</title>
    <!-- 导入 vuejs 配置文件-->
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
</body>
<script>
    <!--创建vue 对象-->
    new Vue({
        //表示当前vue对象接管了div 区域
        el:'#app',
        data:{
            message:'hello world'//注意此处后面有内容可以加逗号，不要加分号
        }
    });
</script>
</html>

在这里插入图片描述

四、插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。

无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。
在这里插入图片描述
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
在这里插入图片描述

南淮北安

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
快速入门 VueJS 一篇博客就够了

文章目录一、VueJS 概述二、MVVM 模式三、VueJS 快速入门四、插值表达式一、VueJS 概述Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官网:https://cn.vuejs.org/二、MVVM 模式MVVM
复制链接

扫一扫