什么是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。