Vue总结

核心概念：

vue.js是一个用于构建用户界面的渐进式JavaScript框架，以数据驱动和组件化的思想，是的构建交互式Web应用更加简单快捷。

• 数据绑定：通过指令和插值表达式，实现数据与DOM之间的双向绑定。
• 组件化：将界面拆分成独立可复用的组件，每个组件有自己的数据、模板和逻辑。
• 虚拟DOM：通过虚拟DOM技术，在内存中构建整个DOM树结构，减少真实DOM的操作，提高性能和效率。

MVVM

M 模型（Model）：

• 模型代表应用程序的数据和业务逻辑。
• 它是应用程序的数据源，负责获取和更新数据，以及定义业务逻辑的操作。

V 视图（View）：

• 视图是用户界面的可见部分，它与用户进行交互并显示数据。
• 视图负责将模型中的数据显示出来，并将用户的操作反馈到视图模型。

VM 视图模型（ViewModel）：

• 视图模型是视图和模型之间的中间层，负责协调视图和模型之间的数据交互和通信。
• 它将模型的数据转化为视图可用的格式，并处理视图的用户交互行为。
• 视图模型通过双向数据绑定将视图和模型连接在一起，使得数据的变化能够自动反映到视图中，并且用户的操作能够更新模型中的数据。

vue生命周期

创建阶段

• 创建前（beforeCreate）：
  vue实例还没有被创建，data里面的数据不可被调用; 也就是this.数据名 无效,页面仍然处于最原始的状态
• 创建后（created）：
  vue实例已经被创建，这个钩子函数是第一个能够访问到 data数据的钩子函数;页面仍然是最原始的状态，虚拟dom还没有开始生成;

挂载阶段

• 挂载前（beforeMount）：
  虚拟dom已经生成，但是还没有渲染到页面上， 但是这个钩子函数，做任何的dom操作，都不奏效;因为，在这个钩子函数里面删除的所有的dom，都已经被虚拟dom拷贝了一份
• 挂载后（mounted）：
  所有的dom都已经渲染到了页面上，dom是最新的;页面也是最新的; 组件的初始化已经完成了

更新阶段

• 更新前（beforeUpdate）：
  页面更新前，数据是最新的，但是页面还是旧数据;
• 更新后（updated）：
  页面的是最新的，数据也是最新的;

销毁阶段

• 销毁前（beforeDestroy）：
  在实例销毁前都会触发的事件;
• 销毁后（destroyed）：
  这个生命周期是最后一次，能够调用事件以及data里面数据的钩子函数 销毁后， 页面还在，页面的所有操作，都不在生效;一般在这个生命周期，做一些，停止计时器，清空内存等操作;

vue模板语法

插值表达式

插值表达式：使用双大括号{{}}将数据绑定到模板中。

指令

使用以 v- 开头的指令，如 v-bind，v-if，v-for 等来实现条件渲染、循环和绑定属性等功能。
1. v-if =“表达式” v-else-if = “表达式” v-else

	<div id="app">
		<div v-if="score>90"> <h2>优秀!</h2></div>
		<div v-else-if="score>80"> <h2>良好!</h2> </div>
		<div v-else-if="score>70"> <h2>中等!</h2> </div>
		<div v-else-if="score>60"> <h2>及格!</h2> </div>		
		<div v-else><h2>不及格!</h2> </div>	
	</div>

2. v-show=“判断变量”
v-show 利用元素的display属性控制着元素的显示与隐藏

• v-if与v-show的区别：
  隐藏时v-show是css方式隐藏，v-if是DOM节点直接移除，一般情况下，频繁切换显示与隐藏时使用v-show,反之使用v-if
  3. v-for 循环遍历
  1. v-for遍历普通数组
• in 前面如果是一个变量，那么该变量保存的是数组中的数据
• in 前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标

	<view v-for="(item,index) in msg" :key="index+item">{{item}}</view>
	

2. v-for遍历对象

• in 前面如果是一个变量，那么保存的是对象中的属性值
• in 前面如果是两个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名
• in 前面如果是三个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名，第三个变量保存的是下标

	<view v-for="(d,c) in list">{{c}}:{{d}}</view>

3. v-for循环数字

• in 后面不仅可以放数组、对象数组、对象，还可以放数字
• 在 in 前面用一个变量存储当前次数，注意：变量是从1开始，而不是从0开始

<view v-for="item in 3" :key="item">{{item}}</view>

注意：

• v-if 和 v-for 可以一起使用吗？
  答：不建议一起使用，当v-for 和 v-if 出现在同一节点时，会先执行v-for,再执行v-if,会造成资源的浪费。
• 为什么v-for要加key值？ （key值必须在兄弟元素之间是唯一的）
  答：key优化虚拟dom 的diff算法，优化列表筛选排序更新的操作。

4.v-text指令
v-text：更新元素的文本内容。

<span v-text="msg"></span>
<span>{{msg}}</span>

5.v-html指令
可以将包含HTML标签的字符串作为数据绑定到指定的元素上，并让元素以HTML解析方式展示该字符串。

 <p v-html="htmlContent"></p>

6.v-once指令
v-once用于指定元素或者组件只渲染一次
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
7.v-bind指令
v-bind 用于绑定元素的属性或组件的 props 到 Vue 实例的数据。可直接写为：

• v-bind:属性=“值” ——> :属性=“值”

<img :src="imageUrl">

8.v-on指令
v-on用于监听DOM事件或自定义事件，并触发对应的方法。可直接写为@

<button @click="handleClick">点击我</button>

9.v-model指令
v-model：用于在表单元素和 Vue 实例之间双向绑定数据。

<input v-model="username" type="text">

表单双向绑定

• v-model=“msg” 可以视为 :value=“msg” @click=“msg=$event” 的简写

表单绑定修饰符

• .lazy：默认情况下，v-model指令在input事件中同步输入框的值到数据。使用.lazy修饰符可以转变为在change事件中同步输入框的值到数据。

<input v-model.lazy="message" type="text">

• .number：将输入值转成数值类型。

<input v-model.number="score">

• .trim：自动过滤首尾空格。

<input v-model.trim="username" type="text">

组件通信

1. 父传子

使用props：
通过props可以将父组件的数据传递给子组件，并在子组件中使用这些数据。在父组件中使用子组件时，可以通过属性的方式将数据传递给子组件。

2.子传父

使用事件：
通过事件可以在子组件中触发并向父组件传递参数。在子组件中，通过$emit方法触发自定义事件，并传递参数。

3.ref引用自组件

4. $parents, $children 获取当前组件的父组件和当前组件的子组件

5.provide,inject

父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。

路由和状态管理

路由管理

路由管理：通过vue-router实现单页面应用中的路由功能，进行页面的切换和导航。

• router-link：用于生成导航链接，通过to属性指定要跳转的路径。
• router-view：用于渲染匹配到的路由组件。
• 在组件中可以通过this.$ router访问路由实例，以及通过this.$route获取当前路由的信息。

状态管理

通过vuex实现管理全局状态，在组件之间进行状态共享和传递，可以更好集中管理数据，多个组件共享数据，其中vuex主要有以下组件：

• 存储数据的state
• 修改数据唯一方式 mutations
• 异步操作的Actions
• 模块：module
• 映射方法：getters