CATEGORIES
VueJS에서 반복문을 사용할 수 있는 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으로 하나의
Last Modified : 2019-11-14 11:30:38
AngularJS에서는 클래스명을 추가할때 가장 많이 사용되는 ngClass 디렉티브에 대하여 알아보려 합니다. ngClass를 사용하는 방법은 매우 다양합니다. 언제 ngClass를 쓸 수 있을까요?! ngClass 디렉티브를 사용하는 경우는?ngClass는 받아오는 데이터값이 다른 경우 서로 다른 class를 적용할 때 주로 사용합니다. 데이터는 scope 변수로 저장하고 html에서 이를 읽어서 각각 다른 class를 적용할 수 있는점이지요. 즉, html 내에서 유연하게 클래스를 사용하기 위해서 사용합니다. 이를 사용하여 쉽게 클래스명을 변경할 수 있으며 아래는 ngClass 디렉티브의 다양한 사용방법, 예제에 대하여 알아보도록 하겠습니다.# ngClass 디렉티브 예제보기ngClass 디렉티브를 사
Last Modified : 2018-08-01 10:36:20angularjs에서 가장 많이 사용되는 디렉티브 중 하나가 바로 ng-repeat라고 할 수 있습니다. 워낙 많이 사용되기 때문에 반드시 알아야 하는 필수 디렉티브로 아래는 ng-repeat의 쓰임과 활용에 대하여 상세히 알아보려합니다.! ng-repeat의 역할ng-repeat는 연속된 여러개의 값을 가진 데이터 값을 사용하여 하나의 리스트 또는 목록으로 반환하고 보여주는 기능을 가지고 있습니다. ng-repeat는 for()문 또는 제이쿼리의 $forEach()와 비슷한 동작을 구현합니다. 그럼 아래는 예제코드입니다.예를 들어 fruit이라는 변수가 있고 이를 ng-repeat를 사용하여 연속된 과일을 목록으로 만들어 보여주려면 아래와 같이 사용할 수 있습니다.1 - banana : 100원2 - ma
Last Modified : 2016-12-13 08:36:06
VueJS를 구성하는 컴포넌트, 필터, 스코프 등의 중요한 요소들 중 하나로 디렉티브(Directive)가 있습니다.내장된 디렉티브와는 별도이므로 커스텀 디렉티브라고 많이 부릅니다. 아래서는 VueJS에서 디렉티브는 무엇이고 어떤 역할을 할 수 있는지 알아보겠습니다.# VueJS에서 디렉티브, Directive디렉티브는 템플릿에 사용되는 태그에 Html 프로퍼티(property)처럼 아래와 같이 사용됩니다. <span v-addLink="webisfree.com"></span>위 코드를 보시면 span 태그에addLink라는 디렉티브가 적용되어 있습니다. 이처럼 디렉티브를 사용할때는 이름 앞에 v-를 추가하면 디렉티브로서 사용할 수 있습니다. 그렇다면 직접 만든 커스텀 디렉티브로 무엇을 할 수 있을까요?!
Last Modified : 2019-02-04 07:18:42AngularJS 디렉티브 생성시 require를 사용하여 모델 가져오는 방법입니다. 아래는 간략하게 소스 코드만 정리하여 알아봅니다. (참고로 아래는 AngularJS 1 버전의 소스 코드입니다.)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을 사용한 방법으로
Last Modified : 2020-11-26 08:50:10AngularJS 사용시 compile 되지 않아야 할 부분이 있을때 아래 디렉티브를 선언하여 가능합니다. ngNonBindable 예를들어 아래 코드의 {{ test }} 표현식이 존재할 경우 이를 prevent하여 코드 그대로 표현 할 수 있습니다. 이때 컴파일 되지 않고 바로 보여주게됩니다.<div ngNonBindable> {{ Text should be shown ! }}</div>만약 위 디렉티브 ngNonBindable이 없다면 당연히 해당하는 값을 angularjs에서 찾고 없으면 에러를 표현하게 됩니다.
Last Modified : 2017-08-11 01:40:33AngularJS에서 커스텀 디렉티브 생성시 scope에 대한 의존성을 선언하지 않는 이유는?디렉티브의 경우 컨트롤러와 달리 다수의 모듈에 사용가능하기 위하여 특정 Scope에 대하여 의존성을 선언하지 않으며 필요한 Scope만 선택하거나 별도의 구분된 Scope을 생성합니다. 이런 이유로 여러개의 모듈에 동시 사용이 가능합니다.
Last Modified : 2017-08-11 01:42:21