姓名：王泽华；学号：22011211045；学院：通信工程学院
原文链接：https://blog.csdn.net/qq_66587374/article/details/124411094
【嵌牛导读】在初步学习前端课程的时候，相信大家都知道Vue这个名字，至于Vue到底是什么却不得而知，又或者知道Vue是前端的一大流行框架，那么它到底是用来干啥的呢，对于其他框架而言Vue又有什么优势和特点，学习前端的人为什么都要去学习Vue呢？对于这些答案，相信大家都想去亲自揭开它的谜底，但是如果你未学过JavaScript和jQuery那么，请先不要学习Vue，因为没有根基是非常晦涩难学的。反之学习的时候会特别轻松，所以希望大家学习Vue的时候，尽量都有javascript和jQuery库类的基础。下面将具体介绍Vue的基本知识。
【嵌牛鼻子】Vue、JavaScript、jQuery
【嵌牛提问】Vue是干什么的？如何使用Vue？
一、Vue是什么？
1.简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.什么是渐进式框架？
说白了，就是框架分层。那是如何分层的呢？就像《功夫》里面黄圣依手里拿的棒棒糖一样：最核心的是视图层渲染，然后往外是组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具，vue和react都是如此。
Vue分层：声明式渲染>组件系统>客户端路由>集中式状态管理>项目构建
3.发展史
创始人：尤雨溪
官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js
1.2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。
2.2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。
3.2014.01.24，Vue 正式对外发布，版本号是 0.8.0。
4.2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。
5.2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
6.2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
7.2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。
8.2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。
9.2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。
二、为什么要学习Vue？
1.易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue
2.灵活：在一个库和一套完整框架之间自如伸缩
3.高效：20kB 运行大小，超快虚拟 DOM
三、库和框架的区别
1.库(Library)，
本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
JavaScript：document.getElementById()
jQuery：$('').val()
2.框架(Framework)，
是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
3.前端渲染方式
四、什么是MVVM框架
1.MVC框架
MVC是后端分层开发的思想，即 Model-View-Controller 的缩写，就是模型-视图-控制器，也就是说一个标准的Web 应用程序是由三部分组成的：
View： 用来把数据以某种方式呈现给用户。
Model ：其实就是数据。
Controller ：接收并处理来自用户的请求，并将 Model 返回给用户。
2.MVVM框架
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
M：model数据模型（JSON）
V：view视图（HTML）
VM：ViewModel 视图模型
(1) V（修改数据） -> M 将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
$('#btn_login').click(function(){
通过ajax将页面中的数据通过json格式传递到后端服务器
});
(2) M（修改数据） -> V 将后端数据（JSON）通过赋值的方式在视图层展现(后端到前端)
通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面
共性：不管是前端到后端，还是后端到前端，使用传统的方式都必须首先拿到页面的Document元素，只有拿到了页面元素才能进行后续操作
五、Vue环境搭建
1.引入Vue.js
2.下载
(1) cdn下载(需连接网络)
(2)手动下载
3.给HTML元素即视图添加id属性
4.Vue实例，并搭建Vue环境
每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
<!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->
<div id="d1">{{message}}</div>
5.注意
注1：data在组件开发中的写法必须是一个函数
注2：vue指令：指的是是带有“v-”前缀的特殊属性
注3：用v-on:click指令绑定单击事件
注4：var vm = new Vue({
el：'#ID' // DOM 元素，挂载视图模型，
data：{}, // 定义属性，并设置初始值
methods：{} // 定义方法，用于事件交互时使用的函数
});
六、指令（Directives）
1.什么是指令
指令是一个带有v-前缀的特殊属性，那么指令的本质就是自定义属性
指令的格式，以v-开头
指令可带参数，也可不带参数，比如v-cloak指令就属于无参数的指令
2.双向数据绑定(Vue two way data binding)
示例1： 数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化
示例2： 只有当实例被创建时data中存在的属性才是响应式的
示例3：用v-model指令在表单控件元素上创建双向数据绑定
示例4： this在methods属性的方法里指向当前Vue实例
vm.name/vm.$data.name(外部访问)
this.name(内部访问)
示例5：用v-once指令进行单向绑定，一般不用
