• 第一个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、运行

    在这里插入图片描述

  • 相关阅读:
    Flutter系列文章-实战项目
    Fortify-设置中文语言
    list的介绍及使用
    【软件设计师21天-考点整理】5)计算机系统构成及硬件基础知识
    DOM之事件代理（二）
    PHP md5_file() 函数用于判断文件是否有修改
    Docker的网络模式
    服务器版本命令查看
    pdf转换器是干什么用的，各种文档互转离不开它!
    python数据容器——列表
  • 原文地址：https://blog.csdn.net/Massimo__JAVA/article/details/125419985