系列文章目录
TypeScript 从入门到进阶专栏
文章目录
- 系列文章目录
- 前言
- 一、v-model (双向绑定功能)
- 二、v-bind(用于将一个或多个属性绑定到元素的属性或组件的 prop)
- 三、v-if、v-else、v-else-if(用于根据条件选择性地渲染元素)
- 四、v-show(根据条件显示或隐藏元素,通过改变元素的 CSS 的 display 属性)
- 五、v-for(用于基于数据源循环渲染元素列表)
- 六、v-on(用于绑定事件监听器,可以使用简写的语法 @)
- 七、v-text(用于将数据绑定到元素的文本内容) (vue3已废弃)
- 八、v-html(将数据作为 HTML 解析并渲染)
- 九、v-pre(将元素或组件直接渲染为静态内容,不会被当成模板编译)
前言
Vue 中的指令是用来操作DOM元素的特殊属性,它们可以在模板中使用,并且通过Vue实例的指令选项进行自定义。
一、v-model (双向绑定功能)
Vue 3 中使用 v-model 的方式与 Vue 2 有所不同。
在 Vue 2 中,我们可以通过在组件上使用 v-model
指令来实现双向绑定。例如:
<child-component v-model="data"></child-component>
而在 Vue 3 中,v-model
指令被移除了,取而代之的是一个新的命名约定。
- 在子组件中,你需要声明一个
modelValue
属性,用于接收传递给子组件的值,并且在需要更新值的时候,触发一个名为update:modelValue
的自定义事件。
// 子组件
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
props: ['modelValue'],
};
</script>
- 在父组件中,你需要使用
.sync
修饰符来实现双向绑定。这样做可以将一个 prop 的更新转换为更新其父级的值。
<!-- 父组件 -->
<template>
<child-component :modelValue.sync="data"></child-component>
</template>
<script>
export default {
data() {
return {
data: ''
}
}
};
</script>
这样就可以在父组件中使用 v-model
的方式进行双向绑定了。
<child-component v-model="data"></child-component>
除了这种方式,你也可以手动创建一个绑定到 modelValue
的计算属性,然后通过 @input
事件手动更新父级的值。
<!-- 父组件 -->
<template>
<child-component :model-value="data" @update:model-value="data = $event" />
</template>
<script>
export default {
data() {
return {
data: ''
}
}
};
</script>
<!-- 子组件 -->
<template>
<input :value="modelValue" @input="$emit('update:model-value', $event.target.value)" />
</template>
<script>
export default {
props: ['modelValue'],
};
</script>
二、v-bind(用于将一个或多个属性绑定到元素的属性或组件的 prop)
使用 v-bind 来动态绑定属性或者指令到一个表达式上。使用 v-bind 的语法如下:
<template>
<div>
<button v-bind:disabled="isDisabled">Click me</button>
<input v-bind:value="username" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const isDisabled = ref(false);
const username = ref('');
return {
isDisabled,
username,
};
},
};
</script>
在上面的例子中,我们使用了 v-bind 指令来绑定按钮的 disabled 属性和输入框的 value 属性到一个变量上。这些变量使用了 Vue 3 的 composition API 中的 ref 函数来创建可响应式的数据。
v-bind:disabled=“isDisabled” 表示将 isDisabled 变量的值绑定到按钮的 disabled 属性上。当 isDisabled 变量的值为 true 时,按钮将被禁用。
v-bind:value=“username” 表示将 username 变量的值绑定到输入框的 value 属性上。输入框中显示的文本将随着 username 变量的值而变化。
总之,Vue 3 中的 v-bind 用法和 Vue 2 中的用法基本相同,但是配合使用 composition API 来创建可响应式数据。
三、v-if、v-else、v-else-if(用于根据条件选择性地渲染元素)
v-if指令用于根据条件来渲染元素,它需要一个表达式作为参数,如果表达式的值为真,则渲染该元素,如果为假,则不渲染。
v-else指令用于指定一个条件为假时渲染的元素,它必须紧跟在v-if指令之后,而且它们必须属于同一个父元素。
v-else-if指令用于指定一个额外的条件,它必须紧跟在v-if或v-else-if指令之后,而且它们必须属于同一个父元素。v-else-if可以多次使用,用于指定多个条件,当前一个条件为假时,会检查下一个条件。
以下是一个例子,展示了如何使用v-if、v-else和v-else-if指令:
<template>
<div>
<p v-if="condition1">条件1为真</p>
<p v-else-if="condition2">条件2为真</p>
<p v-else>条件1和条件2都为假</p>
</div>
</template>
<script>
export default {
data() {
return {
condition1: true,
condition2: false
}
}
}
</script>
四、v-show(根据条件显示或隐藏元素,通过改变元素的 CSS 的 display 属性)
使用 v-show 指令来控制元素的显示与隐藏。v-show 的使用方式与 Vue 2 中相同。
你可以在一个元素上添加 v-show 指令,并将一个计算属性或者一个响应式的变量作为其值。这样,当计算属性的值或者变量的值为 true
时,元素将显示;当计算属性的值或者变量的值为 false 时,元素将隐藏。
下面是一个示例:
<template>
<div>
<button @click="toggle">Toggle</button>
<div v-show="isVisible">This is a hidden element</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: false
};
},
methods: {
toggle() {
this.isVisible = !this.isVisible;
}
}
};
</script>
在上面的示例中,初始时 div 元素是隐藏的。当点击按钮时,toggle 方法会将 isVisible 的值反转,从而控制 div 元素的显示与隐藏。
注意:v-show 只是简单地切换元素的 CSS 属性(display: none),而不是真正地从 DOM 中移除或添加元素。因此,如果频繁地切换显示和隐藏,可能会影响性能。如果需要频繁地切换显示和隐藏,可以考虑使用 v-if 指令。
五、v-for(用于基于数据源循环渲染元素列表)
Vue 中,使用
v-for
指令来循环渲染列表或数组的元素。
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
在上面的例子中,我们使用 v-for
指令来循环渲染 items
数组中的每个元素。需要注意的是,我们为每个循环的元素指定了一个唯一的 key
值,这有助于 Vue 跟踪每个元素的身份,以便在进行列表更新时提高性能。
你还可以使用 index
参数访问当前元素在数组中的索引:
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.name }}
</li>
</ul>
</div>
</template>
此外,还可以使用 v-for
指令循环渲染对象的属性:
<template>
<div>
<ul>
<li v-for="(value, key) in user" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</div>
</template>
在上面的例子中,我们循环渲染了 user
对象的属性,key
代表属性名,value
代表属性值。
除了基本的循环渲染,v-for
还支持使用 of
关键字来替代 in
关键字:
<template>
<div>
<ul>
<li v-for="item of items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
使用 of
关键字的语法更接近 JavaScript 的 for...of
循环。
注意:在 Vue 3 中,v-for
不再支持同时使用 key
和 index
参数,如果需要使用索引值,可以通过在循环前手动增加一个计数器变量。
六、v-on(用于绑定事件监听器,可以使用简写的语法 @)
使用v-on指令来监听DOM事件。v-on指令可以用于绑定内联事件处理函数或组件方法。
以下是一些v-on使用示例:
- 绑定内联事件处理函数:
<button v-on:click="handleClick">点击按钮</button>
const app = Vue.createApp({
methods: {
handleClick() {
console.log('按钮被点击了');
}
}
});
app.mount('#app');
- 绑定动态事件名:
<button v-on:[eventName]="handleClick">点击按钮</button>
const app = Vue.createApp({
data() {
return {
eventName: 'click'
}
},
methods: {
handleClick() {
console.log('按钮被点击了');
}
}
});
app.mount('#app');
- 传递事件参数:
<button v-on:click="handleClick('参数')">点击按钮</button>
const app = Vue.createApp({
methods: {
handleClick(param) {
console.log('参数:', param);
}
}
});
app.mount('#app');
除了使用v-on指令,还可以使用@符号作为v-on的简写形式。
<button @click="handleClick">点击按钮</button>
```在Vue3中,可以使用v-on指令来监听DOM事件。v-on指令可以用于绑定内联事件处理函数或组件方法。
以下是一些v-on使用示例:
1. 绑定内联事件处理函数:
```html
<button v-on:click="handleClick">点击按钮</button>
const app = Vue.createApp({
methods: {
handleClick() {
console.log('按钮被点击了');
}
}
});
app.mount('#app');
- 绑定动态事件名:
<button v-on:[eventName]="handleClick">点击按钮</button>
const app = Vue.createApp({
data() {
return {
eventName: 'click'
}
},
methods: {
handleClick() {
console.log('按钮被点击了');
}
}
});
app.mount('#app');
- 传递事件参数:
<button v-on:click="handleClick('参数')">点击按钮</button>
const app = Vue.createApp({
methods: {
handleClick(param) {
console.log('参数:', param);
}
}
});
app.mount('#app');
除了使用v-on指令,还可以使用@符号作为v-on的简写形式。
<button @click="handleClick">点击按钮</button>
七、v-text(用于将数据绑定到元素的文本内容) (vue3已废弃)
使用
v-text
指令来设置元素的文本内容。
使用 v-text
指令的语法如下:
<div v-text="message"></div>
在上面的示例中,message
是一个 Vue 实例中的 data 属性,它将被渲染到 <div>
元素中作为文本内容。
与使用双大括号插值语法 {{ message }}
不同,v-text
指令会替换元素的全部文本内容,而不只是插入变量的值。这可能对于某些特定的用例更加灵活。
需要注意的是,在 Vue 3 中,v-text
指令已经被废弃,推荐使用双大括号插值语法 {{ message }}
来代替。在 Vue 3 中,你可以使用 v-text
指令来设置元素的文本内容。
使用 v-text
指令的语法如下:
<div v-text="message"></div>
在上面的示例中,message
是一个 Vue 实例中的 data 属性,它将被渲染到 <div>
元素中作为文本内容。
与使用双大括号插值语法 {{ message }}
不同,v-text
指令会替换元素的全部文本内容,而不只是插入变量的值。这可能对于某些特定的用例更加灵活。
需要注意的是,在 Vue 3 中,v-text
指令已经被废弃,推荐使用双大括号插值语法 {{ message }}
来代替。
八、v-html(将数据作为 HTML 解析并渲染)
我们可以使用
v-html
指令来渲染HTML内容。v-html
指令允许我们将一个字符串作为HTML代码来动态地渲染到模板中。
使用v-html
指令的语法如下:
<div v-html="htmlContent"></div>
其中,htmlContent
是一个包含HTML代码的属性或变量。
需要注意的是,使用v-html
指令存在安全风险。因为它会将HTML代码直接渲染到模板中,所以要确保渲染的内容是可信的。如果渲染的内容来自不可信的来源,可能会导致XSS攻击。
为了增加安全性,Vue 3还引入了一个新的API createApp
来创建应用实例时可以配置compilerOptions
中的isCustomElement
属性,以防止未经验证的元素被渲染。例如:
import { createApp } from 'vue';
const app = createApp({
// ...
});
app.config.compilerOptions.isCustomElement = (tag) => tag === 'my-custom-element';
这样,只有<my-custom-element>
标签会被认为是安全的自定义元素,并进行渲染,其他未经验证的标签将被忽略。在Vue 3中,我们可以使用v-html
指令来渲染HTML内容。v-html
指令允许我们将一个字符串作为HTML代码来动态地渲染到模板中。
使用v-html
指令的语法如下:
<div v-html="htmlContent"></div>
其中,htmlContent
是一个包含HTML代码的属性或变量。
需要注意的是,使用v-html
指令存在安全风险。因为它会将HTML代码直接渲染到模板中,所以要确保渲染的内容是可信的。如果渲染的内容来自不可信的来源,可能会导致XSS攻击。
为了增加安全性,Vue 3还引入了一个新的API createApp
来创建应用实例时可以配置compilerOptions
中的isCustomElement
属性,以防止未经验证的元素被渲染。例如:
import { createApp } from 'vue';
const app = createApp({
// ...
});
app.config.compilerOptions.isCustomElement = (tag) => tag === 'my-custom-element';
这样,只有<my-custom-element>
标签会被认为是安全的自定义元素,并进行渲染,其他未经验证的标签将被忽略。
九、v-pre(将元素或组件直接渲染为静态内容,不会被当成模板编译)
在 Vue 3 中,可以使用 v-pre
指令来跳过编译过程,将元素或组件直接渲染为静态内容,不会被当成模板编译。这样可以提高性能,特别是对于静态内容较多的场景。
使用方式很简单,只需要在元素或组件上添加 v-pre
属性即可,如下所示:
<template>
<div v-pre>
这是一个静态内容,会直接输出到页面,不会被编译
</div>
</template>
在上述代码中,<div>
元素的内容会直接输出到页面,不会被编译成 Vue 的模板。这在一些不需要动态更新的内容上非常有用。
需要注意的是,v-pre
只能用在元素或组件上,不能在表达式或指令中使用。在实际开发中,应该合理使用 v-pre
,避免滥用,因为滥用 v-pre
可能会导致代码不易维护和调试。在 Vue 3 中,可以使用 v-pre
指令来跳过编译过程,将元素或组件直接渲染为静态内容,不会被当成模板编译。这样可以提高性能,特别是对于静态内容较多的场景。
使用方式很简单,只需要在元素或组件上添加 v-pre
属性即可,如下所示:
<template>
<div v-pre>
这是一个静态内容,会直接输出到页面,不会被编译
</div>
</template>
在上述代码中,<div>
元素的内容会直接输出到页面,不会被编译成 Vue 的模板。这在一些不需要动态更新的内容上非常有用。
需要注意的是,v-pre
只能用在元素或组件上,不能在表达式或指令中使用。在实际开发中,应该合理使用 v-pre
,避免滥用,因为滥用 v-pre
可能会导致代码不易维护和调试。