Vue3 | 常用Vue指令集锦 及 相关demo运用
完整原文地址见简书https://cloud.tencent.com/developer/article/1795154
本文内容提要
v-htmlv-bind插值表达式**的内容可以是js各种表达式，但不能是语句**v-oncev-on:click**指令 与**v-bind**指令 的简写**动态属性表单 事件拦截的 简写
v-html
v-html**：在指定的标签上， 通过HTML的方式展示配置的变量：**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
heheString: '<strong>hello world</strong>'
}
},
template: `<div v-html="heheString"></div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
v-bind
v-bind**：**DOM标签**的某个**属性值**要使用data中的变量值的时候使用：** 没有用v-bind的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
heheString: 'luelueluelielielie'
}
},
template: `<div title="heheString">hello world</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>图标展示的是**title**直接指定的字符串：
如果使用了**v-bind**指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
heheString: 'luelueluelielielie'
}
},
template: `<div v-bind:title="heheString">hello world</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>UI展示的就是**v-bind**指定的**数据变量**的值：
再来一例：
同样是通过**v-bind**引用data中的字段值，作为UI节点的属性值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
heheString: true
}
},
template: `<input v-bind:disabled='heheString'>`
});
const vm = app.mount('#heheApp');
</script>
</html>效果：
将字段值改为false：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
heheString: false
}
},
template: `<input v-bind:disabled='heheString'>`
});
const vm = app.mount('#heheApp');
</script>
</html>输入框编程可用状态：
插值表达式的内容可以是js各种表达式，但不能是语句
表达式是一个有值的式子，语句则不是；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
heheString: 'luelueluelielielie'
}
},
template: `<div>{{Math.max(6, 8)}}</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>效果：
v-once
修饰**template**中的UI节点，使得**节点**引用**data()**字段值的时候，
只使用一次字段的值，之后，无论**data字段**怎么被修改，
节点**都不再引用其值（去重新渲染UI）；**
！！开发中可以用于规避没必要的渲染，提高性能；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
heheString: 'luelueluelielielie'
}
},
template: `<div v-once>{{heheString}}</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>效果如下，UI引用data字段的值，但是重新赋值的时候，UI不再做其字段值对应的UI渲染：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录