Vue的--是什么--特点--核心概念--开发模式--常用修饰符--指令--总结

vue是什么

是一个致力于打造构建用户界面的渐进式框架

vue的特点

1. 简单易学：国⼈开发，中⽂⽂档，不存在语⾔障碍 ，易于理解和学习；
2. 灵活：它可以与已知第三方工具（vuex），第三方Ui库（elementUi）（vant），结合使用
3. 高效：虚拟dom，diff算法，大大的提升了页面的运行效率
4. 轻量级框架：只关注视图层，是⼀个构建数据的视图集合，⼤⼩只有⼏⼗kb
5. 双向数据绑定：在数据操作方面更为简单
6. 组件化：实现了html的封装和重⽤，在构建单⻚⾯应⽤⽅⾯有着独特的优势；
7. 视图，数据，结构分离：使数据的更改更为简单，不需要进⾏逻辑代码的修改，只需要操作数据就能完成相关操作；

vue的核心概念

1. 数据驱动：ViewModel，保证数据和视图的一致性
2. 组件系统：应用类UI可以看作全部是由组件树构成的

vue的开发模式MVVM和MVC

1. mvvm

Model 代表数据模型

View 代表UI视图

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁，可以理解成mvc中的控制器)

简单理解：视图请求数据，将请求发送至控制器，在控制器的两端具有监听机制，直接调用模型的数据，一端改变全部改变，利用数据劫持，结合订阅者和发布者模式，实现数据的双向绑定、

2. mvc

Model（模型）

View（视图）

Controller（控制器）

简单的理解：视图请求数据，将请求发送至控制器，控制器再将请求发送给模型，模型去查找数据，找到之后传给控制器，控制器再传给视图进行渲染。

vue常用的修饰符

.事件修饰符 （管道符：可以串联使用）

.stop:阻止事件冒泡

.prevent: 取消元素默认行为

.once:事件只触发一次

.self：如果给父元素加上.self修饰符，那么点击子元素，不会触发父元素事件，只有点击元素本身时，才会触发

.capture: 元素可以开启事件捕获，和冒泡事件的执行顺序相反

.键盘修饰符

.enter: 在键盘按下或者键盘抬起，加上.enter，就只有回车事件才可以触发该事件

（.13 利用事件源，拿到keyCode 做判断处理）

.tab：制表键

.delete：含delete和backspace键

.esc：返回键

.space: 空格键

.up：向上键

.down：向下键

.left：向左键

.right：向右键

如果串联使用：.up.enter 那么触发其中一个，就可以触发事件

.鼠标修饰符

.left : 点击鼠标左键

.right : 点击鼠标右键

.middle: 点击鼠标滑轮键

.修饰键

.ctrl .alt .shift .meta

可以和键盘修饰符一起使用，同时触发才可以触发事件

vue的指令

1.v-bind:当一个属性想要使用 data中的数据时，在属性前，加上一个v-bind:(动态属性)
简便语法： v-bind: 省略成 :属性=“属性值”

2.v-on: 给元素进行绑定事件，v-on:click=“alertFn”
事件方法定义在 与data平级的属性 methods中
methods:{ // 方法集合
alertFn() {

​ console.log(123)

​ }
​ }
简便语法: v-on: 省略成 @事件=“回调方法”

3.v-if:
指令加载元素上，v-if的条件只有true或者false，当条件为真时，显示在页面上，当条件为假时，移除dom节点
v-else-if: 给元素加v-else-if时，当前dom元素上面的dom元素 必须要有v-if
v-else 给元素加v-else时，当前dom元素上面的dom元素 必须要有v-if或者v-else-if

v-show:
指令加载元素上,v-show的条件只有true或者false，当条件为真时，显示在页面上，当条件为假时，隐藏dom节点
在使用上，如果说隐藏显示切换的不频繁，建议使用v-if,如果频繁使用，建议使用v-show

template 模板标签，也可认为是 透明标签，v-if可以控制删除节点或者添加节点，v-show不起作用

4.v-for:
循环数组：
指令使用在想要循环显示的元素上，

5.v-model 双向数据绑定
给可以用户操作的一些标签，标签中数据发生改变，数据也跟着发生改变

6.v-text : 可以填充元素内容，指令右侧值就是内容

7. v-html: 他可以将带有标签形式的字符串，进行解析渲染, 与原生js中innerHTML功能 很像

8.v-cloak: 可以解决插值表达式闪烁的问题，解决办法, 给元素加上一个 v-cloak 指令,
在style标签中，加上 [v-cloak]{display:none;}

Ending。。。