다이나믹 디렉티브 전달인자

[Bogyie]

kr.vuejs.org/src/v2/guide/custom-directive.md

Lines 145 to 209 in 6df59ee

	### 다이나믹 디렉티브 전달인자
	Directive arguments can be dynamic. For example, in `v-mydirective:[argument]="value"`, the `argument` can be updated based on data properties in our component instance! This makes our custom directives flexible for use throughout our application.
	Let's say you want to make a custom directive that allows you to pin elements to your page using fixed positioning. We could create a custom directive where the value updates the vertical positioning in pixels, like this:
	```html
	<div id="baseexample">
	<p>Scroll down the page</p>
	<p v-pin="200">Stick me 200px from the top of the page</p>
	</div>
	```
	```js
	Vue.directive('pin', {
	bind: function (el, binding, vnode) {
	el.style.position = 'fixed'
	el.style.top = binding.value + 'px'
	}
	})
	new Vue({
	el: '#baseexample'
	})
	```
	This would pin the element 200px from the top of the page. But what happens if we run into a scenario when we need to pin the element from the left, instead of the top? Here's where a dynamic argument that can be updated per component instance comes in very handy:
	```html
	<div id="dynamicexample">
	<h3>Scroll down inside this section ↓</h3>
	<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
	</div>
	```
	```js
	Vue.directive('pin', {
	bind: function (el, binding, vnode) {
	el.style.position = 'fixed'
	var s = (binding.arg == 'left' ? 'left' : 'top')
	el.style[s] = binding.value + 'px'
	}
	})
	new Vue({
	el: '#dynamicexample',
	data: function () {
	return {
	direction: 'left'
	}
	}
	})
	```
	Result:
	{% raw %}
	<iframe height="200" style="width: 100%;" class="demo" scrolling="no" title="Dynamic Directive Arguments" src="//codepen.io/team/Vue/embed/rgLLzb/?height=300&theme-id=32763&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
	See the Pen <a href='https://codepen.io/team/Vue/pen/rgLLzb/'>Dynamic Directive Arguments</a> by Vue
	(<a href='https://codepen.io/Vue'>@Vue</a>) on <a href='https://codepen.io'>CodePen</a>.
	</iframe>
	{% endraw %}
	Our custom directive is now flexible enough to support a few different use cases.