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>

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

1function (el, binding, vnode) {
2  vnode.context // gives you the vm
3}