Vue-简介和入门

最新推荐文章于 2022-01-25 21:57:53 发布

一眉程序猿

最新推荐文章于 2022-01-25 21:57:53 发布

阅读量378

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45935633/article/details/105488325

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

对于Vue，它是一款渐进式的JavaScript框架，何谓渐进式呢？就是说，它的学习是由浅至深的。它的作者是一名优秀的中国人，尤雨溪。

一个帅气的中国小伙，开发出一个如此优秀的Vue框架…

从整个JavaWeb应用的发展来讲，最早的单体应用（JSP页面就直接处理所有的业务逻辑）到MVC三层架构（数据模型层、视图和控制层的分离）再到现在流行的微服务架构再到未来可能会火起来的服务网格，我们发现所有的一切都在慢慢的让应用的维护和扩展变得更加简单，现在较为流行的微服务架构的实现之一方式就是Vue+SpringBoot的前后端分离技术。

为什么会引出前后端分离的概念呢？
当然就是为了让专业的开发者做专业的工作，前端开发者只管前端页面代码的编写，后端开发人员只管后端逻辑代码的编写。在之前的JSP时代，就是由前端人员先将页面写好，然后交给后端人员，后端不仅要编写后台处理的业务逻辑代码，还要将处理后的数据渲染到前端的页面上，前后端的分离无疑减少了后端开发人员的工作量。这也在一定程度上解决了前后端强耦合的问题。

Vue就是一款优秀的前端化框架，如果是想要成为Java的全栈工程师，博主认为Vue是一个必学的东西。
它有以下优点：

体积小.
- 压缩后33K;
更高的运行效率
- 基于虛拟dom,-种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虛拟DOM。
双向数据绑定
- 让开发者不用再去操作dom对象,把更多的精力投入到业务逻辑上;
生态丰富、学习成本低
- 市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件!拿来即用实现快速开发!
- 对初学者友好、入门容易、学习资料多;
…

学习Vue，需要掌握HTML、CSS和JavaScript的一些相关知识，否则学习Vue可能会存在一定的难度。

下面展示一个入门程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>


<div id="app">
    <!--  取出 message  -->
    {{message}}
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

<!-- 上面两个引入标签，随便导入一个即可 -->

<script>
    //创建一个Vue对象
    var vm = new Vue({
        //挂载点：绑定页面元素（id为app的元素）
        el: "#app",
        //数据对象
        data:{
            //message数据
            message: "hello Vue!"
        }
    });
</script>

</body>
</html>

效果如下：
在这里插入图片描述
这里好像并没有什么感觉，于是我们打开控制台，输入vm.message="Ara_Hu"然后回车，我们会发现页面上的数据就会发生对应的改变，并且页面并没有刷新。

这里目前只能体现暂时只能体现Vue对象中的数据绑定页面元素的数据，暂不能体现页面元素的数据绑定Vue对象的数据。