vue2的常用指令

vue2的常用指令

什么是vue的内置指令

内置指令的一些新颖而有吸引力的用法，可以让您在开发中能加速开发效率,降低维护成本。

v-bind和v-model
v-bind： 使用 v-bind 可以动态地绑定一个或多个特性，或者一个组件 prop 到表达式。可以使用简化语法 : 来代替 v-bind。
v-model： v-model 可以在表单输入元素上创建双向数据绑定。它会根据用户的输入自动更新绑定的数据。

v-if和v-show
v-if、v-else、v-else-if： 这些指令用于条件性地渲染元素。v-if 定义一个条件，如果为真，则渲染元素；否则，不渲染。v-else 和 v-else-if 是在 v-if 块或前一个 v-else-if 块之后使用的，用于定义额外的条件块。

v-show： 使用 v-show 可以根据表达式的真假值来切换元素的 display CSS 属性。当表达式为真时，元素会显示；当表达式为假时，元素会隐藏。
区别:v-if是直接在渲染树里面不渲染该元素.v-show只是给该元素添加display:none

v-text和v-html
v-text： 这个指令用于将元素的 textContent 设置为指定的数据值。它会替代元素原有的内容，只显示指定的文本数据。
v-html： 与 v-text 不同，v-html 将元素的 innerHTML 设置为指定的 HTML 内容。在这种情况下，指定的数据值会被浏览器解析并渲染为 HTML 元素。

v-for：
v-for： 使用 v-for 可以基于数组或对象的数据源进行循环渲染。可以使用特殊变量 i n d e x 获取当前项的索引， index 获取当前项的索引，index获取当前项的索引，key 获取当前项的键（仅适用于对象循环）。

v-on绑定事件
v-on： v-on 用于监听 DOM 事件并在触发时执行对应的方法。可以使用简化语法 @ 来代替 v-on。