VueJS를 구성하는 컴포넌트, 필터, 스코프 등의 중요한 요소들 중 하나로 디렉티브(Directive)가 있습니다.내장된 디렉티브와는 별도이므로 커스텀 디렉티브라고 많이 부릅니다. 아래서는 VueJS에서 디렉티브는 무엇이고 어떤 역할을 할 수 있는지 알아보겠습니다.# VueJS에서 디렉티브, Directive디렉티브는 템플릿에 사용되는 태그에 Html 프로퍼티(property)처럼 아래와 같이 사용됩니다. <span v-addLink="webisfree.com"></span>위 코드를 보시면 span 태그에addLink라는 디렉티브가 적용되어 있습니다. 이처럼 디렉티브를 사용할때는 이름 앞에 v-를 추가하면 디렉티브로서 사용할 수 있습니다. 그렇다면 직접 만든 커스텀 디렉티브로 무엇을 할 수 있을까요?! VueJS 커스텀 디렉티브로 할 수 있는 것직접 만든 커스텀 디렉티브가 사용된 경우 해당 코드의 엘리먼트, 사용된 인자값 등등을 전달 받을 수 있습니다. 그렇기 때문에 특정 템플
2018-10-24 17:57:55VueJS에서 반복문을 사용할 수 있는 v-for디렉티브를 알아보겠습니다.v-for는 템플릿에 사용하며 여러 개의 값을 가진 데이터를 루프를 사용하여 한 번에 출력할 수 있는 유용한 방법입니다. 이때 사용 방법은 아래와 같습니다.v-for="item in Items"여기서 Items난 VueJS에 설정된 데이터 값입니다. 그렇다면 간단한 예제를 사용하여 알아봅니다.# vuejs v-for 예제보기아래는 사이트 정보를 가진 data인 변수 MyItems에서 v-for를 사용해 모든 name값을 출력해보려고합니다. 이를 위해서 아래와 같이 코드를 작성합니다.<ul> <li v-for="item in MyItems">{{ item.name }}</li></ul>MyItems이 루프를 돌면서 item으로 하나의 아이템 정보를 가져올 수 있고 item 객체의 name을 표현식을 사용하여 {{ item.name }}으로 출력하였습니다. 이때 data가 가진 값은 아래처럼 data에 설정되어
2018-10-10 16:15:21AngularJS 사용시 compile 되지 않아야 할 부분이 있을때 아래 디렉티브를 선언하여 가능합니다. ngNonBindable 예를들어 아래 코드의 {{ test }} 표현식이 존재할 경우 이를 prevent하여 코드 그대로 표현 할 수 있습니다. 이때 컴파일 되지 않고 바로 보여주게됩니다.<div ngNonBindable> {{ Text should be shown ! }}</div>만약 위 디렉티브 ngNonBindable이 없다면 당연히 해당하는 값을 angularjs에서 찾고 없으면 에러를 표현하게 됩니다.
2017-06-20 13:55:51AngularJS에서 커스텀 디렉티브 생성시 scope에 대한 의존성을 선언하지 않는 이유는?디렉티브의 경우 컨트롤러와 달리 다수의 모듈에 사용가능하기 위하여 특정 Scope에 대하여 의존성을 선언하지 않으며 필요한 Scope만 선택하거나 별도의 구분된 Scope을 생성합니다. 이런 이유로 여러개의 모듈에 동시 사용이 가능합니다.
2017-05-17 17:42:32AngularJS 디렉티브 생성시 require를 사용한 모델 가져오는 방법myApp = angular.module('app', []);myApp.directive('test', function(){ return { require: 'ngModel', link: function(scope, element, attrs, ngModel){ attrs.$observe('ngModel', function(value){ scope.$watch(value, function(){ // Code }); }); }});scope을 사용한 방법과 장단점이 있습니다. 특징으로는 반드시 require는 link를 사용하여 ngModel을 사용해야합니다.
2017-05-17 10:38:25angularjs에서 가장 많이 사용되는 디렉티브 중 하나가 바로 ng-repeat라고 할 수 있습니다. 워낙 많이 사용되기 때문에 반드시 알아야 하는 필수 디렉티브로 아래는 ng-repeat의 쓰임과 활용에 대하여 상세히 알아보려합니다.! ng-repeat의 역할ng-repeat는 연속된 여러개의 값을 가진 데이터 값을 사용하여 하나의 리스트 또는 목록으로 반환하고 보여주는 기능을 가지고 있습니다. ng-repeat는 for()문 또는 제이쿼리의 $forEach()와 비슷한 동작을 구현합니다. 그럼 아래는 예제코드입니다.예를 들어 fruit이라는 변수가 있고 이를 ng-repeat를 사용하여 연속된 과일을 목록으로 만들어 보여주려면 아래와 같이 사용할 수 있습니다.1 - banana : 100원2 - mango : 300원3 - grape : 500원위 내용은 출력 될 모습으로 상세 코드는 아래와 같습니다.<ul ng-app="app" ng-controller="AppCtrl">
2016-12-12 15:36:06AngularJS에서는 클래스명을 추가할때 가장 많이 사용되는 ngClass 디렉티브에 대하여 알아보려 합니다. ngClass를 사용하는 방법은 매우 다양합니다. 언제 ngClass를 쓸 수 있을까요?! ngClass 디렉티브를 사용하는 경우는?ngClass는 받아오는 데이터값이 다른 경우 서로 다른 class를 적용할 때 주로 사용합니다. 데이터는 scope 변수로 저장하고 html에서 이를 읽어서 각각 다른 class를 적용할 수 있는점이지요. 즉, html 내에서 유연하게 클래스를 사용하기 위해서 사용합니다. 이를 사용하여 쉽게 클래스명을 변경할 수 있으며 아래는 ngClass 디렉티브의 다양한 사용방법, 예제에 대하여 알아보도록 하겠습니다.# ngClass 디렉티브 예제보기ngClass 디렉티브를 사용하여 class명을 결정 또는 변경하기 위해서 하나의 예제 코드를 만들어 보았습니다. 우선 아래의 template 예제를 봐주세요.@ ngclass.html<span ng-cla
2016-12-04 22:20:23
