1.MVVM思想

  • M：即 Model，模型，包括数据和一些基本操作
  • V：即 View，视图，页面渲染结果
  • VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）
    在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到Model 中。
    而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model和 View 之间是如何互相影响的：
  • 只要我们 Model 发生了改变，View 上自然就会表现出来
  • 当用户修改了 View，Model 中的数据也会跟着改变。
    把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上
    在这里插入图片描述

2.VUE简介

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

  • 直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。
  • 通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式
  • 通过 npm 安装。这种方式也是官网推荐的方式，需要 nodejs 环境。
    在此我们使用第3种方式
    在这里插入图片描述

3.第一个案例

<!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>VUE第一个案例-helloWorld</title>
</head>
<body>
    <div id="app">{{name}},helloWorld,VUE我来啦</div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.vue声明式渲染
        let vue = new Vue({
            //el绑定渲染元素模板
            el:"#app",
            //data封装数据
            data:{
                name:"小生不才"
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
修改name值，页面也随之改变
在这里插入图片描述

# vue.js # 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

口才教育：如何提升沟通技巧与表达能力

avatar ViewDesign
cover

C 嵌入式系统设计模式 28：通道模式

avatar ViewDesign

优雅的前端框架：iView - 强大、易用且美观

优雅的前端框架：iView - 强大、易用且美观项目地址:https://gitcode.com/gh_mirrors/iv/iview是一个基于 Vue.js 的高质量 UI 组件库，旨在为开发者提供简单、直观、高效的基础组件，帮助他们快速构建现代 Web 应用程序。此项目由 Alibaba IVWEB 团队维护，质量与更新稳定性有保障。技术分析Vue.js 基础：iView 充分利...

avatar ViewDesign