1分钟入门教程VUE2.x极简开发(一)-hello world_vue2 hello world

作者：我家小花儿 | 2024-06-13 05:26:15

踩

vue2 hello world

扫码关注微信订阅号不迷路

vue入门第一个页面

一、Vue.js介绍
- 1、MVVM模式
二、极简入门helloWorld示例

一、Vue.js介绍

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

1、MVVM模式

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

在这里插入图片描述

MVVM

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

二、极简入门helloWorld示例

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 此处是View-->
<div id="app">
    {{message}}
</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // 配合 谷歌浏览器的 调试工具 Vue Devtools 调试vue项目使用
    Vue.config.devtools = true
    // 此处是Model
    var exampleData = {
        message: "hello world !"
    }
    // 此处是创建一个 vue实例 或者 ViewModel ，他是连接View 与Model的。 这就是 VUE的 MVVM模型  Model-View-ViewModel
    new Vue({
        el: "#app",
        data: exampleData
    })
</script>

</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
25
26
27
28
29
30

2、运行

html页面用google浏览器访问，打开调试工具 Vue Devtools 的效果如下：修改 message值页面数据随之改变。
在这里插入图片描述

3、运行过程解读

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个Vue实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中，选项对象的el属性指向View，el: '#app’表示该Vue实例将挂载到id=“app"这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!”。
el 是element的缩写，注意以下三种写法的区别
// el:"#app", //对应的 id选择器
// el:".app", //对应的 class选择器
// el:“div”, //对应的 html类型

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