showing results for - "vue directive example"
Claudia
02 Apr 2020
1/* Here we have 5 vuejs directive to use:
2v-text
3v-once
4v-html
5v-bind
6v-model
7*/
8
9// ------------ v-text ------------
10// Description: Instead of using interpolation, you can use the v-text directive. It performs the same job:
11<span v-text="name"></span>
12
13// ------------ v-once ------------
14/* Description:
15You know how {{ name }} binds to the name property of the component data.
16
17Any time name changes in your component data, Vue is going to update the value represented in the browser.
18
19Unless you use the v-once directive, which is basically like an HTML attribute:
20*/
21<span v-once>{{ name }}</span>
22
23// ------------ v-html ------------
24/* Description:
25When you use interpolation to print a data property, the HTML is escaped. This is a great way that Vue uses to automatically protect from XSS attacks.
26
27There are cases however where you want to output HTML and make the browser interpret it. You can use the v-html directive:
28*/
29<span v-html="someHtml"></span>
30
31// ------------ v-bind ------------
32/* Description:
33Interpolation only works in the tag content. You can’t use it on attributes.
34
35Attributes must use v-bind:
36*/
37
38<a v-bind:href="url">{{ linkText }}</a>
39
40// v-bind is so common that there is a shorthand syntax for it:
41
42<a v-bind:href="url">{{ linkText }}</a>
43<a :href="url">{{ linkText }}</a>
44
45// ------------ Two-way binding using v-model ------------
46/* Description:
47v-model lets us bind a form input element for example, and make it change the Vue data property when the user changes the content of the field:
48*/
49<input v-model="message" placeholder="Enter a message">
50<p>Message is: {{ message }}</p>
51
52// More example of v-model:
53<select v-model="selected">
54  <option disabled value="">Choose a fruit</option>
55  <option>Apple</option>
56  <option>Banana</option>
57  <option>Strawberry</option>
58</select>
59<span>Fruit chosen: {{ selected }}</span>
Landen
29 May 2018
1// <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
2
3Vue.directive('demo', {
4  bind: function (el, binding, vnode) {
5    var s = JSON.stringify
6    el.innerHTML =
7      'name: '       + s(binding.name) + '<br>' +
8      'value: '      + s(binding.value) + '<br>' +
9      'expression: ' + s(binding.expression) + '<br>' +
10      'argument: '   + s(binding.arg) + '<br>' +
11      'modifiers: '  + s(binding.modifiers) + '<br>' +
12      'vnode keys: ' + Object.keys(vnode).join(', ')
13  }
14})
15
16// name: "demo"
17// value: "hello!"
18// expression: "message"
19// argument: "foo"
20// modifiers: {"a":true,"b":true}
21// vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
Carolina
08 Jan 2020
1function (el, binding, vnode) {
2  vnode.context // gives you the vm
3}
queries leading to this page
vuejs directives replace hmtlwhat is directive in vuejsdirective syntax vuevue 3 create custom directivestypes of directives in vuejscustom directives in vuejshow to create vue directivevue create custom directivehow many vue directivevue js using directivesvue js directives and how to workvue directive modifiersvue 3 directivevue directives inject vue componentdirectives vue jscustom directive in vue jscustom directives vuedefine 3adirective in vuejsdirective and bind vue jsvue 3 directivesnumeraljs vuejs directivesdirective in vuejs typesvue js directivevue js directives listadd directives in vue3vue how to register a directivevue directivedirectives 3a in vuevue directive listcomponent directive vuedirectives in vue js 3vue 3 add directive vue js all directivesvue 3 directive typevue typescript directive examplehow are vue directives implemented in html 3fdirective in vueassign directives in vuedirective in vue 3for directive vuevuejs directives listhow many types of directive available in vue js 3fis directive vueuse custom directive vuewhat are directives in vuevue html directivevue3 directive directives access component instanceall vue js directivesvue directives vue 3vue directive v canwhen to use vue js directivesvue directive bindvuejs directives tutorialwhat is directives in vue js 3vue directive in componentvue js is directivevue custom directive in componentlist of vue directivesvuejs directiveshow many types of directives in vuejsvue directive meaningcustom directive vuejsv on directives vuevue3 directive access component instancecustom directive vs component vuejsvue custom directive parametershow to write vue directivevue 403 1 2 directivecomponents directives vuevue 3 custom directive in componentwhat are vue directivesvue js directives listvue js directivescan custom directives be an event vuehow to use directive in vue js 3custom directive vuehow to add directive with js vuelist of vue directives and their usesvue component directives datawhat is a vue directivehow to see directives code in vuejsvuejs for directivecreate best directives in vueunderstanding vue directiveles directive vue jsvue directive use componentdirective vue jsanoe assign directives vuevue directives listcustom directive in vuevue directive vue jsvue 3 add custom directivehow to assign directives in vuuse directive vuejs componentvue register a directive locallycreate a directive in vue jsdirectives vue 3how to register vue directive in vue jsdirectives vues listvue add directive programmaticallytogel directives in vue jsdirectives vuejscreate directive vuejsdisplay vue directivevue add directive directive vue jsvue is directivevue use directives in storedirective in vuejswhat is a directive in vuevue built in directiveslist type of directive are available in vuejs vue 3 all built in directivesvue3 directivevue vuex custom directivecustome directive vuejsdirectives in vuejsvuejs directive vuejsvue js directivesvue v directivesvuejs create directivethis in directive vuewhat are directives in vuejscomplete list of vue js directivesadd vue directivein vue js following types of directives are availablevuejs directive bindcustom directive in vuejsvue use include in a vue directivecustom directives in vuevue custom directivevuejs 2 directivedirectives in vue jshow the directives works with vuejsvue import custom directiveapply component atttrubutes wih directtive vueall vue default directivesliste des directives vuejsvue directive examplevue use the directive instead of componentvue directive on changevue register directivev on directivevue directives in componentvue component directivesvue 3 custom directivev vue directiveshow does one assign directives in vue 3fregister directive vuevue custom directive examplevue directives on vue 3is js allowed in vue directivesall vue js 3 directiveswhat is directive in vuev pin vue jswhat are directives vuejsvue use directivevue apply directive from codewhat are directives in vue jsvuejs directives explainedcustom directive access event object vuevue ts declare directivevuejs v for directiveassigning directives in vuevue register directive globallydirective and component vuevuejs properties directivesvue directive plaintextvuejs directivevue 3 individual directivesvuejs how to create your own directivedirectives used for in vuevue directivevue list 3alis directivevuejs add directive dynamicallyvue directives in vue 3vue directive access this general directives of vue jsvue directive 28 27vshow 27 2cinclude vue directivesdirective vuejshow does directives work vuedirective vue explainewhere do you put vue directivescustom directive event vuevue js directive vue 3how to use directive in vue jsvue directivesvue js directives tutorialles directives vue jswhere to add vue directivesdirective vuevuejs custom directivedirectives and binding in vuehow to add a directive in vuevue directivesgeneral directives in vuejsdirective vue 3v directives vuewhere to define custom vue directivesdiv directives vuevue 3ais directivedirectives in vueset directive vuehow does one assign directive in vueall the vue js directiveregister directive in vue jshow many directives in vuev directive vuevue js is directivevuejs v on custom directivehow many directives does vue havevuejs html directivevue create directivevue js custom directive examplevue directives in typescriptvuejs what is a directivev directives in vueall directives list used in vuejscreate new directive in vue3do all vue directives start with vdirective syntax in vueerror vue 2fcomment directivevue directives modifiersvue 2 directivesvue custom directivesadding modifiers to directives in vuevue has some built in directivesadd component with directive in vue jsdirectives in vue 3custom vue directivessimplest vue directivevue 2 x create directivedirectives vuedirectives vue registerwhat is directives in vuejsadd custom directive vuevuejs add directivevue using directrivescustom vue directivedirectives in vue jsvue functional html directivevue directive reactiveall vue directivesbind directive in vue jsvue add directivesvue get directive of elementvue directive registervue directive vue 3vue directive in jstarget directive in vue jsvue directive example