Vue - 常用指令 - 代码天地

Vue 指令是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。

Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。

以下是 Vue 常用的指令：

一、v-bind

作用：用于将 Vue 实例的数据绑定到 HTML 元素的属性上。

简写方式：直接写冒号 :

语法：

v-bind:attribute="dataProperty"

attribute: 是想要绑定的 HTML 属性，比如 class、href、src 等。
dataProperty: Vue 实例中的数据属性，通常在 data 函数中定义

v-bind 是 Vue 中用于动态绑定属性的指令。它的作用是在模板中绑定一个或多个 HTML 属性，使这些属性的值可以根据 Vue 实例中的数据动态变化。

在具体的使用中，v-bind 可以用于绑定任何 HTML 属性，比如 class、style、href、src 等。通过 v-bind，可以将 Vue 实例中的数据绑定到这些属性，使页面可以根据数据的变化而动态更新。

<template>
  <div>
    <h1>欢迎来到我的图片展示</h1>
    <!-- 使用 v-bind 动态绑定 src 属性 -->
    <!-- v-bind还有一个简洁的写法直接写  冒号 : -->
    <img :src="imageUrl" alt="示例图片" />
    <button @click="changeImage">换一张图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始图片 URL
      imageUrl: 'https://via.placeholder.com/300/09f/fff.png',
    };
  },
  methods: {
    // 切换图片的函数
    changeImage() {
      // 更改 imageUrl 为另一张图片
      this.imageUrl = 'https://via.placeholder.com/300/f90/fff.png';
    },
  },
};
</script>

<style scoped>
/* 这里可以添加样式 */
img {
  max-width: 100%;
  height: auto;
}
</style>

总结

使用 v-bind 可以将数据和视图连接起来，实现动态更新。
如果不使用 v-bind，属性的值就是静态的，无法根据数据的变化而更新。
v-bind 还有一个简洁的写法，直接写冒号“:”

二、v-on

作用：用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。

简写方式：@

语法：

v-on:event="methodName"

event 是我们要监听的事件，例如 click、mouseover、keyup 等。
methodName 是当事件触发时要调用的方法。

v-on 是 Vue 中用于绑定事件的指令。它的作用是在模板中监听 DOM 事件，然后触发相应的 Vue 实例中的方法或表达式。

通过 v-on，可以为元素绑定各种事件，比如点击、鼠标移入、键盘输入等，然后在触发这些事件时执行相应的逻辑。

<template>
  <div>
    <div v-on:click="clickName">我的名字：{
   
   { name }}</div>
    
    <button @click="changeName">点击更改名字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三', // 初始名字
    };
  },
  methods: {
    clickName() {
      alert(`你点击了我的名字：${this.name}`);
    },
    changeName() {
      this.name = this.name === '张三' ? '李四' : '张三'; // 切换名字
    },
  },
};
</script>

<style scoped>
/* 这里可以添加样式 */
div {
  cursor: pointer; /* 鼠标悬停时显示为手指形状 */
}
</style>

事件处理：

当用户点击显示名字的 <div> 时，clickName 方法会被调用，并弹出一个提示框，显示当前的名字。
点击 "更改名字" 按钮时，changeName 方法会被调用，切换 name 的值在 '张三' 和 '李四' 之间。

三、v-model

作用：用于实现表单元素和Vue实例中数据的双向绑定。

v-on和v-bind就实现了v-model

语法：

<input v-model="dataProperty" />

v-model 是指令名。
dataProperty 是 Vue 实例中定义的数据属性。

双向绑定:：v-model 使得表单元素（如 <input>、<textarea>、<select> 等）与 Vue 实例中的数据属性之间建立了双向绑定。这意味着：
- 当用户在表单元素中输入内容时，Vue 实例中的数据会自动更新。
- 反之，当 Vue 实例中的数据发生变化时，表单元素的内容也会自动更新。

<template>
  <div>
    <input v-model="message" placeholder="请输入信息">
    <p>您输入的信息是：{
   
   { message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 初始化数据属性
    };
  }
};
</script>

<template>
  <div>
    <select v-model="selected" >
      <option disabled value="">请选择</option>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
    </select>
    <p>您选择的选项是：{
   
   { selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '' // 初始化下拉框选中的值
    };
  }
};
</script>

注意事项

初始化: 确保在 Vue 实例的 data 中初始化与 v-model 绑定的数据属性。
适用元素: v-model 可以用于 <input>、<textarea>、<select> 等表单元素。
复选框和单选按钮: 在使用复选框和单选按钮时，v-model 会根据选中的状态自动更新绑定的属性。

四、v-for

作用：用于根据数组或 对象的属性值 来循环渲染元素或组件，生成重复的HTML元素（列表或重复的组件）。

语法：

<element v-for="(item, index) in array" :key="index">
  {
    
    { item }}
</element>

item 是当前迭代的数组元素。
index 是当前元素的索引（可选）。
array 是要迭代的数组。
:key 是一个唯一的标识符，用于帮助 Vue 跟踪元素的变化，优化渲染性能

（一）数组的渲染

<template>
  <div>
    <ul>
      <li v-for="(item, index) in fruit" :key="index">
        {
     
     { item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruit: ['苹果', '香蕉', '橙子'] // 数组数据
    };
  }
};
</script>

在这个示例中， v-for 用于遍历 fruit 数组，并为每个元素生成一个 <li> 列表项。

（二）对象的渲染

语法：

<div v-for="(value, key) in object" :key="key">
  {
    
    { key }}: {
    
    { value }}
</div>

object：要遍历的对象。
value：当前属性的值。
key：当前属性的键。
:key：Vue 推荐为每个循环元素提供一个唯一的 key，以帮助 Vue 更高效地更新和渲染。
注意：值在前，键在后。

<template>
  <div>
    <ul>
      <li v-for="(value, key) in people" :key="key">
        {
     
     { key }}: {
     
     { value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: {
        name: '张三',
        age: 25,
        city: '重庆'
      }
    };
  }
};
</script>

在这个示例中，v-for 用于遍历 people对象的属性，生成一个包含键值对的列表。

:key 的重要性

在使用 v-for 时，建议始终为每个循环生成的元素提供一个唯一的 key。这有助于 Vue 在更新 DOM 时识别哪些元素发生了变化，从而提高性能和避免潜在的渲染问题。

五、v-if 与 v-show

v-if：用于根据表达式的值来条件性地渲染元素或组件。

v-show：v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。

v-if 在页面中表现为dom直接消失，v-show 表现为 display:none，v-if 可以配置 v-else-if

和 v-else 一起来使用，在页面中实现复杂的判断逻辑。

（一）v-if

v-if 是一种条件渲染指令，当条件为真时，渲染该元素；当条件为假时，元素及其子元素会被完全移除（DOM 不存在）。

语法：

<div v-if="condition">
  <!-- 当 condition 为 true 时渲染的内容 -->
</div>

（二）v-show

v-show 也是一种条件渲染指令，但它通过设置 CSS 的 display 属性来控制元素的显示和隐藏。当条件为假时，元素仍然存在于 DOM 中，只是被隐藏。

语法：

<div v-show="condition">
  <!-- 当 condition 为 true 时显示的内容 -->
</div>

总结

v-if：当条件为 false 时，元素会从 DOM 中移除，适合需要根据条件完全控制渲染的场景。
v-show：当条件为 false 时，元素仍然存在于 DOM 中，但不可见，适合需要频繁切换显示状态的场景。

（六）v-html

作用：v-html 是Vue.js指令之一，用于将绑定的数据作为HTML解释而不是纯文本。它允许在页面上动态渲染包含HTML标签的字符串，但潜在的安全风险需要谨慎使用。

语法：

<div v-html="htmlContent"></div>

htmlContent 是一个包含 HTML 字符串的 Vue 实例数据属性。

<div id="app">
  <div v-html="message"></div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      message: '<h1>Hello, Vue!</h1><p>This is a paragraph.</p>'
    }
  }
});

在这个示例中，message 包含了一些 HTML 标签，当 Vue 渲染这个元素时，<h1> 和 <p> 标签会被解析并显示为 HTML，而不是作为文本。