VUE介绍+HelloWorld_vue helloword

作者：你好赵伟 | 2024-06-13 05:28:35

踩

vue helloword

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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