Vue--指令的缩写--使用/教程/实例

亦凉 2023-10-02 14:12 7阅读 0赞

原文网址：[Vue--指令的缩写--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍Vue的指令的用法。包括：v-bind，v-on，v-model，v-slot等。

**官网**

[API — Vue.js][API _ Vue.js]

**指令简介**

在构建单页应用（SPA ）时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。因此Vue.js 为一些常用的指令 v-bind 和v-on 提供特别的缩写。

## v-bind ##

**v-bind缩写**

以已有的标签及属性为例示例。（当然，引用组件、自定义属性(props)是一样的）.

<a v-bind:href="url"></a>
     
    
    <a :href="url"></a>
    
    
    <a :href="{url: 'www.baidu.com'}"></a>
    
    
    <a href="www.baidu.com"></a>

## v-on ##

**v-on缩写**

<a v-on:click="doSomething"></a>
     
    
    <a @click="doSomething"></a>

## v-model ##

<comp-b v-bind:value="value" v-on:input="value = $event"></comp-b>
    
    
    <comp-b v-model="value"></comp-b>

## v-slot ##

<template v-slot:name1>xxx<template>
    
    
    <template #name1>xxx<template>

<template v-slot:name1="data1">xxx<template>
    
    
    <template #name1="data1">xxx<template>

<template v-slot:default="data1">xxx<template>
    
    
    <template v-slot="data1">xxx<template>

注意：<template \#="xxx"> 这样写是不对的，\#之后必须带参数。

## **其他网址** ##

[模板语法 - 缩写 - 《Vue.js v2.x 官方教程》 - 书栈网][- _ - _Vue.js v2.x _ -]  
[v-bind,v-on的缩写\_时光足迹-CSDN博客][v-bind_v-on_-CSDN]

[Vue--插槽(v-slot)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_v-slot_--_IT_-CSDN]

[Vue--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121188201
[API _ Vue.js]: https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
[- _ - _Vue.js v2.x _ -]: https://www.bookstack.cn/read/vue-v2.x/spilt.3.f566fce1bf596f60.md
[v-bind_v-on_-CSDN]: https://blog.csdn.net/gaoxiaoba/article/details/52756280
[Vue--_v-slot_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121188128