더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 7개의 일치하는 문서를 찾았습니다.
vuejs[VueJS] 커스텀 디렉티브 v-visible 만들기. visibility
VueJS를 사용한다면 v-if와 v-show를 많이 사용합니다. 이 둘을 사용하면서 왜 v-visible은 없을까? visibility: hidden을 사용하면 참 좋을텐데... 라는 생각을 할 수 있죠. 그래서 아래서는 v-visible 커스텀 디렉티브를 만들어보려고 합니다. 어떻게하면 커스텀 디렉티브를 만들 수 있는지 알아보세요.먼저 v-visible이 원하는 동작은 아래와 같습니다.v-if 또는 v-show 처럼 엘리먼트가 보이지 않을 것style의 visibility: hidden을 적용하여 영역은 가지되 보이지만 않도록 할 것directive로 만들어 쉽고...
Last Modified : 2022-11-13 08:57:00
Created : 2022-11-12 00:04:00
vuejs[VueJS] vue-for 반복문 알아보기
VueJS에서 반복문을 사용할 수 있는 v-for디렉티브를 알아보겠습니다.v-for는 템플릿에 사용하며 여러 개의 값을 가진 데이터를 루프를 사용하여 한 번에 출력할 수 있는 유용한 방법입니다. 이때 사용 방법은 아래와 같습니다.v-for="item in Items"여기서 Items난 VueJS에 설정된 데이터 값입니다. 그렇다면 간단한 예제를 사용하여 알아봅니다.# vuejs v-for 예제보기아래는 사이트 정보를 가진 data인 변수 MyItems에서 v-for를 사용해 모든 name값을 출력해보려고합니다. 이를 위해서 아래와 같이 코드를 작성합니다.<ul&...
Last Modified : 2019-11-14 11:30:38
Created : 2018-10-10 16:15:21- angularjs
angularjs에서 ngNonBindable 디렉티브를 사용한 컴파일 피하기
AngularJS 사용시 compile 되지 않아야 할 부분이 있을때 아래 디렉티브를 선언하여 가능합니다. ngNonBindable 예를들어 아래 코드의 {{ test }} 표현식이 존재할 경우 이를 prevent하여 코드 그대로 표현 할 수 있습니다. 이때 컴파일 되지 않고 바로 보여주게됩니다.<div ngNonBindable> {{ Text should be shown ! }}</div>만약 위 디렉티브 ngNonBindable이 없다면 당연히 해당하는 값을 angularjs에서 찾고 없으면 에러를 표...
Last Modified : 2017-08-11 01:40:33
Created : 2017-06-20 13:55:51 - angularjs
AngularJS에서 커스텀 디렉티브 생성시 scope에 대한 의존성을 선언하지 않는 이유
AngularJS에서 커스텀 디렉티브 생성시 scope에 대한 의존성을 선언하지 않는 이유는?디렉티브의 경우 컨트롤러와 달리 다수의 모듈에 사용가능하기 위하여 특정 Scope에 대하여 의존성을 선언하지 않으며 필요한 Scope만 선택하거나 별도의 구분된 Scope을 생성합니다. 이런 이유로 여러개의 모듈에 동시 사용이 가능합니다....
Last Modified : 2017-08-11 01:42:21
Created : 2017-05-17 17:42:32 - angularjs
AngularJS 디렉티브 생성시 require를 사용한 모델 가져오는 방법
AngularJS 디렉티브 생성시 require를 사용하여 모델 가져오는 방법입니다. 아래는 간략하게 소스 코드만 정리하여 알아봅니다. (참고로 아래는 AngularJS 1 버전의 소스 코드입니다.)myApp = angular.module('app', []);myApp.directive('test', function(){ return { require: 'ngModel', link: function(scope, element, attrs, ngModel){ attrs.$observe('n...
Last Modified : 2020-11-26 08:50:10
Created : 2017-05-17 10:38:25 - js
[angularjs] ngRepeat 디렉티브 배우기
angularjs에서 가장 많이 사용되는 디렉티브 중 하나가 바로 ng-repeat라고 할 수 있습니다. 워낙 많이 사용되기 때문에 반드시 알아야 하는 필수 디렉티브로 아래는 ng-repeat의 쓰임과 활용에 대하여 상세히 알아보려합니다.! ng-repeat의 역할ng-repeat는 연속된 여러개의 값을 가진 데이터 값을 사용하여 하나의 리스트 또는 목록으로 반환하고 보여주는 기능을 가지고 있습니다. ng-repeat는 for()문 또는 제이쿼리의 $forEach()와 비슷한 동작을 구현합니다. 그럼 아래는 예제코드입니다.예를 들어 fruit이라는 변수가 있고 이를 ...
Last Modified : 2016-12-13 08:36:06
Created : 2016-12-12 15:36:06 
angularjsng-class 속성 사용하기 ngClass 디렉티브 사용방법
AngularJS에서는 클래스명을 추가할때 가장 많이 사용되는 ngClass 디렉티브에 대하여 알아보려 합니다. ngClass를 사용하는 방법은 매우 다양합니다. 언제 ngClass를 쓸 수 있을까요?! ngClass 디렉티브를 사용하는 경우는?ngClass는 받아오는 데이터값이 다른 경우 서로 다른 class를 적용할 때 주로 사용합니다. 데이터는 scope 변수로 저장하고 html에서 이를 읽어서 각각 다른 class를 적용할 수 있는점이지요. 즉, html 내에서 유연하게 클래스를 사용하기 위해서 사용합니다. 이를 사용하여 쉽게 클래스명을 변경할 수 있...
Last Modified : 2018-08-01 10:36:20
Created : 2016-12-04 22:20:23