JS —— Vue框架学习

1，vue 的概念

Vue是一套用于 构建用户界面 的 渐进式 的 JavaScript框架

• 构建用户界面：把数据变成界面
• 渐进式：
  • vue采用的是自底向上增量开发的设计模式
  • 只封装了vue的核心代码，可以引入各种插件
  • 是一个从简单到复杂的渐变过程，所以称为渐进式框架

2 ，vue特点

• 组件化开发，提高代码复用率、且让代码更好维护。
• 虚拟DOM和Diff算法，提高渲染效率，节省性能
• MVVM设计模式，数据驱动DOM，不需要手动操作DOM

2.1，组件化

就是把一个复杂的功能分成多个组件，每个组件有自己单独的html、css、js,如右图。
这样复用时可直接使用组件，并且修改一个组件时，其他组件不会受影响。

2.2，虚拟DOM 和 Diff算法

Vue使用了虚拟DOM和优秀的Diff算法，尽量复用DOM节点

当原生数据发生变化时，原生js就会 全部重新渲染 ，即便是 相同的数据也会全部清空重新渲染，之前的劳动成果被废除，这就会造成效率降低

而vue的渲染：

• 中间添加了一个虚拟DOM，会先将数据渲染到虚拟DOM，然后再传递添加到真实DOM中，
• 看似中间添加了一个步骤，仿佛无用，会降低效率
• 但当数据变化时，Vue会将新产生的虚拟DOM和上一个虚拟DOM对比，对比的这个过程，就是Diff算法
• Diff算法会找出新老虚拟DOM的数据对比差值， 只渲染变化的DOM，保留没有变化的DOM，这样就可以节省一部分过程，提升效率
  
  

3，vue 的使用

3.1，想要使用vue

• 首先，引入 vue.js文件
• 先要让Vue工作，就必须先创建一个Vue实例，且要传入一个配置对象
• 创建一个Root容器，root容器中的代码依然符合html规范，只不过混入了一些特殊的Vue语法
• root容器中的代码被称作【Vue模板】
• vue本质是一个构造函数，所以使用时，要先使用new 生成一个vue实例
• Vue实例和容器是一一对应的，一个容器只能绑定一个Vue实例
• 真实开发中，只会同时存在一个Vue实例，并且会配合着组件一起使用
• {{xxx}} 是插值语法，xxx要写js表达式，且xxx可以自动读取到data中的所有属性
• 一旦data中的数据发生改变，那么页面中用到的该数据都会自动更新

3.2，关于Vue实例

• 因为Vue是一个构造函数，所以要用new调用产生Vue实例
• Vue实例化时，要传入一个配置对象
• 配置对象中的el：用于指定当前vue实例为哪一个容器服务，值通常为css选择器字符串（如#box）
• 配置对象中的data：用于存储数据，数据供el所指定的容器去使用，值我们暂时先写为一个对象，以后组件时写为函数

3.3，Vue的一个工作原理

• 在模板和实例都已经完成创建后，
• 1，把模板交给Vue实例解析
• 2，解析完后Vue实例给模板挂载数据

，slot 插槽

插槽，可以理解为一个占位符
作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，适用于父组件向子组件通信

组件的插槽是为了让我们封装的组件更具有灵活性，让我们更自由的在组件内插入DOM结构，保留相同部分，插入不同部分。

.1，默认插槽（匿名插槽）

定 义 插 槽：在子组件中，定义一个slot标签开启匿名插槽，可以用来控制匿名插槽内容的位置
使用匿名插槽：使用子组件时，直接在子组件标签内插入内容，就会被放入匿名插槽

//子组件
<template>
	<div class="son">
			<slot> </slot>
	</div>
</template>
//父组件
<template>
	<div class="father">
			<son> 这句话会放入匿名插槽 </son>
	</div>
</template>