vue常见的指令和修饰符

指令

v-if

v-if 是一个控制元素显示隐藏的指令 动态的的向DOM树添加或者删除元素 如果v-if的值为false则会从文档中直接删除dom

v-else

v-else 是v搭配v-if使用的 是v-if取反的结果

v-show

v-show也是控制元素显示隐藏的指令，是通过标签的css样式display的值是不是none控制显示隐藏

区别：

v-if是通过创建或者删除DOM节点来实现元素的显示隐藏，v-show则是通过css中的display属性来控制

v-if更适合数据的筛选和初始渲染，v-show更适合元素的切换

v-for

v-for 是一个循环指令 如果循环数组时候会有两个属性

<!-- 第一个变量是数组的数组项 第二个是数组的索引值 建议在for循环的dom中绑定key -->
<div v-for="(item,index) in arr" :key="index"></div>

如果循环的是一个对象 会有三个属性

<!-- 第一个变量是对象的值 第二个是键 第三个是对象的下标 -->
<div v-for="(value, key, index) in obj" :key="index"></div>

注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高

v-text

v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上

v-html

v-html 也是一个渲染内容的指令 但是v-html会解析标签 标签不在页面上显示

v-on

v-on 是一个事件绑定的指令 这个指令可以缩写成 @ 这里以点击事件为例

v-bind

v-bind 是一个属性的绑定指令 用来动态的绑定一个或者多个属性。

还可以通过给父组件添加自定义属性的方式将父组件的值传递给子组件

常用雨动态绑定class和style，以及href等。简写方式是:":属性名=''"一个冒号

v-model

是一个数据双向绑定的指令 通常会用在表单中,可以实现数据的双向数据绑定

数据双向绑定的原理：

vue.js是采用数据劫持结合发布者订阅者的模式，通过object.defineproperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图

v-slot 可以是插槽的名称用来选中特定的插槽  也可以是一个对象，这个对象会包含在子组件中的插槽中半丁的自定义属性的值

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译

v-cloak 防止页面插值闪烁

v-once 通过v-once绑定的标签 只渲染一次

 修饰符

.stop :阻止事件冒泡；由内而外，通俗的讲接受阻止事件将向上级DOM元素传递

.capture 阻止事件捕获；由外而内，在捕获阶段，事件从window开始，之后是document对象，一直到触发事件的元素

.selt: 当事件作用在元素本身时才会触发

.once 只触发一次

.prevent 阻止默认事件

.passive 告诉浏览器你不想阻止事件的默认行为

.trim 自动过滤用户输入的首尾空格

.left 点击鼠标左键时触发

.right 点击鼠标右键时触发

.middle 只当点击鼠标中键时触发