VueJS-지시어

지시문은 VueJS가 특정 방식으로 작업을 수행하도록 지시하는 것입니다. 우리는 이미 v-if, v-show, v-else, v-for, v-bind, v-model, v-on 등과 같은 지시문을 보았습니다.

이 장에서는 사용자 지정 지시문을 살펴 보겠습니다. 구성 요소에 대해 수행 한 것과 유사한 전역 지시문을 만들 것입니다.

통사론

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

Vue.directive를 사용하여 지시문을 생성해야합니다. 위에 표시된 지시문의 이름을 사용합니다. 지시문의 세부 사항을 보여주는 예를 고려해 보겠습니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle>VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               e1.style.color = "red";
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

이 예에서는 사용자 지정 지시문을 만들었습니다. changestyle 다음 코드에서 볼 수 있습니다.

Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      e1.style.color = "red";
      e1.style.fontSize = "30px";
   }
});

div에 다음과 같은 변경 스타일을 할당합니다.

<div v-changestyle>VueJS Directive</div>

브라우저에서 보면 VueJs Directive 텍스트가 빨간색으로 표시되고 글꼴 크기가 30px로 증가합니다.

산출

우리는 지시문의 일부인 bind 메소드를 사용했습니다. 세 가지 인수가 필요합니다.e1, 사용자 지정 지시문을 적용해야하는 요소입니다. 바인딩은 사용자 지정 지시문에 전달 된 인수와 같습니다. 예를 들어 v-changestyle =”{color : 'green'}”, 여기서 녹색은 바인딩 인수에서 읽히고 vnode는 요소, 즉 nodename입니다.

다음 예제에서 우리는 모든 주장을 위로하고 각각의 세부 사항을 보여줍니다.

다음은 사용자 지정 지시문에 값이 전달 된 예입니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle = "{color:'green'}">VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               console.log(binding.value.color);
               console.log(vnode);
               e1.style.color=binding.value.color;
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

산출

텍스트 색상이 녹색으로 변경됩니다. 값은 다음 코드를 사용하여 전달됩니다.

<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      console.log(binding.value.color);
      console.log(vnode);
      e1.style.color=binding.value.color;
      e1.style.fontSize = "30px";
   }
});

필터

VueJS는 텍스트 형식화에 도움이되는 필터를 지원합니다. v-bind 및 보간 ({{}})과 함께 사용됩니다. 필터 용 JavaScript 표현식 끝에 파이프 기호가 필요합니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input  v-model = "name" placeholder = "Enter Name" /><br/>
         <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name : ""
            },
            filters : {
               countletters : function(value) {
                  return value.length;
               }
            }
         });
      </script>
   </body>
</html>

위의 예에서는 간단한 필터 countletters를 만들었습니다. Countletters 필터는 텍스트 상자에 입력 된 문자 수를 계산합니다. 필터를 사용하려면 다음 코드에서 filter 속성을 사용하고 사용되는 필터를 정의해야합니다.

filters : {
   countletters : function(value) {
      return value.length;
   }
}

우리는 방법을 정의하고 있습니다 countletters 입력 된 문자열의 길이를 반환합니다.

디스플레이에서 필터를 사용하기 위해 파이프 연산자와 필터 이름을 사용했습니다. countletters.

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>

다음은 브라우저의 표시입니다.

다음 코드를 사용하여 필터에 인수를 전달할 수도 있습니다.

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>

자, countletters 세 개의 매개 변수가 있습니다. message, a1, and a2.

다음 코드를 사용하여 보간에 여러 필터를 전달할 수도 있습니다.

<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>

필터 속성에서 countlettersAcountlettersB 두 가지 방법과 countlettersA 세부 사항을 전달합니다 countlettersB.