一、Vue简介（2022.7.1）
1、什么是Vue
1）构建用户界面
- 用vue在html页面中填充数据，非常方便
2）框架
- 框架时一套现场的解决方案，程序员智能遵守框架的规范，去编写自己的业务功能
- 要学习vue，就是在学习vue框架中规定的用法！
- vue指令、组件（是对UI结构的复用）、路由、Vuex、vue组件库
- 只有把上面罗列的内容掌握以后，才有开发vue项目的能力
2、Vue的两个特性
1）数据驱动视图
- 数据的变化会驱动视图自动更新
- 好处：程序员在只管把数据维护好，那么页面结构会被vue自动渲染出来！
- 数据驱动实体是单向的数据绑定
2）双向数据绑定
- 在网页中，
form表单负责采集数据，Ajax负责提交数据 - 好处：程序员不需要手动添加DOM操作即可得到表单最新值
- js数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
3）、MVVM
MVVM全写时Model、View、和ViewModel
- MVVM是一种思想，把每个html拆分成了上面三个部分组成
（1）、Model、View、ViewModel
Model：表示当前页面渲染是所依赖的数据源
View：表示当前页面所渲染的DOM结构
ViewModel：表示vue的实例，他是MVVM的核心
（2）、MVVM的工作原理
注意：数据驱动试图和双向数据绑定的底层原理是MVVM（Model数据源、View视图、ViewModel就是vue实例）
ViewModel起一个链接桥梁的作用
4、Vue的版本
二、Vue的使用
1、基本使用步骤
2、准备所需文件
- 我们在Edge浏览器（google请自行找寻扩展包）下载
vue扩展（虽然现在不知道是干嘛用的）并且管理扩展里面点击详细信息让它能够访问文件的URL
- 在官网下载Vue.js，点击下面的下载就可以直接下载Vue.js
下载Vue.js
3、Vue第一个网页
使用Vue将数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="" />
</head>
<body>
<!-- 希望vue能够控制下面这个div，帮我们把数据渲染到div内部-->
<div id="app">{{ username }}</div>
<!-- 1.导入Vue的库文件,在window全局就有了Vue这个构造函数-->
<script src="./lib/vue.js"></script>
<!-- 2.创建Vue的实例对象-->
<script>
const vm = new Vue({
//el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data:{
username: '张三'
}
})
</script>
</body>
</html>
1）、基本代码与MVVM的对应关系（2022.7.2）
4、使用Edge浏览器中的vue-devtools
我们打开所写的页面，按F12 或者 右键-->检查，找到Vue如下图：就可以查看了
5、Vue的指令与过滤器
1）指令的概念
1.1）内容渲染指令
v-text 、 {{ }} 、 v-html
- v-text指令的缺点：会覆盖元素内部原有的内容
- {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有内容
- v-html 指令的作用：可以把带有标签的字符串，渲染为真正标签的html内容
1.2）属性绑定指令v-bind
- 注意：插值表达式智能用整改元素的内容节点中还，不能用在元素的属性节点中
- 在Vue中，可以使用
v-bind:指令，为元素的属性动态绑定值；简写是英文 : -
- 在使用v-bind 属性绑定期间，如果绑定内容需要进行动态凭借，则字符串需要用单引号包括，比如：
<div :title="'box' + index">这是一个div</div>
1.3）事件绑定指令v-on
v-on:简写是@- Vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。
我们将button进行事件绑定：
我们将所需要的函数写在与data同级的methods里
然后我们打印我们的vm实例，在浏览器中查看，点击+1按钮如图：
我们得到了一个返回的值，打开右边的对象，然后能看见一个count值：
之后在代码内使用对象vm来调用，或者this（代表vm），vm.count或者this.count
这样就成功了
我们还能进行传参：
事件对象
当我们想实现count为偶数时为红色，count为奇数时为空。那么我们可以在add传入的参数里添加$event
若我们没有传入数字也就是n，那么上面的@click就不需要任何参数，只需要在methods中添加一个e就可以了
这时我们在进入浏览器查看：
这时我们发现button在target下，所以我们使用e.target调用button，之后需要设置什么属性都可以直接展开逐一调用
v-on总结：
1.4）事件修饰符
.stop
1.5）按键修饰符
1.6）双向绑定指令v-model
可用：
- input输入框
-
type="radio" -
type="checkbox" -
type=" ……" - textarea
- select
v-moel指令修饰符
1.7）条件渲染指令v-if
v-show的原理是动态为元素添加或一处 display：none样式来实现元素的显示和隐藏-
如果要频繁的切换元素的显示状态，用v-show性能会更好 v-if的原理是每次动态创建或移除元素，从而来实现元素的显示和隐藏-
如果刚进入页面的时候，某些元素不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if的性能会更好 - 在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了
v-if还可以单用：
