Vue指令

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Vue使用的模板语言是HTML的超集。在Vue的模板中除了使用插值({{}})之外还可以使用指令。在上一节中,我们主要学习和探讨了Vue模板相关的知识,在这一节中,我们将一起来了解Vue中的指令。在Vue中,指令基本上类似于添加到模板中的HTML属性。它们都是以v-开头,表示这是一个Vue特殊属性。Vue中的指令主要分为内嵌的指令和自定义指令。另外有一些指令还带有相应的修饰符。接下来我们主要围绕着这些点来展开,咱们先从内嵌的Vue指令开始。

Vue内嵌指令

在Vue中常见的内置嵌套指令主要有:

接下来,咱们简单的了解一下内嵌指令的使用。

v-text

Vue模板一节中,我们知道可以使用插值的语法{{}}向模板中插入字符串内容。

<!-- App.vue -->
<template>
    <h1>Vue插值语法:{{}}</h1>
    <div>{{ message }}</div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue (^_^)'
            }
        }
    }
</script>

如果我们要更新元素的textContent。除了使用Vue插值语法之外,还可以使用v-text指令。他们最终达到的效果是一样的:

<!-- App.vue -->
<h1>v-text</h1>
<div v-text="message"></div>

v-html

有些时候,我们在data中定义的字段会带有HTML的标签,面对这样的场景,如果使用{{}}插值语法或者v-text指令,都会将数据中的HTML当做字符串插入到模板中。这并不是我们期望要的结果。这个时候,使用v-html指令可以解决。v-html指令会更新元素的innerHTML。比如下面这个示例:

<!-- App.vue -->
<h1>v-html</h1>
<div>{{ rawHtml }}</div>
<div v-html="rawHtml"></div>

<script>
export default {
    name: 'app',
    data () {
        return {
            rawHtml: 'Hello, <strong>Vue (^_^) </strong>'
        }
    }
}
</script>

在使用v-html相当于在网站上动态渲染任意HTML是非常危险的,因为容易导致XSS攻击。只在可信内容上使用v-html,永不用在用户提交的内容上。另外在单文件组件里,scoped的样式不会应用在v-html内部,因为那部分HTML没有被Vue的模板编译器处理。如果想对v-html的内容设置带作用域的CSS,可以替换为CSS Modules或用一个额外的全局<style>元素手动设置样式。如果你想在scoped设置v-html内标签元素的样式,需要借助Vue的另外特性,比如 >>>/deep/ 来设置样式。比如上例中的strong样式,我们可以像下面这样来设置:

<style scoped>
    div >>> strong {
        color: red;
    }

    div /deep/ strong {
        color: green;
    }
</style>

有关于这方面更详细的介绍可以阅读早前整理的一篇博文《Vue中的作用域CSS和CSS模块的差异》。有关于v-textv-html指令更详细的介绍可以阅读《v-textv-html》一文。

v-once

我们知道{{ message }}语法可以将data中的message插入到Vue的模板(或组件)中。当数据中的message发生变更时,模板中对应的值也会发生变更,比如:

<!-- App.vue -->
<h1>v-once</h1>
<div>{{ message }}</div>
<div v-once>{{ message }}</div>
<button @click="changeMessage">修改消息</button>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue (^_^)'
            }
        },
        methods: {
            changeMessage () {
                this.message = 'Hello, 大漠 !'
            }
        }
    }
</script>

当你点击修改消息按钮时,没有使用v-once指令的{{ message }}中的message值会发生变化,反之却不会有任何更新,如下图所示:

上面的示例再次验证了,v-once指令只渲染元素和组件一次。随后的重新渲染,元素或组件及其所有子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-bind

Vue插值语法只能在HTML标签中内容工作,而HTML属性中是不能使用它。如果要动态地给HTML标签绑定属性,需要使用v-bind。比如:

<!-- App.vue -->
<a :href="url">{{ linkText }}</a>

v-bind还有一个简写的方式,使用:来替代:

<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

这两种写法是等效的。

v-bind不仅仅绑定一个物性,还可以绑定多个物特或一个组件prop到表达式。在绑定classstyle特性时,支持其它类型的值,比如数组对象。在绑定prop时,prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时,可以绑定到一个包含键值的对象。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

比如上面的示例中,v-bind中还使用了修饰符,常见的修饰符主要有:

  • .prop:被用于绑定DOM属性
  • .camel:将kebab-case特性名转换为camelCase
  • .sync:这是一个语法糖,会扩展成一个更新父组件绑定值的v-on侦听器

注意,在使用字符串模板或通过vue-loadervueify编译时,不需要使用.camel修饰符。

有关于v-bind指令更详细的介绍可以阅读《v

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-directives-and-how-to-custom-directive.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部