2021-06-28记录分享前端交流文档

一.vue的概念

• 是一套构建用户界面的渐进式的框架。
• 只关注视图层，采用自底向上增量的开发。
• 通过简单的api实现响应的数据绑定的组合的试图组件。
  二.vue的安装
• 独立安装，通过官网进行下载。
• 使用cdn安装 （就是类似于海外代购）
• NPM方法 ，就是通过命令去安装
• 通过命令行工具去安装，这个重点在工具。
  vue.js的目录结构
  以上就是现实中的一个项目的目录结构展示。
  vue官网目录解析图。
  
  Vue2.0的生命周期有哪些
  beforeCreate Vue实例创建之前，此时访问不到数据

created Vue实例创建完成，此时已经可以访问到data和methods等

beforeMount Vue实例的挂载到真实DOM结构之前

mounted Vue实例的挂载到真实的DOM节点完成之后

beforeUpdate Vue实例的数据修改，DOM修改之前

updated Vue实例的数据修改完成，重新render之后

beforeDestory Vue实例卸载之前

destoryed Vue实例卸载完成

activated 当使用keep-alive组件的时候，才会有的生命周期钩子，表示组件激活时

deactivated 当使用keep-alive组件的时候，才会有的生命周期钩子，表示组件取消激活时

errorCaptured (2.5+) 补获错误边界钩子，当子孙组件报错的时候，父组件会触发这个钩子函数，并返回三个参数，第一个参数是 错误对象 ，第二个参数是 报错的子孙组件 ，第三个参数是 报错的子孙组件的具体哪个地方报错。

serverPrefetch (2.6+) 用来处理ssr，允许在渲染过程中等待异步数据

组件通信

1.父传子 父组件通过自定义属性的方式传递给子组件，子组件听过props来接收。

父组件
子组件
2. 子组件向父组件传值
场景是点击按钮，将子组件的值进入父组件

3. 非父子组件进行传值 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。


mvvm模式

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个View实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中，选项对象的el属性指向View，el: '#app’表示该Vue实例将挂载到

...

这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。 Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

• 双向绑定
  MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

将message绑定到文本框，当更改文本框的值时，

{{ message }}

中的内容也会被更新。
反过来，如果改变message的值，文本框的值也会被更新

• vue.js常用指令

• y-if指令 表示判断

• v-show 一般用于元素的显示或隐藏

• v-else 和v-if搭配使用 有一个逻辑关系 不是什么。。。。那么什么。。。。

• v-for一般用于数据的循环渲染。

• v-bind 绑定样式 数据

• v-on 绑定数据

1. v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
   基本语法：
   v-if=“expression”
   expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。
   2.v-show指令
   v-show和v-if区别。
   v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染

先看两个截图，第一个是当isMale为true时，第二张图是isMale为false条件不成立时，可以看到v-if的html并没有渲染出来，
而使用v-show的div仅仅是更改了它的样式display: none;
3.v-else指令
v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

4.v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for=“item in list”
list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始

5.v-bind指令
v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名
v-on指令
v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件

同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：
<button @click=“show”>
什么是Vuex？详述Vuex的工作流程

官方介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex其实就是一个Vue的集中状态管理工具，类似于redux，但使用方法很明显优化了许多
什么时候使用Vuex？
当项目需要使用公共数据，并且这个公共数据的访问量较大的时候，我们可以使用Vuex，用来集中管理公共的数据，而一些小型的项目，我们可以靠中央通信总线的发布订阅模式或者Vue.observable来实现数据管理与通信
Vuex的工作流程
首先通过dispatch提交一个action
在action中我们可以执行一些异步的操作，或者根据不同的情况分发不同的mutation
接着在action中调用commit，触发一个mutation
所有修改state的操作，全部应该放在mutation中来做
而state更新之后，会调用Vue的底层方法，通知视图进行更新渲染

详述Vuex的核心属性及使用
1.state

• state存储了Vuex的基本数据，在state中存储的数据都是经过Vue底层watcher侦听的数据，可以实现响应式数据

2.actions

• actions存放了Vuex中所有的异步操作，可以在actions中通过commit分发不同的mutation，在不同的情况下执行不同的方法
  3.mutations
• mutations存放了Vuex中所有关于state的操作，修改state只能通过mutations，否则的话数据不会响应式更新
  4.getters
• getters就类似与Vue实例中的computed，计算属性，所有关于数据的复杂计算应该放在getters中来操作
  5.modules
• modules，类似于redux中的reducer，每一个module都拥有自己的state、mutations、actions、getters；将整个store根据功能或者数据分解成不同的模块，最后合并在一个Store中
  Vue和Jquery的区别
  1.Jquery直接操作DOM，使用选择器以及便捷的DOM操作方式来修改视图以及数据
  2.Vue不直接操作DOM，而是通过双向数据绑定的方式，将DOM节点在Vue内部转化对象的形式，通过修改数据直接修改视图
  3.Jquery是一个前端类库，只是提供了很多便捷操作DOM的方法，而Vue是一个框架，有一套完整的体系