Vue3 | 常用Vue指令集锦及相关demo运用

最新推荐文章于 2024-06-28 17:29:09 发布

凌川江雪

最新推荐文章于 2024-06-28 17:29:09 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/aaLiweipeng/article/details/113799836

版权

完整原文地址见简书https://www.jianshu.com/p/7ae1901d79a4

本文内容提要

v-html
v-bind
插值表达式的内容可以是js各种表达式，但不能是语句
v-once
v-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渲染：

凌川江雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3 | 常用Vue指令集锦及相关demo运用

完整原文地址见简书https://www.jianshu.com/p/7ae1901d79a4本文内容提要v-htmlv-bind插值表达式的内容可以是js各种表达式，但不能是语句v-oncev-on:click指令与 v-bind指令的简写动态属性表单事件拦截的简写v-htmlv-html：在指定的标签上，通过HTML的方式展示配置的变量：&lt...
复制链接

扫一扫