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

关注

原创最新推荐文章于 2026-10-12 09:42:51 发布 667 阅读 AI 写同款· GEO 优化 ›

Docker Hello World 验证全链路解析：从拉取到执行的四大关键环节 Docker 容器技术的核心在于运行时环境的可靠初始化与隔离执行机制。其本质是客户端通过 Unix Socket 与守护进程通信，调用 runc 运行时在 Linux namespace 和 cgroups 中启动进程。hello-world 镜像作为最小验证载体，以静态二进制、无依赖、瞬时退出为特征，精准暴露 Docker 安装链路上的四大关键环节：守护进程就绪性、镜像拉取通路、容器运行时加载、标准输出透传能力。它不仅是入门第一步，更是 DevOps 环境标准化、CI/CD 流水线稳定性及本地与生产环境一阅读详情

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

一、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>

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类型