VUE中的常用指令

1、v-bind （单向数据绑定）（简写）：

• 完整语法：v-bind:href="url"

• 缩写形式：:href="url"

这里的 v-bind 用于绑定属性，缩写形式用一个冒号 : 取代了 v-bind。

在Vue.js框架中，v-bind:href="url" 是一个指令，用于将一个变量（在本例中为url）的值绑定到元素的href属性上。当变量url的值发生变化时，href属性的值也会相应地更新。

例如，如果您有一个Vue组件，其中有一个名为url的数据属性：

 data() {
   return {
     url: 'https://www.example.com'
   }
 }

在模板中，您可以使用v-bind:href或其缩写形式来绑定这个属性

 <!-- 完整语法 -->
 <a v-bind:href="url">访问网站</a>
 ​
 <!-- 缩写形式 -->
 <a :href="url">访问网站</a>

在这两种情况下，渲染后的HTML将会是：

 <a href="https://www.example.com">访问网站</a>

用户点击这个链接时，将会被带到https://www.example.com这个网址。如果url属性的值在Vue实例的生命周期中发生了变化，href属性的值也会自动更新。

2、v-on （事件绑定）（简写）：

• 完整语法：v-on:click="doSomething"

• 缩写形式：@click="doSomething"

v-on 用于监听 DOM 事件，缩写形式用一个 @ 符号表示。

下面通过点击事件来进行讲解

在Vue.js中，v-on:click="doSomething" 是一个指令，用于绑定一个点击事件监听器到元素上。当该元素被点击时，Vue会调用相应的方法。这些方法需要在Vue实例的methods部分中定义。

 <!-- 完整语法 绑定点击事件 -->
 <button v-on:click="doSomething">点击我</button>
 ​
 <!-- 缩写形式 绑定点击事件 -->
 <button @click="doSomething">点击我</button>
 ​
 <!-- 完整语法 绑定键盘按下事件 -->
 <input v-on:keyup="handleKeyup">
 ​
 <!-- 缩写形式 绑定键盘按下事件 -->
 <input @keyup="handleKeyup">

 methods: {
   doSomething() {
     // 处理点击事件
   },
   handleKeyup(event) {
     // 处理键盘事件
   }
 }

3、v-model：（双向数据绑定）

• 完整语法：没有提供缩写，因为 v-model 已经是最简形式。

• 作用：在表单输入和应用状态之间建立双向绑定。

• 双向绑定就是当您在表单输入框中输入内容时，绑定的数据模型（参数）会实时更新；反之，当您更新数据模型（参数）时，输入框中的内容也会相应地更新

v-model 语法主要应用于表单输入元素，用于创建双向数据绑定。它最常用于输入框（<input type="text">）、文本域（<textarea>）和选择框（<select>），因为这些元素的用户输入需要与应用状态同步。

下面是一些常见使用场景：

3.1、文本输入框 (<input type="text">):

 <input v-model="message">

当用户在输入框中键入文本时，message 数据属性会实时更新。

3.2、单行文本域 (<textarea>):

 <textarea v-model="message"></textarea>

文本域的内容会与message 数据属性保持双向同步。

3.3、复选框 (<input type="checkbox">):

 <input type="checkbox" v-model="isChecked">

当复选框被选中或取消选中时，isChecked 数据属性会变为true或false。

如果您没有为 isChecked 赋予初始值，那么在 JavaScript 中它将被视为 undefined，在模板渲染时 Vue 会将其处理为 false，因此复选框将不会打勾。如果您勾选了复选框，isChecked 的值将变为 true。

3.4、单选按钮 (<input type="radio">):

 <input type="radio" v-model="picked" value="a">A
 <input type="radio" v-model="picked" value="b">B

当用户选择一个单选按钮时，picked 数据属性会更新为该单选按钮的value。

这里的value参数不是必须的，如果没有这个value参数的话，这里面绑定的变量picked显示回事布尔类型，当勾选后会设为true，没有选中会设置为false；在添加了value参数后，通过勾选，绑定的参数picked会显示未勾选选项的value的参数值

3.5、下拉选择框 (<select>):

• 完整语法：v-slot:slotName

• 缩写形式：#slotName

<select v-model="selected">
   <option value="a">A</option>
   <option value="b">B</option>
 </select>

4、v-slot缩写

v-slot 主要用于定义组件中的插槽（slots）和作用域插槽（scoped slots），缩写形式用一个 # 符号表示。

首先，我们有一个名为 MyComponent 的 Vue 组件，它定义了一个名为 default 的插槽和一个名为 footer 的作用域插槽：

<!-- 子组件 -->
<template>
   <div>
     <slot></slot> <!-- 默认插槽 -->
     <slot name="footer"></slot> <!-- 作用域插槽 -->
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'MyComponent'
 }
 </script>

然后，我们可以在父组件中使用 v-slot 来为这些插槽提供内容：

<!-- 父组件 --> 
<template>
   <div>
     <MyComponent>
       <template v-slot:default>
         <p>这是默认插槽的内容</p>
       </template>
       <template v-slot:footer>
         <p>这是底部插槽的内容</p>
       </template>
     </MyComponent>
   </div>
 </template>
 ​
 <script>
 import MyComponent from './MyComponent.vue';
 ​
 export default {
   components: {
     MyComponent
   }
 }
 </script>

5、v-if、v-else-if、v-else 缩写：

• 完整语法：没有提供缩写，因为 v-if、v-else-if、v-else 已经是最简形式。

• 作用：条件渲染 DOM 元素。

<div id="app">
   <h1>Vue的条件渲染</h1>
   <button @click="toggleType">切换类型</button>
   
   <div v-if="type === 'A'">
     这是类型 A
   </div>
   <div v-else-if="type === 'B'">
     这是类型 B
   </div>
   <div v-else-if="type === 'C'">
     这是类型 C
   </div>
   <div v-else>
     未知的类型
   </div>
 </div>
 ​
 <script>
 new Vue({
   el: '#app',
   data: {
     type: 'A'
   },
   methods: {
     toggleType() {
       if (this.type === 'A') {
         this.type = 'B';
       } else if (this.type === 'B') {
         this.type = 'C';
       } else if (this.type === 'C') {
         this.type = 'A';
       }
     }
   }
 });
 </script>

最终渲染结果：

 由于 type 的初始值为 'A'，页面上最初会渲染 "这是类型 A"。当点击按钮时，toggleType 方法会被调用，根据当前 type 的值改变其为下一个值。例如，如果当前渲染的是类型 'A'，点击按钮后 type 会变为 'B'，页面将更新为渲染 "这是类型 B"，以此类推。
 ​
 最终渲染结果将取决于按钮被点击的次数和 type 的当前值。如果您刚刚启动应用且没有点击按钮，那么最终渲染结果将是：
 这是类型 A
 如果您点击一次按钮，渲染结果将是：
 ​
 这是类型 B
 如果您点击两次按钮，渲染结果将是：
 ​
 这是类型 C
 如果您点击三次按钮，渲染结果将回到初始状态，即：
 ​
 这是类型 A
 以此类推，每次点击按钮，渲染结果会在类型 'A'、'B' 和 'C' 之间循环。

在这个例子中，我们有一个按钮，当点击它时，toggleType 方法会被调用，这个方法会改变type的数据属性。根据type的值，Vue会渲染不同的<div>元素。

• 当type === 'A'时，渲染“这是类型 A”。

• 当type === 'B'时，渲染“这是类型 B”。

• 当type === 'C'时，渲染“这是类型 C”。

• 如果都不是，则渲染“未知的类型”。

v-if、v-else-if 和 v-else 指令确保只有一个条件块在任何时候被渲染。当条件变化时，Vue会根据条件动态地添加或删除元素及其子元素。这些指令对于创建动态用户界面和响应用户操作非常有用。

6、v-for 缩写：

• 完整语法：没有提供缩写，因为 v-for 已经是最简形式。

• 作用：基于源数据多次渲染一个元素或模板块。

在这个例子中，我们有一个数组 items，它包含了三个对象，每个对象都有一个 id 和一个 text 属性。

v-for 指令遍历 items 数组，并为每个元素创建一个列表项（<li>）。:key 是一个特殊的属性，它帮助Vue跟踪每个节点的身份，从而重用和重新排序现有元素，这在进行列表更新时非常重要。

 <div id="app">
   <h1>Vue的列表渲染</h1>
   <ul>
     <li v-for="item in items" :key="item.id">
       {{ item.text }}
     </li>
   </ul>
 </div>
 ​
 <script>
 new Vue({
   el: '#app',
   data: {
     items: [
       { id: 1, text: '项目 1' },
       { id: 2, text: '项目 2' },
       { id: 3, text: '项目 3' }
     ]
   }
 });
 </script>

最终渲染结果：

 <ul>
   <li>项目 1</li>
   <li>项目 2</li>
   <li>项目 3</li>
 </ul>

7、v-text 和 v-html 缩写：

• 完整语法：v-text="message" 或 v-html="rawHtml"

• 缩写形式：没有提供缩写，因为它们已经是最简形式。

• 作用：更新元素的 textContent 或 innerHTML。

v-text 用于更新元素的文本内容。当你想要更新一个元素的文本内容，而不需要解析 HTML 时，可以使用 v-text。

 <template>
   <div>
     <p v-text="message"></p>
   </div>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       message: 'Hello, Vue!'
     }
   }
 }
 </script>

v-html 用于更新元素的 innerHTML。当你需要渲染包含 HTML 标签的字符串，并且这些标签应该被解析为实际的 HTML 元素时，可以使用 v-html。

 <template>
   <div>
     <p v-html="rawHtml"></p>
   </div>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       rawHtml: '<span style="color: red;">Hello, Vue!</span>'
     }
   }
 }
 </script>

注意：

• 使用 v-html 时，要注意不要将用户提供的 HTML 内容直接渲染，因为这可能会导致跨站脚本攻击（XSS）。只对可信内容使用 v-html。

• v-text 和 v-html 会覆盖元素内原有的内容。如果你只想替换部分内容，可以使用 Mustache 语法（{{ }}）来插入文本。

• v-text 和 v-html 都是单向数据绑定，即从数据到 DOM 的更新。如果需要双向数据绑定，应该使用 v-model 指令。

8、v-show 缩写：

• 完整语法：没有提供缩写，因为 v-show 已经是最简形式。

• 作用：根据表达式的真假值切换元素的显示和隐藏。

• 效果类似于v-if

v-show 是一个指令，用于根据表达式的真假值来切换元素的显示和隐藏。

元素始终存在于 DOM 中，v-show 只是通过切换 CSS 的 display 属性来显示或隐藏元素。

 <template>
   <div>
     <h1 v-show="isVisible">这是一个可见的标题</h1>
     <button @click="toggleVisibility">切换可见性</button>
   </div>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       isVisible: true
     }
   },
   methods: {
     toggleVisibility() {
       this.isVisible = !this.isVisible;
     }
   }
 }
 </script>

<h1> 元素会根据 isVisible 数据属性的真假值来显示或隐藏。初始时，isVisible 被设置为 true，所以标题是可见的。点击按钮会调用 toggleVisibility 方法，这个方法会将 isVisible 的值取反，从而切换标题的可见性。

9、v-show 与 v-if 的区别

v-show 和 v-if 都可以用来条件性地渲染元素，但它们的工作方式不同：

• v-if 是“真正”的条件渲染，因为它确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-show 只是简单地切换元素的 CSS 属性 display，无论条件是否为真，元素都会存在于 DOM 中。

因此，如果你需要频繁切换元素显示和隐藏，v-show 可能是更好的选择，因为它不会导致 DOM 的重排。而如果你在运行时条件很少改变，v-if 可能更合适，因为它保证了在条件为假时不会渲染元素，从而节省了一些性能。