编辑“︁Vue.js指令基础”︁

= Vue.js指令基础 =

Vue.js指令是Vue.js框架中的特殊属性，用于在DOM元素上应用特定的响应式行为。它们以'''v-'''前缀开头，允许开发者声明式地将数据绑定到DOM，实现动态交互效果。本指南将详细介绍Vue.js核心指令及其应用场景。

== 指令概述 ==
指令是Vue.js模板语法的重要组成部分，主要用于：
* 条件渲染（如<code>v-if</code>）
* 列表渲染（如<code>v-for</code>）
* 属性/事件绑定（如<code>v-bind</code>、<code>v-on</code>）
* 双向数据绑定（<code>v-model</code>）

指令的值通常是JavaScript表达式，在Vue实例的上下文中求值。

== 核心指令详解 ==

=== 文本插值（v-text / 双大括号） ===
最基本的指令形式，用于显示数据：

<syntaxhighlight lang="html">
<div id="app">
  <p v-text="message"></p>  <!-- 等效于： -->
  <p>{{ message }}</p>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</syntaxhighlight>

'''输出结果：'''
<pre>
Hello Vue!
Hello Vue!
</pre>

=== 条件渲染（v-if / v-show） ===
控制元素的显示/隐藏：

<syntaxhighlight lang="html">
<div id="app">
  <p v-if="isVisible">使用v-if</p>
  <p v-show="isVisible">使用v-show</p>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
})
</syntaxhighlight>

'''区别说明：'''
* <code>v-if</code>：条件为假时完全移除DOM元素
* <code>v-show</code>：始终渲染元素，仅切换CSS的<code>display</code>属性

=== 列表渲染（v-for） ===
基于数组或对象渲染列表：

<syntaxhighlight lang="html">
<ul id="app">
  <li v-for="(item, index) in items" :key="index">
    {{ index }}. {{ item.text }}
  </li>
</ul>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    items: [
      { text: '学习JavaScript' },
      { text: '学习Vue' },
      { text: '整个项目' }
    ]
  }
})
</syntaxhighlight>

'''输出结果：'''
<pre>
0. 学习JavaScript
1. 学习Vue
2. 整个项目
</pre>

=== 属性绑定（v-bind） ===
动态绑定HTML属性，简写为<code>:</code>：

<syntaxhighlight lang="html">
<img id="app" :src="imageSrc" :alt="imageAlt">
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    imageSrc: 'path/to/image.png',
    imageAlt: 'Vue标志'
  }
})
</syntaxhighlight>

=== 事件绑定（v-on） ===
监听DOM事件，简写为<code>@</code>：

<syntaxhighlight lang="html">
<button id="app" @click="counter += 1">增加计数</button>
<p>点击次数: {{ counter }}</p>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</syntaxhighlight>

=== 双向绑定（v-model） ===
在表单元素上创建双向数据绑定：

<syntaxhighlight lang="html">
<div id="app">
  <input v-model="message" placeholder="编辑我">
  <p>输入的内容是：{{ message }}</p>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
</syntaxhighlight>

== 指令修饰符 ==
Vue提供特殊的后缀（修饰符）来改变指令的行为：

<mermaid>
graph LR
    A[v-on] --> B[.stop]
    A --> C[.prevent]
    A --> D[.capture]
    D --> E[阻止事件冒泡]
    C --> F[阻止默认行为]
    B --> G[事件捕获模式]
</mermaid>

示例：
<syntaxhighlight lang="html">
<form @submit.prevent="onSubmit">
  <input @keyup.enter="submitForm">
</form>
</syntaxhighlight>

== 自定义指令 ==
开发者可以注册自定义指令：

<syntaxhighlight lang="javascript">
// 全局注册
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})
</syntaxhighlight>

<syntaxhighlight lang="html">
<input v-focus>
</syntaxhighlight>

== 实际应用案例 ==
'''场景：'''构建一个动态任务列表
<syntaxhighlight lang="html">
<div id="todo-app">
  <input v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      <span :class="{ 'done': todo.done }">{{ todo.text }}</span>
      <button @click="toggleDone(todo)">切换</button>
    </li>
  </ul>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#todo-app',
  data: {
    newTodo: '',
    todos: [
      { text: '学习Vue指令', done: false },
      { text: '构建项目', done: true }
    ]
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodo, done: false })
      this.newTodo = ''
    },
    toggleDone(todo) {
      todo.done = !todo.done
    }
  }
})
</syntaxhighlight>

== 性能考虑 ==
* <code>v-if</code> vs <code>v-show</code>：频繁切换时使用<code>v-show</code>，运行时条件变化少用<code>v-if</code>
* <code>v-for</code>必须搭配<code>:key</code>使用，提高列表渲染性能
* 复杂表达式考虑使用计算属性替代模板内表达式

== 数学公式示例 ==
当需要计算属性时可能涉及公式：
<math>
computed: {
  total() {
    return \sum_{i=0}^{n} this.items[i].price * this.items[i].quantity
  }
}
</math>

== 总结 ==
Vue.js指令系统提供了强大的声明式DOM操作能力。通过掌握这些指令，开发者可以：
* 高效实现数据绑定
* 简化DOM操作
* 构建响应式用户界面
* 提高代码可维护性

建议初学者通过实际项目练习这些指令的组合使用，逐步掌握Vue.js的响应式编程范式。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]