Vue渐进式框架

一、Vue：是一款前端渐进式框架，可以提高前端开发效率

特点：

        Vue通过MVVM模式，能够实现视图与模型的双向绑定

---

二、Vue基本语法：

1.v-for：遍历数组

        循环指定，基于一个数组或对象渲染一个列表需要配合使用

---

2.v-bind:显示数据（动态）

        动态地绑定一个或多个特性或一个组件prop到表达式

---

3.v-on：事件处理

        用于监听指定元素DOM事件

---

4.v-model：数据双向绑定

        实现表单输入和应用状态之间的双向绑定

---

5.v-text和v-HTML：显示数据

        可以避免插值闪烁

---

6.v-if和v-show：判断语法

        v-if：条件不满足时，元素不会存在

                根据表达式的值的真假条件渲染，在切换时元素及它的数据绑定/组件被销毁并重建  

        v-show：条件不满足时，元素不会显示（元素存在）

                根据表达式的真假值，切换元素的displayCSS属性

小知识：

v-if和v-show有什么不同，平时怎么运用它们？

• v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大
• v-show控制的是元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签

 项目中如何使用？

• 当初始条件为假时，v-show初始渲染开销较高,使用v-if
• 当我们频繁切换开关是，v-if切换开销较高,使用v-show
• 多路分支，只能选择v-if
• 具体看开发项目的时候是否频繁操作DOM

---

事件修饰符：

.stop ：

        阻止事件冒泡，也就是当前元素发生事件，但当前事件的父元素不发生该事件

---

.prevent：

        阻止默认事件的发生

---

.capture：

        使用事件捕获模式，主动获取子元素发生事件，把获取到的事件当自己的事件执行

---

.self：

        只有元素自身触发事件才行，冒泡或捕获的都不行

---

.once：

        只执行一次

---