vue.js指令详细介绍

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它通过一系列指令来增强 HTML，使得开发者可以高效地声明式地将 DOM 绑定到底层 Vue 实例的数据上。下面是对 Vue.js 指令的详细介绍，特别是条件渲染指令、列表渲染 v-for 指令、方法与事件、以及 v-model 与表单。

条件渲染指令

1. v-if
   • 用途：根据表达式的真假值来渲染元素。
   • 特点：当条件为假时，元素及其绑定的数据销毁并重新渲染，而不是简单地隐藏。
   • 示例：

     html复制代码

     <div v-if="seen">现在你看到我了</div>

2. v-else
   • 用途：和 v-if 一起使用，当 v-if 条件为假时，渲染 v-else 包裹的内容。
   • 示例：

     html复制代码

     	<div v-if="seen">现在你看到我了</div>
     	<div v-else>现在你没看到我了</div>

3. v-else-if
   • 用途：为 v-if 添加额外的条件块。
   • 示例：

     html复制代码

     	<div v-if="type === 'A'">A</div>
     	<div v-else-if="type === 'B'">B</div>
     	<div v-else>Not A/B</div>

4. v-show
   • 用途：根据表达式的真假值来切换元素的 CSS display 属性。
   • 特点：与 v-if 不同，v-show 只是简单地切换元素的显示状态，不会销毁和重建 DOM 元素。
   • 示例：

     html复制代码

     <div v-show="seen">永远都在，除非隐藏</div>

列表渲染 v-for 指令

• 用途：基于源数据多次渲染元素或模板块。
• 语法：

  html复制代码

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

• 特点：
  • v-for 需要一个 key 属性来帮助 Vue 识别列表中的唯一元素，从而重用和重新排序现有元素。
  • 可以用在对象上，遍历对象的键值对：

    html复制代码

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

方法与事件

1. 方法：
   • 在 Vue 实例的 methods 对象中定义方法。
   • 在模板中通过 @click 或其他事件修饰符调用方法。
   • 示例：

     html复制代码

     <button @click="greet">Greet</button>

     javascript复制代码

     	new Vue({
     	el: '#app',
     	data: {
     	name: 'Vue.js'
     	},
     	methods: {
     	greet() {
     	alert('Hello ' + this.name)
     	}
     	}
     	})

2. 事件修饰符：
   • .stop：调用 event.stopPropagation() 阻止事件冒泡。
   • .prevent：调用 event.preventDefault() 阻止默认行为。
   • .capture：使用捕获模式添加事件监听器。
   • .self：只有在事件是从该元素本身触发时才触发回调。
   • .once：事件将只会触发一次。
   • 示例：

     html复制代码

     	<button @click.stop="doThis"></button>
     	<form @submit.prevent="onSubmit"></form>

v-model 与表单

• v-model：
  • 用途：在表单输入和应用状态之间创建双向数据绑定。
  • 支持元素：<input>、<textarea> 和 <select>。
  • 示例：

    html复制代码

    	<input v-model="message" placeholder="Edit me">
    	<p>Message is: {{ message }}</p>

• 修饰符：
  • .lazy：将 v-model 在 change 事件中同步，而不是 input。
  • .number：自动将用户的输入值转为数值类型。
  • .trim：自动过滤用户输入的首尾空白字符。
  • 示例：

    html复制代码

    	<input v-model.lazy="message" placeholder="type something">
    	<input v-model.number="age" type="number">
    	<input v-model.trim="message">

这些指令和方法是 Vue.js 框架的核心，通过它们可以高效地构建动态和交互式的用户界面。希望这个介绍对你有所帮助！