Vue指令语法

1、简单介绍：

在Vue中，指令（Directives）是带有v-前缀的特殊属性，用于操作DOM元素和响应数据变化。

2、语法规则

• vue中的所有的指令都以v开始，同时是以html标签的形式存在，如：<html标签 v-指令名：参数="javascript表达式"></html> 。之前在{{}}插值语法中可以用的放到这里也可以用
• 有的指令不需要参数也不需要表达式，如v-once
• 有些指令不需要参数但是需要表达式，如`v-if="表达式"
• 有些指令既需要参数，也需要表达式，如v-bind:参数="表达式"

3、常见指令

v-once:

作用:只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-if:

作用:表达式的执行结果需要是一个布尔类型的数据:true或者fa1setrue:这个指令所在的标签，会被渲染到浏览器当中。fa1se:这个指令所在的标签，不会被渲染到览器当中。

v-bind: 可以让html标签中的某个属性产生动态效果

语法：<html标签 v-bind:参数="表达式"></html标签>
html页面是无法识别v-bind的，只有通过vue进行转换，才能识别。假设一个标签编译前的值为：<html标签 v-bind:参数="表达式"></html>但是编译后会变成：<html标签 参数名="表达式结果"></html>。
虽然原则上v-bind后面的参数可以随便写，但是只有写成html标签中有的属性才会生效。
v-bind:参数名="表达式"由于使用频率极高所以可以简写为:参数名="表达式"
v-bind是单向绑定：也就是说数据发生变化，视图也会发生变化，但是视图发生变化，数据不会发生变化。

v-model：

v-model也是绑定数据的指令，和v-bind不同的是v-model是双向数据绑定。
v-model更多的用于表单类html元素上，如<select> 、 input、textarea。因为这种元素才会提供交互界面。才可以让用户去改变视图。
通常来说v-model是用在value属性上，所以v-model也有简写方式：v-model="表达式"