Vue2常用指令

本文详细介绍了 Vue.js 中常用的指令,包括 v-on、v-bind、v-slot 等,解释了它们的功能及应用场景,并对比了 v-if 和 v-show 的实现原理与使用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

v-on:给元素绑定事件,一般常写在方法methods里面,简写形式为@

v-bind:给元素绑定属性的,简写形式为:

v-slot:插槽,分为具名插槽和匿名插槽,默认为匿名插槽。

具名插槽:父组件里面元素给上slot属性并且跟上属性值,子组件里面通过slot标签里面的name属性等于父组件里面的属性值这就是具名插槽。

具名插槽和匿名插槽里面的内容都是由父组件决定。

v-clock:该指令放在html中,样式属性为display :none;此指令可以解决插值表达式页面闪烁问题。

v-pre:阻止预编译,如果想要输出原样的纯文本文档,可以使用v-pre阻止预编译

v-once:表示只渲染一次,当要重新渲染时,里面的元素/组件以及所有子节点将被视为静态跳过

v-html:用于更新元素的innerHTML,可以编译标签

v-text:用于更新元素的textContent,不可以编译标签

v-for:一个用于迭代的指令,可以根据数据源渲染多次渲染元素和模板

v-for里面都有一个key属性,这个key属性标识必须是唯一的且值是不可变的

key的作用:采用就地复用原则,提高渲染效率,可以避免出现数据混乱问题

v-modle:只局限于input,select 标签,能将页面控件上输入的值同步到相关绑定的data属性上

实现原理:通过Object.deineproperty里面的set和get函数实现数据的劫持

   let obj = {};

   Object.defineProperty(obj, "fu",{

   set(nvale) {

   document.getElementById('txt').value = nvale;

   document.getElementById('cd').innerHTML = nvale;

   }

   })

  document.addEventListener('keydown', function(eve){

    obj.fu = eve.target.value;

  })

这里仅仅只用啦set函数赋值实现。

v-if:根据值动态控制DOM元素的显示于隐藏。

实现方式:v-if是动态的向DOM树删除或添加元素

编译过程:v-if切换有一个局部的编译卸载过程,切换过程中会适当的销毁和重建内部的监听事件和子组件。

编译条件:v-if是惰性的;条件为假时,什么也不做,如果第一次条件为真就会局部编译

v-if有很高的性能消耗,适用于不太可能改变的情景。

v-show:根据值动态控制DOM元素的显示于隐藏。

实现方式:v-show是通过DOM元素里面display属性来达到显隐

编译过程:v-show只是简单的通过CSS样式切换

编译条件:v-show不管什么条件都会编译,然后被缓存,而且DOM元素保留

v-show有很高的初始化渲染性能消耗,适用于经常切换改变情景。

### Vue2 常用指令列表及示例 #### 数据绑定与表单操作 `v-model` 是用于实现双向数据绑定的指令。通过该指令,开发者可以在输入框或其他表单控件中快速获取和设置值。需要注意的是,在使用 `v-model` 绑定表单数据时,这些数据必须在组件的 `data` 属性中声明[^1]。 ```html <input type="text" v-model="message"> <p>Message is: {{ message }}</p> <script> const app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }) </script> ``` --- #### 条件渲染 `v-if`, `v-else-if`, 和 `v-else` 指令允许基于条件动态地渲染 DOM 元素。它们可以根据表达式的布尔值来决定是否显示某个部分的内容[^5]。 ```html <div id="app"> <p v-if="score >= 90 && score <= 100">成绩 A</p> <p v-else-if="score >= 80 && score < 90">成绩 B</p> <p v-else-if="score >= 70 && score < 80">成绩 C</p> <p v-else>成绩 D</p> </div> <script> const app = new Vue({ el: '#app', data: { score: 85 } }); </script> ``` 此外,如果只需要简单的显示/隐藏逻辑而不需要销毁或重新创建元素,则可以使用 `v-show` 指令[^3]: ```html <h1 v-show="isVisible">这是可见的部分</h1> <button @click="toggleVisibility">切换显示状态</button> <script> const app = new Vue({ el: '#app', data: { isVisible: true }, methods: { toggleVisibility() { this.isVisible = !this.isVisible; } } }); </script> ``` --- #### 列表渲染 `v-for` 指令能够遍历数组或对象并生成多个子节点。它支持多种语法形式,例如 `(item, index)` 或 `(value, key, index)` 的解构方式[^2]。 ```html <ul> <li v-for="(item, index) in items" :key="index">{{ item.name }} - {{ item.price }}</li> </ul> <script> const app = new Vue({ el: '#app', data: { items: [ { name: '苹果', price: 5 }, { name: '香蕉', price: 3 }, { name: '橙子', price: 4 } ] } }); </script> ``` 还可以结合其他指令一起使用,比如过滤特定项后再展示: ```html <li v-for="(v, k) in obj" v-show="v === 25">{{ v }}</li> ``` --- #### 自定义指令 除了内置指令外,Vue 还提供了自定义指令的功能。当注册一个全局指令时,可以通过传递参数如 `el`, `binding` 等来自由控制行为[^4]。 ```javascript // 注册全局指令 Vue.directive('focus', { inserted(el) { el.focus(); } }); <!-- 使用 --> <input v-focus /> ``` --- #### 事件监听器 `v-on` (简写为 `@`) 可以用来监听用户的交互动作,并触发相应的方法调用。方法内的 `this` 总是指向当前 Vue 实例。 ```html <button @click="handleClick">点击按钮</button> <script> const app = new Vue({ el: '#app', methods: { handleClick(event) { console.log('按钮被点击了!', event); } } }); </script> ``` 对于需要额外参数的情况,也可以直接传入: ```html <button @click="sayHi('你好')">打招呼</button> <script> const app = new Vue({ el: '#app', methods: { sayHi(message) { alert(message); } } }); </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值