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
导入地址：
写程序
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程序的更多相关文章
- Node.js入门以及第一个helloworld程序
1.概念:简单的说 Node.js 就是运行在服务端的 JavaScript.学之前需要明白Node.js是无法挑战jsp.php或者asp这种老牌网站的地位的,是永远不会出现在证券.金融这种领域的. ...
- Servlet入门总结及第一个Servlet程序
目录 一了解Servlet的概念 二Servlet技术功能 三 Servlet技术特点 四 Servlet生命周期 五servlet工作过程 六 Servlet与JSP区别 七Servlet代码结构 ...
- hibernate入门配置及第一个hibernate程序
学习了hibernate后就想先给大家分享一下它的配置方法: jar包导入 一.数据库表的创建 二.开启hibernate配置 编译器:eclipse 数据库:mysql 1.创建第一个xml文件 ...
- Mybatis入门配置及第一个Mybatis程序
目的:使用mybatis来进行对数据库表的操作 第一步:引入jar包 我这里是创建的maven工程 第二步:创建数据表user 第三步:创建实体类 实体类放在包 com.xxx.pojo 下,包名可自 ...
- Vue环境搭建及第一个helloWorld
Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置 https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...
- Cesium入门2 - Cesium环境搭建及第一个示例程序
Cesium入门2 - Cesium环境搭建及第一个示例程序 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 验 ...
- SpringMVC基础入门，创建一个HelloWorld程序
ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...
- Conda安装及第一个py程序
Conda安装及第一个py程序 安装Conda 下载安装 在Anaconda官网下载Anaconda 打开Conda安装程序 设置好安装目录(这个一定要记好,后边要用),比如我的目录就是 D:\Pro ...
- Vue.js——2.第一个Vue程序
代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...
- 一、vue：如何新建一个vue项目
比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...
随机推荐
- AI在金融体系下如何引导API安全？
AI在金融体系下如何引导API安全? 随着金融科技的快速发展,越来越多的金融机构开始使用API(应用程序接口)进行数字化转型,加速业务流程和数据交换.然而,API在金融体系下面临诸多安全威胁,如恶意攻 ...
- 基于MQTT的弱网环境应用
MQTT(Message Queuing Telemetry Transport)是一种轻量级的消息传输协议,设计用于低带宽和不稳定网络环境下的物联网设备之间的通信. 以下是MQTT的一些关键特点和常 ...
- CKS 考试题整理 （03）-kube-bench 修复不安全项
Context 针对 kubeadm 创建的 cluster 运行 CIS 基准测试工具时,发现了多个必须立即解决的问题. Task 通过配置修复所有问题并重新启动受影响的组件以确保新的设置生效. 修 ...
- 怎么利用大厂的API将大段音频转成文本
日常办公中,我们经常要开会和写会议纪要.传统模式下,我们需要非常认真地听会议中每一句话,记下自己认为的核心的话,并在会后经过多次修改形成会议纪要.现在,聪明人已 经不那么干了,借助几百块的讯飞录音笔, ...
- 怎么让英文大预言模型支持中文？（一）构建自己的tokenization
代码地址:https://github.com/taishan1994/sentencepiece_chinese_bpe Part1前言 目前,大语言模型呈爆发式的增长,其中,基于llama家族的模 ...
- NetBeans连接SQLServer2008配置
一.配置SQL Server (一)SQL Server配置管理器 1.打开SQL Server配置管理器 (1)文件路径,我的是C:\Windows\SysWOW64\mmc.exe, 也可以从开始 ...
- 为什么从 MVC 到 DDD，架构的本质是什么？
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 本文来自于小傅哥新编写的<Java简明教程>系列内容,本教程意在于通过简单.明了. ...
- 实例讲解看nsenter带你“上帝视角”看网络
摘要:本文重点关注进入目标进程的"网络ns"视角,即站在「容器中的进程视角」看待容器里面的网络世界,并在那个视角中执行命令. 本文分享自华为云社区<<跟唐老师学习云网络 ...
- CPython, Pypy, MicroPython...还在傻傻分不清楚？
哈喽大家好,我是咸鱼 当我们说 Python 时,通常指的是官方实现的 CPython 但还有很多比如 Pypy.Jython.MicroPython.Brython.RustPython 等 &qu ...
- 如何使用Java在Excel中实现一个数据透视表
摘要:本文由葡萄城技术团队于博客园原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前一段时间淘宝出了一个"淘宝人生"的模块, ...