VueJS入门小案例|七日打卡

215 阅读1分钟

什么是VueJS?

​ Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

为什么要学习Vue?

​ 工作里面可能参与写前端, 很大几率使用的就是Vue ​ Vue可以让JS逻辑写起来更加方便, 快速 ​ 面试有优势

特点

  • 易用
  • 灵活
  • 高效

MVVM模式

​ MVVM是Model-View-View-Model的简写。它本质上就是MVC 的改进版。

​ MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图UI 和业务逻辑分开. MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)Vue.js 是一个提供了 MVVM 风格的==双向数据绑定==的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷.

入门案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
    <!--
        提醒: idea中的JavaScript的版本一定要是ECMAScript6及以上的版本
        vue的使用步骤:
        1. 准备一个vue的容器(div),并且指定id,我们需要使用vue的所有标签都放在这个div中
        2. 在vue的容器外面(下面)编写script标签,script标签里面就编写vue的代码
        3. vue的具体代码如下
    -->
    <div id="app">
        <!--使用插值表达式进行数据的绑定-->
        <div id="msg">{{message}}</div>
    </div>

    <script>
        var vue = new Vue({
            el:"#app",
            data:{//这里面就是所有的数据模型
                message:"hello world"
            }
        });
    </script>
</body>
</html>

小结

​ 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本==插值表达式==,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新.