一口气学完 Vue 的所有 V- 前缀的指令

一口气学完 Vue 的所有 V- 前缀的指令

在 Vue.js 中，指令是带有 v- 前缀的特殊属性，用于在模板中绑定表达式或执行特殊操作。下面详细介绍 Vue 中常见指令的用法。

1. 插值指令

{{ }}（Mustache 语法）

• 作用：用于在模板中插入动态数据。

• 示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

2. 条件渲染指令

v-if、v-else-if、v-else

• 作用：根据表达式的值来有条件地渲染元素。v-if 是条件判断的起始指令，v-else-if 用于添加多个条件分支，v-else 用于表示前面条件都不满足时的情况。

• 示例：

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 80
    };
  }
};
</script>

v-show

• 作用：根据表达式的值来显示或隐藏元素，本质是通过修改元素的 display 属性来实现。

• 示例：

<template>
  <div>
    <p v-show="isVisible">这是一段可见的文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

3. 列表渲染指令

v-for

• 作用：用于遍历数组或对象，渲染列表。

• 示例：

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

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'cherry']
    };
  }
};
</script>

4. 事件绑定指令

v-on（缩写 @）

• 作用：用于绑定 DOM 事件，当事件触发时执行相应的方法。

• 示例：

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
};
</script>

5. 属性绑定指令

v-bind（缩写 :）

• 作用：用于动态绑定 HTML 属性。

• 示例：

<template>
  <div>
    <img :src="imageUrl" alt="示例图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

6. 双向数据绑定指令

v-model

• 作用：用于在表单元素（如 input、textarea、select 等）上创建双向数据绑定。

• 示例：

<template>
  <div>
    <input v-model="message" type="text">
    <p>你输入的内容是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

7. 自定义指令

全局自定义指令

• 作用：可以创建自定义的指令，在全局范围内使用。

• 示例：

// main.js
import Vue from 'vue';
import App from './App.vue';

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
});

new Vue({
  render: h => h(App)
}).$mount('#app');

<template>
  <div>
    <input v-focus type="text">
  </div>
</template>

局部自定义指令

• 作用：在组件内部注册自定义指令，只能在该组件中使用。

• 示例：

<template>
  <div>
    <input v-color="'red'" type="text">
  </div>
</template>

<script>
export default {
  directives: {
    color: {
      bind(el, binding) {
        el.style.color = binding.value;
      }
    }
  }
};
</script>

以上就是 Vue 中常见指令的用法，不同的指令可以帮助你更方便地实现各种功能