Vue：渐进式JS框架详解

Vue：渐进式JS框架

简介

Vue是前端优秀框架，用于构建用户界面的渐进式框架
也是要通过终端安装工具，成功！
日后我们就在src的文件中编写代码，其他的都是配置的文件，src的内容有：
- assets；存储静态资源::静态资源：公共的CSS文件，包含项目当中所用的图片文件等::
- components：vue中的组件，++vue是组件化开发的++
  - App.vue：主入口的组件，可以理解为根组件，所有组件都是从这里开始的
  - main.js：主入口文件

模板语法

文本

数据绑定最常见的形式就是使用**Mustache（双花括号）**语法的文本插值
- Mustache：胡子
- 文本插值：配合页面动态显示文本::文本动态化::
- html：<p>{ {message}}</p>，脚本设置变量message
Mustache支持JS的表达式，不必非要只用变量，用任意的运算符、方法都是可以的。但是不支持语句！并且一次只支持一个表达式

原始HTML

双大括号会将数据解释为普通文本，而非HTML代码。
为了输出真正的HTML,你需要使用v-html指令::所有以v-开头的都是指令::
++这种就好像是innerText和innerHTML的区别：前者只能接受普通文本信息，如果出现“”的情况，前者会展示成文本的形式，但后者会识别并展示超链接形式++
v-html用法类似于属性<div v-html="文本"><div>

属性

Mustache语法不能在HTML属性中使用，++看上面，双花括号只能在标签之内包裹变量，不能用作外面标签的属性++为了让属性动态化，我们可以使用v-bind指令
用法：<div v-bind:属性名="变量名"></div>，在脚本中改变变量的值就能改变属性的值
v-bind:可以简写为:

条件渲染

条件渲染是根据条件不同来在页面上渲染不同的内容
v-if：
- 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染
- 如<p v-if="f1ag">我是孙猴子</p>，flag就是动态可变变量
- v-else用法：<p v-else>我是b猴子</p>，也是和if-else作用是一样的
v-show：
- 另一个用于条件性展示元素的选项
二者的不同：
- v-if是“真正“的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建++啥意思？就是说如果我们想要更换渲染内容，v-if会把现有的元素直接删除，再重建一个新的元素。又或者我们一开始显示初始内容时，另一部分的元素压根没有被渲染++
- v-if也是惰性的：在只有v-if时，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换::display属性的切换，none时消失，block时出现::
- 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变则使用v-if较好

列表渲染

`v-for`指令：

把一个数组映射为一组元素，就是把数组展开，把每一个元素拿到
我们可以用v-for指令把一个数组渲染成一个列表。 v-for指令需要使用** item in items **形式的特殊语法，其中 items 是源数据数组名，而 item 则是数组元素的别名
- v-for指令写在li标签中
- 脚本中返回的样式就是一个数组，数组元素通常是对象，详细看vs

维护状态

Vue只会多渲染新增的数据，而不是像JS一样重新再去渲染一遍。增加一条我们就渲染这一条，性能消耗很小。
当Vue正在更新使用v-for渲染的元素列表时，它默认使用就地更新的策略。++如果数据项的顺序(id)被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素(id)，并且确保它们在每个索引位置正确渲染。++
需要为每项提供一个唯一的* key attribute *，::基本是id::以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。
<div v-for:"item in items":key="item.id">这样就能检查看哪些节点需要修改，再根据id跟踪并修改节点
v-for和key是要搭配使用的！！

事件处理

监听事件

我们可以使用v-on指令（通常缩写为@符号)来监听DOM事件，并在触发事件时执行一些JavaScript。
用法为 v-on:click="methodName" 或使用快捷方式 @click=“methodName”，方法名称可以写一些简单的语句比如::message += 1::，每次点击message的值就+1

事件处理方法

返回的是函数@click="函数名"
JS中要写另一个对象methods，值就是好多函数组成的对象。::这个methods以及前面返回数值变量的data都是系统的关键字，不能重新起名::
如果想在函数中修改::data中的变量::，要用this关键字指明，this.message = "不要点人家！";

内联处理器中的方法

%% 俗称：事件传递参数，就是事件用的函数带参

表单的输入绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。++v-moel本质上不过是语法糖。它负责监听用户的输入事件来更新数据++
双向数据绑定：在输入的同时读取输入的内容，基本上绑定的都是某个变量，便于动态修改

修饰符

.lazy

在默认情况下，v-model在每次input事件触发后，将输入框的值与数据进行同步。::也就是实时同步，性能消耗很大::可以添加lazy修饰符，从而转为在change事件之后进行同步
`

.trim

自动过滤用户输入的首尾空白字符，用法是一样的

组件基础

单文件组件

(又名.vue文件，缩写为SFC)是一种特殊的文件格式，它允许将Vue组件的模板(HTML必须存在)、逻辑(JS)与样式(CSS)封装在单个文件中

加载组件

组件的组织

%% 整个页面是由组件组成的，组件之间的引用关系会形成一个组件的组织，通常一个应用会以一颗嵌套的组件树的形式组织

Props组件交互

%% 组件之间::数据之间::是存在交互的，可以互相返回数据进行显示。Prop能决定组件之间数据的传递，将数据从父组件传递到子组件

常见的应用应该就是从App.vue根组件向小组件传递数据，使用它就可以不使用import了，直接在export default中写props
传递数据的个数没有限制，对传递的参数的类型也没有限制
详情看vs

自定义事件组件交互

%% props无法进行数据的反向传递，我们可以用自定义事件*$emit*

我们之前学的import/export那是组件加载，只是建立起了一些联系，但需要交互方法才能进行数据的传递，比如props/$emit
通过自定义事件进行数据传递！！，详细看vs

组件的生命周期

每个组件在被创建时都要经过一系列的初始化过程++例如需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等++同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

八大生命周期函数：

生命周期函数不需要咱们调用，允许我们在不同的时间段做特定的工作

创建时：beforeCreate/created

渲染时：beforeMount/mounted

常常把网络请求放到mounted中：此时组件已经显示在页面之上，请求到数据之后再把这个数据渲染到页面之上。
++网页在快速浏览的时候需要时间加载，图片、数据还没加载出来的时候是一些灰色的方格，这些方格就是已经渲染在页面之上的元素，这时再去请求数据，内容就能显示出来++
::就是告诉用户，我们页面已经显示出来了，但是要再等一点点，等到我们网络请求拿到数据之后才能看到详细的信息::

更新时：beforeUpdate/updated

卸载时：beforeUnmount/unmounted

卸载之前把消耗性能的处理都干掉，比如定时器

Vue引入第三方

%% 第三方：不属于vue，是别人写好的能在vue中使用的方便的功能和业务

Swiper轮播图：触摸滑动插件

纯JS打造的滑动特效插件，面向手机、平板等移动终端。
详情看vs

Axios网络请求

%% Axios是一个基于promise的网络请求库(第三方)