• directives Type: Object Details: A hash of directives to be made available to the Vue instance. See also: Custom Directives
directives
Type: Object

Details:

A hash of directives to be made available to the Vue instance.




展开全文
• Directives v-text Expects: string Details: Updates the element’s textContent. If you need to update the part of textContent, you should use {{ Mustache }} interpolations. Example: <span v-text...
Directives
v-text
Expects: string

Details:

Updates the element’s textContent. If you need to update the part of textContent, you should use {{ Mustache }} interpolations.

Example:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>


v-html
Expects: string

Details:

Updates the element’s innerHTML. Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

In single-file components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue’s template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global <style> element with a manual scoping strategy such as BEM.

Example:

<div v-html="html"></div>


v-show
Expects: any

Usage:

Toggles the element’s display CSS property based on the truthy-ness of the expression value.

This directive triggers transitions when its condition changes.


v-if
Expects: any

Usage:

Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a <template> element, its content will be extracted as the conditional block.

This directive triggers transitions when its condition changes.

When used together with v-if, v-for has a higher priority than v-if. See the list rendering guide for details.


v-else
Does not expect expression

Restriction: previous sibling element must have v-if or v-else-if.

Usage:

Denote the “else block” for v-if or a v-if/v-else-if chain.

<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>


v-else-if
New in 2.1.0+

Expects: any

Restriction: previous sibling element must have v-if or v-else-if.

Usage:

Denote the “else if block” for v-if. Can be chained.

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


v-for
Expects: Array | Object | number | string | Iterable (since 2.6)

Usage:

Render the element or template block multiple times based on the source data. The directive’s value must use the special syntax alias in expression to provide an alias for the current element being iterated on:

<div v-for="item in items">
{{ item.text }}
</div>

Alternatively, you can also specify an alias for the index (or the key if used on an Object):

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

The default behavior of v-for will try to patch the elements in-place without moving them. To force it to reorder elements, you need to provide an ordering hint with the key special attribute:

<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>

In 2.6+, v-for can also work on values that implement the Iterable Protocol, including native Map and Set. However, it should be noted that Vue 2.x currently does not support reactivity on Map and Set values, so cannot automatically detect changes.

When used together with v-if, v-for has a higher priority than v-if. See the list rendering guide for details.

The detailed usage for v-for is explained in the guide section linked below.

List Rendering
key

v-on
Shorthand: @

Expects: Function | Inline Statement | Object

Argument: event

Modifiers:
.stop - call event.stopPropagation().
.prevent - call event.preventDefault().
.capture - add event listener in capture mode.
.self - only trigger handler if event was dispatched from this element.
.{keyCode | keyAlias} - only trigger handler on certain keys.
.native - listen for a native event on the root element of component.
.once - trigger handler at most once.
.left - (2.2.0+) only trigger handler for left button mouse events.
.right - (2.2.0+) only trigger handler for right button mouse events.
.middle - (2.2.0+) only trigger handler for middle button mouse events.
.passive - (2.3.0+) attaches a DOM event with { passive: true }.

Usage:

Attaches an event listener to the element. The event type is denoted by the argument. The expression can be a method name, an inline statement, or omitted if there are modifiers present.

When used on a normal element, it listens to native DOM events only. When used on a custom element component, it listens to custom events emitted on that child component.

When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special $event property: v-on:click="handle('ok',$event)".

Starting in 2.4.0+, v-on also supports binding to an object of event/listener pairs without an argument. Note when using the object syntax, it does not support any modifiers.

Example:

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button> <!-- shorthand --> <button @click="doThis"></button> <!-- shorthand dynamic event (2.6.0+) --> <button @[event]="doThis"></button> <!-- stop propagation --> <button @click.stop="doThis"></button> <!-- prevent default --> <button @click.prevent="doThis"></button> <!-- prevent default without expression --> <form @submit.prevent></form> <!-- chain modifiers --> <button @click.stop.prevent="doThis"></button> <!-- key modifier using keyAlias --> <input @keyup.enter="onEnter"> <!-- key modifier using keyCode --> <input @keyup.13="onEnter"> <!-- the click event will be triggered at most once --> <button v-on:click.once="doThis"></button> <!-- object syntax (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button> Listening to custom events on a child component (the handler is called when “my-event” is emitted on the child): <my-component @my-event="handleThis"></my-component> <!-- inline statement --> <my-component @my-event="handleThis(123,$event)"></my-component>

<!-- native event on component -->
<my-component @click.native="onClick"></my-component>

Event Handling
Components - Custom Events

v-bind
Shorthand: :

Expects: any (with argument) | Object (without argument)

Argument: attrOrProp (optional)

Modifiers:
.prop - Bind as a DOM property instead of an attribute (what’s the difference?). If the tag is a component then .prop will set the property on the component’s $el. .camel - (2.1.0+) transform the kebab-case attribute name into camelCase. .sync - (2.3.0+) a syntax sugar that expands into a v-on handler for updating the bound value. Usage: Dynamically bind one or more attributes, or a component prop to an expression. When used to bind the class or style attribute, it supports additional value types such as Array or Objects. See linked guide section below for more details. When used for prop binding, the prop must be properly declared in the child component. When used without an argument, can be used to bind an object containing attribute name-value pairs. Note in this mode class and style does not support Array or Objects. Example: <!-- bind an attribute --> <img v-bind:src="imageSrc"> <!-- dynamic attribute name (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- shorthand --> <img :src="imageSrc"> <!-- shorthand dynamic attribute name (2.6.0+) --> <button :[key]="value"></button> <!-- with inline string concatenation --> <img :src="'/path/to/images/' + fileName"> <!-- class binding --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style binding --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- binding an object of attributes --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- DOM attribute binding with prop modifier --> <div v-bind:text-content.prop="text"></div> <!-- prop binding. "prop" must be declared in my-component. --> <my-component :prop="someThing"></my-component> <!-- pass down parent props in common with a child component --> <child-component v-bind="$props"></child-component>

The .camel modifier allows camelizing a v-bind attribute name when using in-DOM templates, e.g. the SVG viewBox attribute:

<svg :view-box.camel="viewBox"></svg>

.camel is not needed if you are using string templates, or compiling with vue-loader/vueify.

Class and Style Bindings
Components - Props
Components - .sync Modifier

v-model
Expects: varies based on value of form inputs element or output of components

Limited to:
<input>
<select>
<textarea>
components

Modifiers:
.lazy - listen to change events instead of input
.number - cast valid input string to numbers
.trim - trim input

Usage:

Create a two-way binding on a form input element or a component. For detailed usage and other notes, see the Guide section linked below.

Form Input Bindings
Components - Form Input Components using Custom Events

v-slot
Shorthand: #

Expects: JavaScript expression that is valid in a function argument position (supports destructuring in supported environments). Optional - only needed if expecting props to be passed to the slot.

Argument: slot name (optional, defaults to default)

Limited to:
<template>
components (for a lone default slot with props)

Usage:

Denote named slots or slots that expect to receive props.

Example:

<!-- Named slots -->
<base-layout>
</template>

Default slot content

<template v-slot:footer>
Footer content
</template>
</base-layout>

<!-- Named slot that receives props -->
<infinite-scroll>
<template v-slot:item="slotProps">
<div class="item">
{{ slotProps.item.text }}
</div>
</template>
</infinite-scroll>

<!-- Default slot that receive props, with destructuring -->
<mouse-position v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</mouse-position>

For more details, see the links below.

Components - Slots
RFC-0001

v-pre
Does not expect expression

Usage:

Skip compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation.

Example:

<span v-pre>{{ this will not be compiled }}</span>

v-cloak
Does not expect expression

Usage:

This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

Example:

[v-cloak] {
display: none;
}

<div v-cloak>
{{ message }}
</div>

The <div> will not be visible until the compilation is done.

v-once
Does not expect expression

Details:

Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.

<!-- single element -->
<span v-once>This will never change: {{msg}}</span>
<!-- the element have children -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- component -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for directive -->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>

Data Binding Syntax - interpolations
Components - Cheap Static Components with v-once



展开全文
• <div><p>I have created a simple plugin system which allows the creation of local reST directives without having to edit anything in docutils. I have created an audio and video directive as well as ...
• <p>If I have multiple directives in the config file, does packager treat those individually or collectively by collapsing those that are the same? For instance, if I have a cache directive in the dash...
• <div><p>I need a way to declare custom directives. (fields: ...) (fields: ...) <p>for reference this is how some of graphql-python's directives are declared ...
• <div><p>This is a major refactoring for the directives. - The directives are now configured with two attributes: <code>map</code> and <code>options</code>. For example: <pre><code> <div ga-...
• <div><h2>Explanation <p>Convert directives in extensions directory to component directives</p><p>该提问来源于开源项目：oppia/oppia</p></div>
• <div><p>Refactors all those pesky #if to simplify ...<p>Theres a section in runtime I left untouched as it has many embbded directives.</p><p>该提问来源于开源项目：pythonnet/pythonnet</p></div>
• <p>So that PR should not break any existing code because it does not change the existing syntax and utilizes comments for directives.</p><p>该提问来源于开源项目：robfig/config</p></div>
• <div><p>Is there by any chance documentation, a step by step guide on how one goes about writing custom directives. I'm looking to attempt to add on ListGraphType as a start. <p>Any help greatly ...
• <div><p>This introduces directives, name courtesy of , which provides a flexible way to specify Makeflow specific information and parse out more tokens for a given type of directive. In this pull ...
• directives: [CORE_DIRECTIVES, CollapseDirective], viewProviders:[BS_VIEW_PROVIDERS] ... }) </code></pre> <p>Use: copy ./node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js to ./wwwroot/js/ng2-...
• <p>directives on subscription (and perhaps on other elements) are not called if not provided via query: <p>on examples/chat the query <pre><code>subscription (username:"tester") { ...
• m not sure if I use directives correctly, but it doesn't work (at least it looks like). <pre><code> query directivequery ($withTypeB : Boolean!) { TypeA { ...fields TypeB (if:$withTypeB) { ...
• <div><h2>Explanation <p>Migrate directives in components folder to component directives.</p><p>该提问来源于开源项目：oppia/oppia</p></div>
• 7.10 CFI directives 7.10.1 .cfi_sections section_list .cfi_sections may be used to specify whether CFI directives should emit .eh_frame section and/or .debug_frame section. If section_list is ....
7.10 CFI directives

7.10.1 .cfi_sections section_list

.cfi_sections may be used to specify whether CFI directives should emit .eh_frame section and/or .debug_frame section. If section_list is .eh_frame, .eh_frame is emitted, if section_list is .debug_frame, .debug_frame is emitted. To emit both use .eh_frame, .debug_frame. The default if this directive is not used is .cfi_sections .eh_frame.

On targets that support compact unwinding tables these can be generated by specifying .eh_frame_entry instead of .eh_frame.

Some targets may support an additional name, such as .c6xabi.exidx which is used by the target.

The .cfi_sections directive can be repeated, with the same or different arguments, provided that CFI generation has not yet started. Once CFI generation has started however the section list is fixed and any attempts to redefine it will result in an error.

7.10.2 .cfi_startproc [simple]

.cfi_startproc is used at the beginning of each function that should have an entry in .eh_frame. It initializes some internal data structures. Don’t forget to close the function by .cfi_endproc.

Unless .cfi_startproc is used along with parameter simple it also emits some architecture dependent initial CFI instructions.

7.10.3 .cfi_endproc

.cfi_endproc is used at the end of a function where it closes its unwind entry previously opened by .cfi_startproc, and emits it to .eh_frame.

7.10.4 .cfi_personality encoding [, exp]

.cfi_personality defines personality routine and its encoding. encoding must be a constant determining how the personality should be encoded. If it is 255 (DW_EH_PE_omit), second argument is not present, otherwise second argument should be a constant or a symbol name. When using indirect encodings, the symbol provided should be the location where personality can be loaded from, not the personality routine itself. The default after .cfi_startproc is .cfi_personality 0xff, no personality routine.

7.10.5 .cfi_personality_id id

cfi_personality_id defines a personality routine by its index as defined in a compact unwinding format. Only valid when generating compact EH frames (i.e. with .cfi_sections eh_frame_entry.

7.10.6 .cfi_fde_data [opcode1 [, …]]

cfi_fde_data is used to describe the compact unwind opcodes to be used for the current function. These are emitted inline in the .eh_frame_entry section if small enough and there is no LSDA, or in the .gnu.extab section otherwise. Only valid when generating compact EH frames (i.e. with .cfi_sections eh_frame_entry.

7.10.7 .cfi_lsda encoding [, exp]

.cfi_lsda defines LSDA and its encoding. encoding must be a constant determining how the LSDA should be encoded. If it is 255 (DW_EH_PE_omit), the second argument is not present, otherwise the second argument should be a constant or a symbol name. The default after .cfi_startproc is .cfi_lsda 0xff, meaning that no LSDA is present.

7.10.8 .cfi_inline_lsda [align]

.cfi_inline_lsda marks the start of a LSDA data section and switches to the corresponding .gnu.extab section. Must be preceded by a CFI block containing a .cfi_lsda directive. Only valid when generating compact EH frames (i.e. with .cfi_sections eh_frame_entry.

The table header and unwinding opcodes will be generated at this point, so that they are immediately followed by the LSDA data. The symbol referenced by the .cfi_lsda directive should still be defined in case a fallback FDE based encoding is used. The LSDA data is terminated by a section directive.

The optional align argument specifies the alignment required. The alignment is specified as a power of two, as with the .p2align directive.

7.10.9 .cfi_def_cfa register, offset

.cfi_def_cfa defines a rule for computing CFA as: take address from register and add offset to it.

7.10.10 .cfi_def_cfa_register register

.cfi_def_cfa_register modifies a rule for computing CFA. From now on register will be used instead of the old one. Offset remains the same.

7.10.11 .cfi_def_cfa_offset offset

.cfi_def_cfa_offset modifies a rule for computing CFA. Register remains the same, but offset is new. Note that it is the absolute offset that will be added to a defined register to compute CFA address.

7.10.12 .cfi_adjust_cfa_offset offset

Same as .cfi_def_cfa_offset but offset is a relative value that is added/subtracted from the previous offset.

7.10.13 .cfi_offset register, offset

Previous value of register is saved at offset offset from CFA.

7.10.14 .cfi_val_offset register, offset

Previous value of register is CFA + offset.

7.10.15 .cfi_rel_offset register, offset

Previous value of register is saved at offset offset from the current CFA register. This is transformed to .cfi_offset using the known displacement of the CFA register from the CFA. This is often easier to use, because the number will match the code it’s annotating.

7.10.16 .cfi_register register1, register2

Previous value of register1 is saved in register register2.

7.10.17 .cfi_restore register

.cfi_restore says that the rule for register is now the same as it was at the beginning of the function, after all initial instruction added by .cfi_startproc were executed.

7.10.18 .cfi_undefined register

From now on the previous value of register can’t be restored anymore.

7.10.19 .cfi_same_value register

Current value of register is the same like in the previous frame, i.e. no restoration needed.

7.10.20 .cfi_remember_state and .cfi_restore_state

.cfi_remember_state pushes the set of rules for every register onto an implicit stack, while .cfi_restore_state pops them off the stack and places them in the current row. This is useful for situations where you have multiple .cfi_* directives that need to be undone due to the control flow of the program. For example, we could have something like this (assuming the CFA is the value of rbp):

je label
popq %rbx
.cfi_restore %rbx
popq %r12
.cfi_restore %r12
popq %rbp
.cfi_restore %rbp
.cfi_def_cfa %rsp, 8
ret
label:
/* Do something else */

Here, we want the .cfi directives to affect only the rows corresponding to the instructions before label. This means we’d have to add multiple .cfi directives after label to recreate the original save locations of the registers, as well as setting the CFA back to the value of rbp. This would be clumsy, and result in a larger binary size. Instead, we can write:

je label
popq %rbx
.cfi_remember_state
.cfi_restore %rbx
popq %r12
.cfi_restore %r12
popq %rbp
.cfi_restore %rbp
.cfi_def_cfa %rsp, 8
ret
label:
.cfi_restore_state
/* Do something else */

That way, the rules for the instructions after label will be the same as before the first .cfi_restore without having to use multiple .cfi directives.

7.10.21 .cfi_return_column register

Change return column register, i.e. the return address is either directly in register or can be accessed by rules for register.

7.10.22 .cfi_signal_frame

Mark current function as signal trampoline.

7.10.23 .cfi_window_save

SPARC register window has been saved.

7.10.24 .cfi_escape expression[, …]

Allows the user to add arbitrary bytes to the unwind info. One might use this to add OS-specific CFI opcodes, or generic CFI opcodes that GAS does not yet support.

7.10.25 .cfi_val_encoded_addr register, encoding, label

The current value of register is label. The value of label will be encoded in the output file according to encoding; see the description of .cfi_personality for details on this encoding.

The usefulness of equating a register to a fixed label is probably limited to the return address register. Here, it can be useful to mark a code segment that has only one return address which is reached by a direct branch and no copy of the return address exists in memory or another register.

展开全文
• <p>.htaccess being processed top-to-bottom, when the WordPress directives are placed earlier than the H5BP directives it means the H5BP directives are processed too late i.e. after WordPress has ...
• m currently working on an implementation of Apollo Federation for <code>graphql-ruby</code> and part of that specification includes supporting schema directives: <pre><code>graphql extend type Product...
• <div><p>Currently both SA1200 and <code>UsingCodeFixProvider</code> ignore extern alias directives. I propose that these directives be treated as using directives for the purposes of both reporting ...
• <div><p>The application still working but i need to comment out the directives to be able to "npm start" and then redo the directive. This error did not show on RC5 <p>error TS2345: Argument ...
• directives. They should usually just be sub-states. If you create directives that are specific to your app's business logic, and aren't focused on purely UI visual implementation (regardless ...
• ## vue中directives的用法

万次阅读 多人点赞 2018-06-26 18:18:04
vue中directives的用法 关于 vue 中 directives 的用法问题，详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用，directives做权限按钮的功能 1. directives 怎么用 directives 在生命...
Vue中directives的用法
关于 vue 中 directives 的用法问题，详细可以参考vue官方对directives的解释
当前文章主要讲述directives怎么用，directives做权限按钮的功能
###1. directives 怎么用###
不错的示例，可以参考下，点击访问
directives 在生命周期内用

export default {
data() {
return {
};
},
directives:{
'local-test':function(el,binding,vnode){
/** el可以获取当前dom节点，并且进行编译，也可以操作事件 **/
/** binding指的是一个对象，一般不用 **/
/** vnode 是 Vue 编译生成的虚拟节点 **/
el.style.border="1px solid red";  //操作style所有样式
console.log(el.value);  //获取v-model的值
console.log(el.dataset.name) //data-name绑定的值，需要el.dataset来获取
console.log(vnode.context.$route); //获取当前路由信息 } }, components:{ }, filters:{ }, watch:{ } }  ###2. directives 做权限按钮的功能### directives 在全局main.js中注册 路由配置： path: '/permission', component: Layout, name: '权限测试', meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限 children: [ { path: 'supper', component: _import('system/supper'), name: '权限测试页', meta: { btnPermissions: ['admin','supper'] } //页面需要的权限 }, { path: 'normal', component: _import('system/normal'), name: '权限测试页', meta: { btnPermissions: ['admin'] } //页面需要的权限 } ]  自定义指令： import Vue from 'vue' /**权限指令**/ const has = Vue.directive('has', { bind: function (el, binding, vnode) { // 获取按钮权限 let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
if (!Vue.prototype.$_has(btnPermissions)) { el.parentNode.removeChild(el); } } }); // 权限检查方法 Vue.prototype.$_has = function (value) {
let isExist = false;
let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
return false;
}
if (value.indexOf(btnPermissionsStr) > -1) {
isExist = true;
}
return isExist;
};
export {has}

/*然后在main.js文件引入文件*/
import has from './public/js/btnPermissions.js';

/*页面中按钮只需加v-has即可*/
<el-button @click='editClick' type="primary" v-has>编辑</el-button>




展开全文
• <div><p>Creates a collection of blade directives for available html, and form methods.</p><p>该提问来源于开源项目：LaravelCollective/html</p></div>
• <div><p>Is there a roadmap/timeplan for the rtlcss-directives?</p><p>该提问来源于开源项目：vkalinichev/postcss-rtl</p></div>
• 原文：... 定制Directives 本文解释了怎么在你的Angular JS中实现自己的directives。 1)、Directives是什么？  大致上，directives标志于DOM元素(例如属性，元素名，注释或CSS类)，会让 A
• <p>Migrate directives and controllers to component directives for following pages of pages directory: <ul><li>Admin</li><li>Collection editor</li><li>Collection player</li><li>Library</li><li>...
• <div><p>https://trello.com/c/RF3kubpI/428-remove-unnecessary-directives-from-frontend-vhost-definitions-enterprise</p><p>该提问来源于开源项目：openshift/origin-server</p></div>

...