第一个Vue程序

一、Vue：前端体系、前后端分离

1.1、概述

Vue (读音/vju/.类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue-resource：通信，vuex：管理)或既有项目整合

vue官网

1.2、MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM (HTML操作的元素)
ViewModel：连接视图和数据的中间件，Vue.js 就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了，Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

1.3、为什么要使用Vue.js

轻量级，体积小是一个重要指标。Vuejs压缩后有只有20多kb (Angular压缩后56kb+,React压缩后44kb+)
移动优先。更适合移动端，比如移动端的Touch事件
易上手,学习曲线平稳,文档齐全
吸取了Angular (模块化)和React (虚拟DOM)的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高

二、编写第一个Vue程序

2.1、导入vue.js

2.2、编写程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入vue.js-->
    <script src="../js/Vue.js"></script>
</head>
<body>

<!--view层-->
<div id="app">
    {{message}}
</div>

<script>
    var vm = new Vue({
        el:"#app",
        //Model：数据
        data:{
            message:"hello vue!"
        }
    });
</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
25
26
27

2.3、运行

在这里插入图片描述

相关阅读:
ds套dp——考虑位置转移or值域转移：CF1762F
还不知道光场相机吗？
CodeForces - 448B Suffix Structures
跑步时戴什么耳机好、分享五款最适合跑步的运动耳机排名清单
【自监督论文阅读笔记】Simmim: A simple framework formasked image modeling
信息检索与数据挖掘 | （五）文档评分、词项权重计算及向量空间模型
Godot 官方2D C#重构(3)：TileMap使用
讲解 CSS 过渡和动画 — transition/animation (很全面)
【vue】Vue项目中如何在父组件中直接调用子组件的方法
C#10新特性-lambda 表达式和方法组的改进

原文地址：https://blog.csdn.net/Massimo__JAVA/article/details/125419985