Vue-入门vue,及第一个vue程序

一.初始Vue

什么是vue

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

vue的架构

vue是可以独立出来后端的前端化工程,它可以不用后端,自己进行一些操作,也可以完成简单的逻辑处理 ,在MVC架构中,model层提供了数据和处理逻辑,在vue的MVVC架构中,前端也有自己的model层,使得前端不在依赖于后端的传参。

vue的两个特点是:

  • 在内存中操作虚拟DOM,使得前端不用在浏览器才渲染,因为内存中的运算更加的快速,有很高的相应比
  • 数据的双向绑定,基于viewModel层,使得不必每次都要刷新页面,内容才会被刷新的缺点

vue的架构:MVVM

  • Model:模型层,负责处理业务逻辑以及和服务器端进行交互
  • View:视图层:负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面
  • ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁

vue是一个集大成者,它是站在了前人的肩膀上来开发的;

Angular:是Google收购的前端框架,是由一群Java程序员开发的,其特点是将后端的MVC架构搬到了前端并且增加了模块化开发的理念。

React:Facebook出品,一款高性能的前端架构,特点是提出了虚拟DOM,减少了操作真实的Dom,在内存中操作,提高了前端的渲染率。

而后来的vue则是一款渐进式的vue框架,所谓渐进式就是逐步实现新特性的意思,其特点就是综合了Angular的模块化开发和React的虚拟DOM还有监听。

Vue的Soc原则:关注点分离原则,即Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

我们也可以叫它MVVM模式的实现者

二.第一个Vue程序

准备工作

我们可以使用 VScode,Idea,记事本,sublime等等开发Vue,但是我们只推荐Idea,因为是Java程序员

不管是使用那款编译器软件,都能编译Vue的原因是因为有插件这个东西,所以使用idea来开发我们需要先下载Vue的插件

操作步骤:

点击左上角File ------ 然后向下滑找 settings ------ 继续向下滑找 Plugins (插件) ------ 在搜索栏搜索 Vue.js ------- 下载并启用

然后我们需要导入Vue的源文件,导入方式很多,可以在官网下载一整个源文件,也可以使用在线的cdn

我是用的是快捷的,也就是使用在线的cdn

导入地址:
<script src="https://cdn.staticfile.org/vue/2.7.14/vue.min.js"></script>

写程序

Vue是JavaScript的框架,所以使用这个框架都是需要写在<script></script>标签对中的

测试代码:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>第一个vue程序</title>
<!-- 1.导入Vue.js   -->
  <script src="https://cdn.staticfile.org/vue/2.7.14/vue.min.js"></script>
</head>
<body>
<!--  view:视图层  -->
<div id="app">
  {{ message }}
</div>
<script>
  var app = new Vue({
    el: '#app',
      //model:数据
    data: {
      message: 'Hello, Vue!'
    }
  })
</script>
</body>
</html>

运行结果:

Vue的拓展测试:

数据的双向绑定:在前面有讲到数据的双向绑定是什么意思,旨在不刷新页面的情况下,我们改变数据内容,但是页面的数据仍可以改变,也就是视图层可以实时更新数据

这是在控制台操作的数据,并没有执行刷新操作,仅仅是在控制台进行了回车改变了原来view原有的数据,

但是在数据更改的瞬间,几乎是同时刷新,这就是数据的双向绑定,model层的数据发生变化,就会同时刷新view层

这就是ViewModel的作用:视图模型和展示模型

为什么要使用MVVM:

  • 低耦合:视图(view)可以独立于model的变化和修改,一个viewModel可以绑定到不同的view上,当view变化是model可以不变,model变化时,view也可以不变
  • 可复用:可以把视图逻辑放在一个viewmodel中,让更多的view复用这段视图逻辑
  • 独立开发:开发人员可以专注业务逻辑和数据开发(viewmodel),设计人员可以专注于页面设计
  • 可测试:界面元素是比较难于测试的,而现在测试可以针对ViewModel来测试

viewModel层完全解耦了,view和model层,这个解耦是至关重要的,也是前后端分离实施方案重要的一环。