一.初始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层，这个解耦是至关重要的，也是前后端分离实施方案重要的一环。

Vue-入门vue，及第一个vue程序的更多相关文章

  1. Node.js入门以及第一个helloworld程序

    1.概念:简单的说 Node.js 就是运行在服务端的 JavaScript.学之前需要明白Node.js是无法挑战jsp.php或者asp这种老牌网站的地位的,是永远不会出现在证券.金融这种领域的. ...

  2. Servlet入门总结及第一个Servlet程序

    目录 一了解Servlet的概念 二Servlet技术功能 三 Servlet技术特点 四 Servlet生命周期 五servlet工作过程 六 Servlet与JSP区别 七Servlet代码结构 ...

  3. hibernate入门配置及第一个hibernate程序

    学习了hibernate后就想先给大家分享一下它的配置方法: jar包导入 一.数据库表的创建   二.开启hibernate配置 编译器:eclipse 数据库:mysql 1.创建第一个xml文件 ...

  4. Mybatis入门配置及第一个Mybatis程序

    目的:使用mybatis来进行对数据库表的操作 第一步:引入jar包 我这里是创建的maven工程 第二步:创建数据表user 第三步:创建实体类 实体类放在包 com.xxx.pojo 下,包名可自 ...

  5. Vue环境搭建及第一个helloWorld

    Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置  https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...

  6. Cesium入门2 - Cesium环境搭建及第一个示例程序

    Cesium入门2 - Cesium环境搭建及第一个示例程序 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 验 ...

  7. SpringMVC基础入门，创建一个HelloWorld程序

    ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...

  8. Conda安装及第一个py程序

    Conda安装及第一个py程序 安装Conda 下载安装 在Anaconda官网下载Anaconda 打开Conda安装程序 设置好安装目录(这个一定要记好,后边要用),比如我的目录就是 D:\Pro ...

  9. Vue.js——2.第一个Vue程序

    代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...

  10. 一、vue：如何新建一个vue项目

    比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...

随机推荐

  1. Python time strftime() 方法的使用

    1.描述 strftime() 用于格式化时间,返回以可读字符串表示的时间,格式自定义. 2.说明 python中日期和时间的格式化符号有很多,下面列举常用的符号:  %y 两位数的年份表示(00-9 ...

  2. 如何解决安装完 webdriver-helper 但不可用的问题？

    一.问题分析 使用 selenium ,并使用自动化安装浏览器驱动的方法,下载 webdriver_helper 的官网:webdriver-helper · PyPI.下载完成后在终端使用 pip ...

  3. 手记系列之六 ----- 分享个人使用kafka经验

    前言 本篇文章主要介绍的关于本人从刚工作到现在使用kafka的经验,内容非常多,包含了kafka的常用命令,在生产环境中遇到的一些场景处理,kafka的一些web工具推荐等等.由于kafka这块的记录 ...

  4. 通过安装GVM 安装GO 操作步骤

    转载请注明出处: 1.GVM GVM是Go Version Manager的缩写,是一个用于管理Go语言版本的工具.通过GVM,我们可以轻松地安装.切换和卸载不同版本的Go语言.GVM会在用户的hom ...

  5. JVM源码分析：深入剖析java.c文件中JavaMain方法中InitializeJVM的实现

    经过前文<从JDK源码级深入剖析main方法的运行机制>的分析,我们知道了实现JavaMain方法的四个主要步骤: 初始化Java虚拟机 加载主运行类 通过加载的主运行类,获取main方法 ...

  6. 浅谈TCP和UDP

    简介 在计算机网络中,TCP(传输控制协议)和UDP(用户数据报协议)是两个常用的传输层协议.它们分别提供了可靠的数据传输和快速的数据传送,成为互联网世界中的双子星.本文将探讨TCP和UDP的特点.优 ...

  7. 4. JDK相关设置

    恐惧是本能,行动是信仰(在此感谢尚硅谷宋红康老师的教程) 1. 项目的 JDK 设置 File-->Project Structure...-->Platform Settings --& ...

  8. 使用LabVIEW实现 DeepLabv3+ 语义分割含源码

    前言 图像分割可以分为两类:语义分割(Semantic Segmentation)和实例分割(Instance Segmentation),前面已经给大家介绍过两者的区别,并就如何在labview上实 ...

  9. [译]使用Python和Dash 创建一个仪表盘(上)

    介绍 在数据科学和分析的领域,数据能力的释放不仅是通过提取见解的方式, 同时也要能通过有效的方式来传达见解.这就是数据可视化发挥见解的地方. 数据可视化是信息和数据的可视化呈现. 它使用可视化元素,如 ...

  10. pip install mysqlclient命令安装mysqlclient失败的解决办法

    错误情况: 解决方法: 到这个地址下载自己版本对应的资源 https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient 如下图: 我这里首先下载了  ...