Vue--API--其他

落日映苍穹つ 2022-12-22 04:54 261阅读 0赞

原文网址：[Vue--API--其他\_IT利刃出鞘的博客-CSDN博客][Vue--API--_IT_-CSDN]

# 指令 #

**简介**

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

## v-bind ##

**其他网址**

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

**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 ##

**其他网址**

> [Vue基础系列--插槽\_feiying0canglang的博客-CSDN博客][Vue_--_feiying0canglang_-CSDN]

<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"> 这样写是不对的，\#之后必须带参数。

# 特殊 attribute #

**其他网址**

> 官网：[API — Vue.js][API _ Vue.js]

## key ##

**简介**

> **主要用法**
> 
> key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
> 
> 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
> 
> 最常见的用例是结合 v-for：
> 
>     <ul>
>       <li v-for="item in items" :key="item.id">...</li>
>     </ul>
> 
> **其他用法**
> 
> 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
> 
>  *  完整地触发组件的生命周期钩子
>  *  触发过渡
> 
> 例如：
> 
>     <transition>
>       <span :key="text">{
>         { text }}</span>
>     </transition>
> 
> 当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。

**为什么要使用唯一的key**

> **其他网址**
> 
> [为什么使用v-for时必须添加唯一的key?][v-for_key]

[Vue--API--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109755942
[- _ - _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_--_feiying0canglang_-CSDN]: https://blog.csdn.net/feiying0canglang/article/details/109732115
[API _ Vue.js]: https://cn.vuejs.org/v2/api/#%E7%89%B9%E6%AE%8A-attribute
[v-for_key]: https://juejin.im/post/6844903577215827982