vue指令 电玩女神 2023-02-22 13:56 31阅读 0赞 ## 总结 ## * v-text * v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上 * v-html * v-html 也是一个渲染内容的指令 但是v-html会解析标签 标签不在页面上显示 * v-show * v-show 是一个控制元素显示隐藏的指令 他是通过css样式(display:none)控制dom的显示隐藏 * v-if * v-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删除dom * v-else-if * v-else-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删除dom * v-else 只是一个v-if取反的结果 * v-for * v-for 是一个循环指令 如果循环的是数组 则会有两个属性 例如 <div v-for="(item, index) in arr" :key="index"></div> 1 * 第一个变量是数组的数组项 第二个是数组的索引值 建议在for循环的dom中绑定key * v-for 如果循环的是一个对象 则会有三个属性 例如 <!-- 第一个变量是对象的值 第二个是键 第三个是对象的下标 --> <div v-for="(value, key, index) in obj" :key="index"></div> 1 2 * v-on * v-on 是一个事件绑定的指令 这个指令可以缩写成 @ 这里以点击事件为例 * 修饰符: * stop - 调用 event.stopPropagation()。 * prevent - 调用 event.preventDefault()。 * capture - 添加事件侦听器时使用 capture 模式。 * self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 * \{keyCode | keyAlias\} - 只当事件是从特定键触发时才触发回调。 * native - 监听组件根元素的原生事件。 * once - 只触发一次回调。 * left - (2.2.0) 只当点击鼠标左键时触发。 * right - (2.2.0) 只当点击鼠标右键时触发。 * middle - (2.2.0) 只当点击鼠标中键时触发。 * passive - (2.3.0) 以 \{ passive: true \} 模式添加侦听器 <button v-on:click.修饰符="fun"></button> <button @click.修饰符="fun"></button> 1 2 * v-bind * v-bind 是一个属性的绑定指令 该指令可以绑定标签已经存在的属性 也可以绑定一个自定义属性(自定义属性不能使用驼峰命名法建议也不要写成 aa-bb 的形式) * 还可以通过给父组件添加自定义属性的方式将父组件的值传递给子组件 * v-bind可以简写成 : * 属性加上v-bind指令可以绑定一个变量 如果没有v-bind则值为一个字符串 * v-model * v-model 是一个数据双向绑定的指令 通常会用在表单中 * v-model 在vue 2.0(3.0的以下版本) 通过 object.defineproperty() 实现 在object.defineproperty中有两个方法 set 和 get * 给变量设置值得过程就是 set的过程 而 将变量的值渲染的过程 就是 get * 在vue 3.0 中 通过 es6的 proxy方法进行数据劫持 proxy是对object.defineproperty的一个完善 其中也内置着 set和get方法 * 给变量设置值得过程就是 set的过程 而 将变量的值渲染的过程 就是 get * v-slot * 他的值可以是插槽的名称用来选中特定的插槽 也可以是一个对象 这个对象会包含 在子组件中的插槽中绑定的自定义属性的值 * v-pre * 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译 * v-cloak * 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 \[v-cloak\] \{ display: none \} 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 * v-once * 通过v-once绑定的标签 只渲染一次
相关 Vue指令 Vue指令 * v-text * v-html * v-show * v-if * v-else * v-else-if * v-for ... 迈不过友情╰/ 2024年04月17日 05:59/ 0 赞/ 89 阅读
相关 vue 指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 谁借莪1个温暖的怀抱¢/ 2023年11月05日 00:52/ 0 赞/ 117 阅读
相关 Vue指令 一、Vue指令的规定 1. 所有的Vue指令必须以v-开头,后面带命令动词。 2. 指令的参数:v-指令动词.参数 3. 指令的修饰符:v-指令动词:修饰符 二 阳光穿透心脏的1/2处/ 2023年06月25日 11:29/ 0 赞/ 18 阅读
相关 Vue指令 v-text v-text的作用跟插值表达式是一样的,但是不同的地方在于:v-text会覆盖元素中原本的内容,插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 男娘i/ 2023年06月09日 07:59/ 0 赞/ 22 阅读
相关 Vue 指令 基本指令 (1)v-bind指令 语法格式1:单个语法格式 v-bind:attributeName=variable 以下是HTML代码: < 矫情吗;*/ 2023年06月06日 08:22/ 0 赞/ 24 阅读
相关 vue指令 总结 v-text v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染 电玩女神/ 2023年02月22日 13:56/ 0 赞/ 32 阅读
相关 vue指令 vue指令 一个正在努力爱好运动的前端 座右铭:越努力越幸运,越运动越健康,热爱编程,热爱运动。 -------------------- 文章目录 朱雀/ 2022年12月22日 06:12/ 0 赞/ 146 阅读
相关 vue指令 vue介绍 1.作者 尤雨溪(vue) \[阿里\] 3.0 2.vue概念 官网:[Vue.js][] 渐进式 JavaScript 框架 渐进式:主 偏执的太偏执、/ 2022年09月16日 06:05/ 0 赞/ 166 阅读
相关 Vue指令 本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 非商业用途自由转载,保持署名,注明出处! ------- 待我称王封你为后i/ 2021年11月17日 13:10/ 0 赞/ 438 阅读
相关 Vue指令 Vue指令 1. watch监听 在vue中watch就是时时刻刻的监听绑定的这个data模型数据,当这个数据发生变化的时候,watch就会被触发,自动的执行其中的 £神魔★判官ぃ/ 2021年07月24日 19:31/ 0 赞/ 522 阅读
还没有评论,来说两句吧...