vue常用指令

  Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架，核心在于通过数据驱动界面的更新和展示而非JS中通过操作DOM来改变页面的显示。下面我们来说说vue的常用基础指令吧!

v-once指令

执行一次性地插值，当数据改变时，插值处的内容不会更新。

v-if指令

条件渲染指令，根据表达式的真假来添加或删除元素。其语法结构是：v-if="expression"，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。

v-else-if

v-else

v-show指令

也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

v-show和v-if的区别：

v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

-else-if指令

可以用v-else指令为v-if或v-show添加一个“else块”。注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

v-for指令

基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。

该指令之值，必须使用特定的语法(item, index) in items,  为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令。

一个对象的 v-for
你也可以用 v-for 通过一个对象的属性来迭代。

你也可以提供第二个的参数为 property 名称 (也就是键名)：

第三个参数为索引：

 v-text指令

v-text：向标签中注入文本，且会替换掉元素之前的内容。

v-bind指令

动态地绑定标签中的一个或多个属性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

v-bind:src="imageSrc"  可以缩写： :src="imgaeSrc"

:class="{ red: isRed }"  或  :class="[classA, classB]" ...

:  或 : ...

 绑定一个有属性的对象，比如：v-bind="{ id: someProp, ‘other-attr‘: otherProp }"

语法结构：v-bind:argument="expression"

因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。 

语法糖为冒号（：）

v-on指令

 动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：

1. .stop - 调用 event.stopPropagation()；停止冒泡。
2. .prevent - 调用 event.preventDefault(); 停止监听原生事件。
3. .capture - 添加事件侦听器时使用 capture 模式。
4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
5. .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
6. .once - 触发一次。

vue常用指令

原文：https://www.cnblogs.com/2821487915qq/p/12456338.html