第一个Vue程序

最新推荐文章于 2022-07-18 09:20:17 发布

Massimo_ycw

最新推荐文章于 2022-07-18 09:20:17 发布

阅读量118

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Massimo__JAVA/article/details/125419985

版权

Vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

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