πŸ“š
TIL
  • README
  • Git
    • Basic
    • Remote Repository
    • Log & Diff
    • Rebase&Cherri-Pick
    • git-flow
  • DevOps
    • Monolithic vs MSA
    • Jenkins μ‹œμž‘ν•˜κΈ°
    • Airflow μ‹œμž‘ν•˜κΈ°
    • Airflow μ‹œμž‘ν•˜κΈ°
    • Build Tools
      • maven
  • 개발 방법둠
    • TDD
  • Spring
    • IoC
    • Is Spring Bean Thread-Safe?
    • Spring Singleton
    • Component Scan
    • Spring Annotation
    • 의쑴 관계 μ£Όμž…(DI)
    • Lombok ν™œμš©ν•˜κΈ°
    • Bean 생λͺ…주기와 콜백
    • Bean Scope
    • AOP(1) - AOPλž€
    • AOP(2) - Aop Proxy
    • AOP(3) - Dynamic Proxy
    • AOP(4) - AspectJ
    • POJO
    • Spring μ„œλΉ„μŠ€ ꡬ쑰
    • Transaction
    • JPAλž€?
    • JPA Entity
    • Spring Data JPA
    • Spring Data Specification
    • Model Mapping
    • Cache
    • restTemplate
    • YAML 파일 μ„€μ •
    • Spring Boot
      • H2 DB μ„€μ •
      • 닀쀑 λ°μ΄ν„°λ² μ΄μŠ€ μ„€μ •
      • Mybatis μ—°λ™ν•˜κΈ°
    • Spring Batch
      • Batch μ‹œμž‘ν•΄λ³΄κΈ°
      • Batch Job Flow
      • Job
      • Step
      • Batch Scope & Job Parameter
      • JobRepository와 λ©”νƒ€ν…Œμ΄λΈ”
      • Chunk μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°
      • ItemReader
      • ItemProcessor
      • ItemWriter
      • Batch Schedular
      • Job별 Beanλ“±λ‘ν•˜κΈ°
      • Batch κ΅¬ν˜„μ‹œ λ°œμƒν•œ 였λ₯˜ 정리
      • Spring Batch Scaling
        • Multithread Jobκ΅¬ν˜„μ‹œ μ΄μŠˆμ‚¬ν•­
    • Spring test
      • Junit5
        • ν…ŒμŠ€νŠΈ 이름 ν‘œκΈ°
        • ν…ŒμŠ€νŠΈ κ·Έλ£Ή μ‚¬μ΄μ˜ 관계
        • νƒœκ·Έμ™€ 필터링
        • 동적 ν…ŒμŠ€νŠΈ
        • ν…ŒμŠ€νŠΈ LifeCycle
        • ν…ŒμŠ€νŠΈ λ©”μ„œλ“œ
        • ν…ŒμŠ€νŠΈ μˆœμ„œ
        • AssertJ
        • ν…ŒμŠ€νŠΈ 병렬 μ‹€ν–‰
        • AssertJ
        • Mock
      • Spring Boot Test DB 뢄리
      • Spring Batch Test
  • Web Application
    • Web Server & WAS
    • κ΄€λ ¨ κ°œλ… - HTTP API, HTML, CSR, SSR
    • Servlet
    • JSP
    • Cookie And Session
    • μ˜ˆμ™ΈνŽ˜μ΄μ§€
    • Java Bean
    • JDBC
    • Connection Pool
    • 파일 μ—…λ‘œλ“œ
    • Expression Language
    • JSTL
    • FrontControllerνŒ¨ν„΄ Command νŒ¨ν„΄
    • Forwarding
    • MVC
    • νšŒμ›κ°€μž…μ˜ˆμ œ
    • μ°Έκ³ 
      • κ°œλ°œν™˜κ²½μ„€μ •
  • Java+
    • SOAP/WSDL vs REST
    • WSDL을 JAVA둜 λ³€ν™˜ν•˜κΈ°
    • SOAP 톡신 OPEN API둜 κ°œλ°œν•΄λ³΄κΈ°
  • Java
    • Basic
      • λ³€μˆ˜μ™€ νƒ€μž…
      • μ—°μ‚°μž
      • 쑰건문과 반볡문
      • μ°Έμ‘° νƒ€μž…
      • 클래슀
      • 상속(Inheritance)
      • μΈν„°νŽ˜μ΄μŠ€(Interface)
      • 쀑첩 ν΄λž˜μŠ€μ™€ 쀑첩 μΈν„°νŽ˜μ΄μŠ€
      • μ˜ˆμ™Έ 처리
      • API - Object, System, Class, Math, Wrapper
      • API - String, StringBuffer, StringBuilder
      • Thread
      • Generic
      • Lambda
      • Collection - List, Set
      • Collection - Map
      • Collection - Tree
      • Collection - Stack, Queue
      • Stream
      • Reflection
      • μ •κ·œν‘œν˜„μ‹
      • GUI
      • UML
      • Serializable
    • Advanced
      • OutOfMemoryError
      • AutoValue
      • meta-annotation
        • @Retention
        • @Target
        • @Repeatable
    • Effective Java 3/E
      • ITEM 1: Static Factory Method(정적 λ©”μ†Œλ“œ)
      • ITEM 2: Builder Pattern
      • ITEM 3: Singleton
      • ITEM 4: Private Constructor
      • ITEM 5: Dependency Injection
      • ITEM 6: Avoid Unnecessary Object
      • ITEM 7: Eliminate Object Reference
      • ITEM 8: Avoid finalizer and cleaner
      • ITEM 9: try-with-resources
      • ITEM 10: The gerneral contract when overriding equlas
      • ITEM 11: Overriding hashCode
      • ITEM 12: overriding toString
      • ITEM 13: overriding clone judiciously
      • ITEM 14: Consider implementing comparable
      • ITEM 15: ν΄λž˜μŠ€μ™€ λ©€λ²„μ˜ 접근을 μ΅œμ†Œν™”ν•΄λΌ
      • ITEM 16: Use Accessor methods
      • ITEM 17: λ³€κ²½ κ°€λŠ₯성을 μ΅œμ†Œν™”ν•΄λΌ(λΆˆλ³€ 클래슀)
      • ITEM 18: 상속보단 μ»΄ν¬μ§€μ…˜μ„ μ‚¬μš©ν•΄λΌ
      • ITEM 19: 상속을 κ³ λ €ν•΄ μ„€κ³„ν•˜κ³  λ¬Έμ„œν™”ν•΄λΌ
      • ITEM 20: 좔상 ν΄λž˜μŠ€λ³΄λ‹€ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μš°μ„ ν•˜λΌ
      • ITEM 21: μΈν„°νŽ˜μ΄μŠ€λŠ” κ΅¬ν˜„ν•˜λŠ” μͺ½μ„ 생각해 섀계해라.
      • ITEM 22: μΈν„°νŽ˜μ΄μŠ€λŠ” νƒ€μž…μ„ μ •μ˜ν•˜λŠ” μš©λ„λ‘œλ§Œ μ‚¬μš©ν•΄λΌ
      • ITEM 23: νƒœκ·Έ 달린 ν΄λž˜μŠ€λ³΄λ‹€ 클래슀 계측ꡬ쑰λ₯Ό ν™œμš©ν•΄λΌ
      • ITEM 24: 멀버 ν΄λž˜μŠ€λŠ” λ˜λ„λ‘ static으둜 κ΅¬ν˜„ν•΄λΌ
      • ITEM 25: ν†±λ ˆλ²¨ ν΄λž˜μŠ€λŠ” ν•œ νŒŒμΌμ— ν•˜λ‚˜λ§Œ 생성해라.
      • ITEM 26: Raw type은 μ‚¬μš©ν•˜μ§€ 마라
      • ITEM 27: 비검사 κ²½κ³ λ₯Ό μ œκ±°ν•΄λΌ
      • ITEM 28: λ°°μ—΄λ³΄λ‹€λŠ” 리슀트λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 29: 이왕이면 μ œλ„€λ¦­ νƒ€μž…μœΌλ‘œ λ§Œλ“€μ–΄λΌ
      • ITEM 30: 이왕이면 μ œλ„€λ¦­ λ©”μ„œλ“œλ‘œ λ§Œλ“€μ–΄λΌ
      • ITEM 31 : ν•œμ •μ  μ™€μΌλ“œμΉ΄λ“œλ₯Ό μ‚¬μš©ν•΄ API μœ μ—°μ„±μ„ 높여라
      • ITEM 32: μ œλ„€λ¦­κ³Ό κ°€λ³€μΈμˆ˜λ₯Ό ν•¨κ»˜ μ“Έ λ•ŒλŠ” 신쀑해라
      • ITEM 33: νƒ€μž… μ•ˆμ „ 이쒅 μ»¨ν…Œμ΄λ„ˆλ₯Ό 고렀해라
      • ITEM 34: int μƒμˆ˜ λŒ€μ‹  μ—΄κ±° νƒ€μž…μ„ μ‚¬μš©ν•΄λΌ
      • ITEM 35: ordinal λ©”μ„œλ“œ λŒ€μ‹  μΈμŠ€ν„΄μŠ€ ν•„λ“œλ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 36: λΉ„νŠΈ ν•„λ“œ λŒ€μ‹  EnumSet을 μ‚¬μš©ν•΄λΌ
      • ITEM 37: ordinal 인덱싱 λŒ€μ‹  EnumMap을 μ‚¬μš©ν•΄λΌ
      • TEM 38 : ν™•μž₯ν•  수 μžˆλŠ” μ—΄κ±°νƒ€μž…μ΄ ν•„μš”ν•˜λ©΄ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 39: λͺ…λͺ… νŒ¨ν„΄λ³΄λ‹€ μ• λ„ˆν…Œμ΄μ…˜μ„ μ‚¬μš©ν•΄λΌ
      • ITEM 40: @Override μ–΄λ…Έν…Œμ΄μ…˜μ„ μΌκ΄€λ˜κ²Œ μ‚¬μš©ν•΄λΌ
      • ITEM 41: μ •μ˜ν•˜λ €λŠ” 것이 νƒ€μž…μ΄λΌλ©΄ 마컀 μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 42: 읡λͺ… ν΄λž˜μŠ€λ³΄λ‹€λŠ” λžŒλ‹€λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 43: λžŒλ‹€λ³΄λ‹€λŠ” λ©”μ„œλ“œ μ°Έμ‘°λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 44: ν‘œμ€€ ν•¨μˆ˜ν˜• μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 45: μŠ€νŠΈλ¦Όμ€ μ£Όμ˜ν•΄μ„œ μ‚¬μš©ν•΄λΌ
      • ITEM 46: μŠ€νŠΈλ¦Όμ—μ„œ λΆ€μž‘μš© μ—†λŠ” ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 47: λ°˜ν™˜ νƒ€μž…μœΌλ‘œλŠ” μŠ€νŠΈλ¦Όλ³΄λ‹€ μ»¬λ ‰μ…˜μ΄ λ‚«λ‹€.
      • ITEM 48: 슀트림 λ³‘λ ¬ν™”λŠ” μ£Όμ˜ν•΄μ„œ μ‚¬μš©ν•΄λΌ
      • ITEM 49: λ§€κ°œλ³€μˆ˜κ°€ μœ νš¨ν•œμ§€ 검사해라
      • ITEM 50: μ μ‹œμ— 방어적 볡사본을 λ§Œλ“€μ–΄λΌ
      • ITEM 51: λ©”μ„œλ“œ μ‹œκ·Έλ‹ˆμ²˜λ₯Ό μ‹ μ€‘νžˆ 섀계해라
      • ITEM 52: λ‹€μ€‘μ •μ˜λŠ” μ‹ μ€‘νžˆ μ‚¬μš©ν•΄λΌ
      • ITEM 53: κ°€λ³€μΈμˆ˜λŠ” μ‹ μ€‘νžˆ μ‚¬μš©ν•΄λΌ
      • ITEM 54: null이 μ•„λ‹Œ, 빈 μ»¬λ ‰μ…˜μ΄λ‚˜ 배열을 λ°˜ν™˜ν•΄λΌ
      • ITEM 55: Optional λ°˜ν™˜μ€ μ‹ μ€‘ν•˜κ²Œ 해라
      • ITEM 56: 곡개된 API μš”μ†Œμ—λŠ” 항상 주석을 μž‘μ„±ν•΄λΌ
      • ITEM 57: μ§€μ—­λ³€μˆ˜μ˜ λ²”μœ„λ₯Ό μ΅œμ†Œν™”ν•΄λΌ
      • ITEM 58: 전톡적인 for λ¬Έλ³΄λ‹€λŠ” for-each문을 μ‚¬μš©ν•΄λΌ
      • ITEM 59: 라이브러리λ₯Ό 읡히고 μ‚¬μš©ν•΄λΌ
      • ITEM 60: μ •ν™•ν•œ 닡이 ν•„μš”ν•˜λ‹€λ©΄ float와 double은 피해라
      • ITEM 61: λ°•μ‹±λœ κΈ°λ³Έ νƒ€μž…λ³΄λ‹€λŠ” κΈ°λ³Έ νƒ€μž…μ„ μ‚¬μš©ν•΄λΌ
      • ITEM 62: λ‹€λ₯Έ νƒ€μž…μ΄ μ μ ˆν•˜λ‹€λ©΄ λ¬Έμžμ—΄ μ‚¬μš©μ„ 피해라
      • ITEM 63: λ¬Έμžμ—΄ 연결은 λŠλ¦¬λ‹ˆ μ£Όμ˜ν•΄λΌ
      • ITEM 64: κ°μ²΄λŠ” μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‚¬μš©ν•΄ 참쑰해라
      • ITEM 65: λ¦¬ν”Œλ ‰μ…˜λ³΄λ‹€λŠ” μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‚¬μš©ν•΄λΌ
      • ITEM 66: λ„€μ΄ν‹°λΈŒ λ©”μ„œλ“œλŠ” μ‹ μ€‘νžˆ μ‚¬μš©ν•΄λΌ
      • ITEM 67: μ΅œμ ν™”λŠ” μ‹ μ€‘νžˆ 해라
      • ITEM 68: 일반적으둜 ν†΅μš©λ˜λŠ” λͺ…λͺ… κ·œμΉ™μ„ 따라라
    • 객체지ν–₯ 섀계 원칙(SOLID)
    • λ””μžμΈνŒ¨ν„΄
      • Strategy Pattern
      • Template Method Pattern
      • Factory Method Pattern
      • Singleton
      • Delegation
      • Proxy
      • Adapter Pattern
    • μ‹€μŠ΅
      • μΈν„°νŽ˜μ΄μŠ€ μ‹€μŠ΅ - Vehicle
      • μΈν„°νŽ˜μ΄μŠ€ μ‹€μŠ΅ - Remote
      • GUI μ‹€μŠ΅ - Calculator
      • GUI μ‹€μŠ΅ - button
      • GUI μ‹€μŠ΅ - lotto
      • Thread μ‹€μŠ΅ - μ’Œμ„μ˜ˆμ•½, 메세지보내기
    • Jar vs War
  • λ°μ΄ν„°λ² μ΄μŠ€
    • KEY
    • Index
    • Transaction
    • Trigger
    • Procedure / Function
    • Package
    • λ°μ΄ν„°λ² μ΄μŠ€ 배움터
      • λ°μ΄ν„°λ² μ΄μŠ€ μ‹œμŠ€ν…œ
      • 관계데이터 λͺ¨λΈ
      • κ΄€κ³„λŒ€μˆ˜μ™€ SQL
    • MySQL
      • Databaseλž€
      • MySQL μ‹œμž‘ν•˜κΈ°
      • MySQL Database
      • MySQL Table
      • CRUD
      • κ΄€κ³„ν˜• λ°μ΄ν„°λ² μ΄μŠ€
      • Server와 Client
    • PostgreSQL
    • NoSQL
      • Install Cassandra on mac
      • Cassandraλž€?
      • NiFiλž€
  • Algorithm
    • String
    • Recursion
    • Dynamic Programming
    • Array, Struct, Pointer
    • Math
    • Sort
    • List
    • Stack
    • Queue
    • Graph
    • Tree
    • Maze
    • AVL
    • μ΄μ§„νƒμƒ‰νŠΈλ¦¬(Binary Search Tree)
    • DFS와 BFS
    • λ‹€μ΅μŠ€νŠΈλΌ μ•Œκ³ λ¦¬μ¦˜(Dijkstra's Algorithm)
    • Red-Black 트리
    • A* μ•Œκ³ λ¦¬μ¦˜
    • Heap
    • Huffman Coding
    • Priority Queue
    • Bellman-Ford μ•Œκ³ λ¦¬μ¦˜
    • C++
      • Class
      • STL
        • STL pair
        • STL Container - Associate Container
        • STL Container - Sequence Container
        • STL Container - Container Adapter
  • JavaScript
    • JABASCRIPT BASIC
    • Shallow Copy vs Deep Copy
    • OBJECT MODEL
    • NODE
    • 동기 처리 vs 비동기 처리
    • AJAX
    • CALLBACK
    • PROMISE
    • DEFERRER
    • UNDERSCORE
    • WEBPACK
    • SCOPE
    • EXECUTION CONTEXT
    • Image Object
    • BFCacheλž€?
    • history.scrollRestoration
    • Intersection Observer
    • JWT - JSON Web Token
    • HTML vs JSON
  • Vue.js
    • ν™˜κ²½μ„€μ •
    • Vue.jsλž€?
    • Vue Instance
    • Vue Component
    • Vue Router
    • HTTP 톡신
    • Template
    • Single File Component
    • Vue Animation
    • Vuex
    • Djnago와 μ—°λ™ν•˜κΈ°
  • Backbone.js
    • Model
    • Collection
    • Sync
    • view
  • Node.js
    • Doit! - λ…Έλ“œλ‘œ λ§Œλ“€ 수 μžˆλŠ” λŒ€ν‘œμ μΈ μ„œλ²„μ™€ μš©λ„
    • Doit! - λ…Έλ“œμ— λŒ€ν•΄ μ•Œμ•„λ³΄κ³  개발 도ꡬ μ„€μΉ˜ν•˜κΈ°
    • Doit! - λ…Έλ“œ κ°„λ‹¨ν•˜κ²Œ μ‚΄νŽ΄λ³΄κΈ°
    • Doit! - λ…Έλ“œμ˜ μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ μΉœν•΄μ§€κΈ°
    • Doit! - λ…Έλ“œμ˜ κΈ°λ³Έ κΈ°λŠ₯ μ•Œμ•„λ³΄κΈ°
    • Doit! - μ›Ή μ„œλ²„ λ§Œλ“€κΈ°
    • Doit! - λ°μ΄ν„°λ² μ΄μŠ€ μ‚¬μš©ν•˜κΈ°
    • Doit! - μ΅μŠ€ν”„λ ˆμŠ€ ν”„λ‘œμ νŠΈλ₯Ό λͺ¨λ“ˆν™”ν•˜κΈ°
    • Doit! - λ·° ν…œν”Œλ¦Ώ μ μš©ν•˜κΈ°
    • Doit! - 패슀포트둜 μ‚¬μš©μž μΈμ¦ν•˜κΈ°
    • Doit! - μ±„νŒ…μ„œλ²„ λ§Œλ“€κΈ°
    • Doit! - JSON-RPC μ„œλ²„ λ§Œλ“€κΈ°
  • Python
    • Warning-Could not import the lzma module
    • Pandas
      • Pandas 자료ꡬ쑰
      • Pandas 데이터 μž…μΆœλ ₯
      • DataFrame Data μ‚΄νŽ΄λ³΄κΈ°
      • μ‹œκ°ν™” 도ꡬ - Matplotlib
  • ML
    • μΆ”μ²œ μ‹œμŠ€ν…œ
      • Collaborative Filtering
      • Matrix Factorization
  • Django
    • Basic
      • ν™˜κ²½μ„€μ •
      • About Django
      • Start Django Project
      • Secret Key κ΄€λ¦¬ν•˜κΈ°
      • Settings λΆ„λ¦¬ν•˜κΈ°
      • Django App
      • Django View & URL (1)
      • Django Model
        • MySQL 연동
      • Django Admin
      • Django View & URL (2)
      • Django Template
      • Django Template & View & URL
      • Django Static
      • Django form
    • Advanced
      • Django Generic View
      • Django Automated Testing
      • Django Extenstion Template
      • Django Model Package
      • Django OpenSSL setting
    • REST framework
      • Rest API
      • Serializers
      • ViewSet
    • Error
      • ν™˜κ²½μ„€μ • zlib 였λ₯˜λ°œμƒ
      • ModuleNotFoundError
    • νŒ¨ν‚€μ§€
      • django-debug-toolbar
    • Vue.js μ—°λ™ν•˜κΈ°
  • Ruby
    • variable & input/output
    • 쑰건문
    • 반볡문
    • Array & Hash
    • Method
    • Proc&Lamda
    • Class
  • Ruby on Rails
    • Scaffolding
    • Controller
    • Model
    • Model-M:N relation
    • Model Validation
    • 멋사 10μ£Όμ°¨ μˆ˜μ—…(Tip)
  • HTML/CSS
    • Udacity - Intro to HTML/CSS
    • Udacity - Responsive Web Design
    • Udacity - Responsive Images
    • HTML Basic
    • CSS Basic
    • HTML5 Sementic Tag
    • HTML ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έλ“€
    • HTML5 λ©€ν‹°λ―Έλ””μ–΄
    • HTML 폼 κ΄€λ ¨ νƒœκ·Έλ“€
    • ν…μŠ€νŠΈ κ΄€λ ¨ μŠ€νƒ€μΌ
    • 색상과 배경을 μœ„ν•œ μŠ€νƒ€μΌ
    • λ ˆμ΄μ•„μ›ƒμ„ μœ„ν•œ μŠ€νƒ€μΌ
    • CSS 포지셔닝
    • λ‹€μž¬λ‹€λŠ₯ν•œ CSS3 μ„ νƒμž
    • CSS와 μ• λ‹ˆλ©”μ΄μ…˜
    • λ°˜μ‘ν˜• μ›Ήμ΄λž€?
  • OS(운영체제)
    • Linux
      • Daemon
      • Cron
      • ν”„λ‘œμ„ΈμŠ€ κ΄€λ ¨ λͺ…λ Ήμ–΄
      • ν…μŠ€νŠΈ 파일 λͺ…λ Ήμ–΄
  • Network
    • λ„€νŠΈμ›Œν¬ κΈ°λ³Έ κ°œλ…
    • λ„€νŠΈμ›Œν¬ κΈ°λ³Έ κ·œμΉ™
    • 물리 계측
    • 데이터 링크 계측
    • λ„€νŠΈμ›Œν¬ 계측
    • 전솑 계측
    • μ‘μš© 계측
    • λ„€νŠΈμ›Œν¬ 전체 흐름
    • 무선 랜
  • IT 기타지식
    • NASλž€
Powered by GitBook
On this page
  • 1. ES5μ—μ„œ λ·° μΈμŠ€ν„΄μŠ€μ˜ template 속성 ν™œμš©
  • 2. μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈ μ²΄κ³„μ˜ <template> μ½”λ“œ ν™œμš©
  • 데이터 바인딩
  • v-bind
  • μžλ°”μŠ€ν¬λ¦½νŠΈ ν‘œν˜„μ‹
  • computed
  • computed vs methods
  • computed vs watch
  • Directive
  • 이벀트 처리

Was this helpful?

  1. Vue.js

Template

뷰의 ν…œν”Œλ¦Ώμ€ HTML, CSS λ“±μ˜ λ§ˆν¬μ—… 속성과 λ·° μΈμŠ€ν„΄μŠ€μ—μ„œ μ •μ˜ν•œ 데이터 및 λ‘œμ§μ„ μ—°κ²°ν•˜μ—¬ μ‚¬μš©μžκ°€ λΈŒλΌμš°μ €μ—μ„œ λ³Ό 수 μžˆλŠ” ν˜•νƒœμ˜ HTML둜 λ³€ν™˜ν•΄μ£ΌλŠ” 속성이닀.

  • ES5μ—μ„œ λ·° μΈμŠ€ν„΄μŠ€μ˜ template 속성 ν™œμš©

  • μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈ μ²΄κ³„μ˜ <template> μ½”λ“œ ν™œμš©

ν…œν”Œλ¦Ώ 속성은 λ‹€μŒκ³Ό 같이 두가지 λ°©λ²•μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλ‹€.

1. ES5μ—μ„œ λ·° μΈμŠ€ν„΄μŠ€μ˜ template 속성 ν™œμš©

new Vue({
  template: '<p>Hello {{message}}</p>'
});

이전 μ˜ˆμ œμ—μ„œ 주둜 μ‚¬μš©ν•œ μœ„μ™€ 같은 μ½”λ“œμ΄λ‹€.

ν…œν”Œλ¦Ώμ€ μ‚¬μš©μžκ°€ λ³Ό μˆ˜λŠ” μ—†μ§€λ§Œ 라이브러리 λ‚΄λΆ€μ μœΌλ‘œ template μ†μ„±μ—μ„œ μ •μ˜ν•œ λ§ˆν¬μ—… + λ·° 데이터λ₯Ό 가상 돔 기반의 render() ν•¨μˆ˜λ‘œ λ³€ν™˜ν•œλ‹€. λ³€ν™˜λœ render() ν•¨μˆ˜λŠ” μ΅œμ’…μ μœΌλ‘œ μ‚¬μš©μžκ°€ λ³Ό 수 있게 화면을 κ·Έλ¦¬λŠ” 역할을 ν•œλ‹€.

  • template 속성을 μ‚¬μš©ν•˜μ§€ μ•Šμ€ 경우

<div id="app">
  <h3>{{message}}</h3>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    }
  });
</script>

template 속성을 μ‚¬μš©ν•˜μ§€ μ•Šμ€ κ²½μš°μ—λŠ” μš°μ„  <h3>{{message}}</h3> μ½”λ“œλ₯Ό 화면에 ν‘œμ‹œν•˜κ³ , μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λ˜λ©΄ message의 값을 data속성 μ•ˆμ˜ κ°’μœΌλ‘œ μΉ˜ν™˜ν•œλ‹€.

  • template 속성을 μ‚¬μš©ν•œ 경우

<div id="app">
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    },
    template: '<h3>{{message}}</h3>'
  });
</script>

template속성을 μ‚¬μš©ν•˜λ©΄ 아무 λ‚΄μš©μ΄ μ—†λ‹€κ°€ μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λ˜λ©΄ <h3>{{message}}</h3> μ½”λ“œκ°€ 화면에 μΆ”κ°€λ˜μ–΄ ν‘œμ‹œλœλ‹€.

2. μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈ μ²΄κ³„μ˜ <template> μ½”λ“œ ν™œμš©

<template>
  <p>{{message}}</p>
</template>

데이터 바인딩

데이터 바인딩은 HTML ν™”λ©΄ μš”μ†Œλ₯Ό λ·° μΈμŠ€ν„΄μŠ€μ˜ 데이터와 μ—°κ²°ν•˜λŠ” 것을 μ˜λ―Έν•œλ‹€.

{{}}

λ·° μΈμŠ€ν„΄μŠ€μ˜ 데이터λ₯Ό HTML νƒœκ·Έμ— μ—°κ²°ν•˜λŠ” κ°€μž₯ 기본적인 ν…μŠ€νŠΈ μ‚½μž… 방식이닀.

<div id="app">
  <h3>{{message}}</h3>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    }
  });
</script>

data μ†μ„±μ˜ message 값을 {{message}}에 μ—°κ²°ν•˜μ—¬ 화면에 λ‚˜νƒ€λ‚΄λŠ” μ½”λ“œμ΄λ‹€. μ—¬κΈ°μ„œ data μ†μ„±μ˜ message 값이 λ³€κ²½λ˜λ©΄ λ·° λ°˜μ‘μ„±μ— μ˜ν•΄ 화면이 μžλ™μœΌλ‘œ κ°±μ‹ λœλ‹€.

λ§Œμ•½μ— λ·° 데이터가 λ³€κ²½λ˜μ–΄λ„ 값을 λ°”κΎΈκ³  μ‹Άμ§€ μ•Šλ‹€λ©΄ v-once 속성을 μ‚¬μš©ν•˜λ©΄λœλ‹€.

<div id="app">
  <h3 v-once>{{message}}</h3>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    }
  });
</script>

v-bind

v-bindλŠ” id, class, style λ“±μ˜ HTML 속성 값에 λ·° 데이터 값을 μ—°κ²°ν•  λ•Œ μ‚¬μš©ν•˜λŠ” 데이터 μ—°κ²° 방식이닀.

<div id="app">
    <p v-bind:id="idA">ID binding</p>
     <p v-bind:class="classA">Class binding</p>
    <p v-bind:style="styleA">style binding</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      idA: 10,
      classA: 'container',
      styleA: 'color: blue'
    }
  });
</script>

λ‹€μŒκ³Ό 같이 v-bind μ†μ„±μœΌλ‘œ μ§€μ •ν•  HTML μ†μ„±μ΄λ‚˜ props μ†μ„±μ•žμ— μ ‘λ‘μ‚¬λ‘œ λΆ™μ—¬μ£Όλ©΄λœλ‹€.

<div id="app">
  <p id="10">ID binding</p>
  <p class="container">Class binding</p>
  <p style="color: blue;">style binding</p>
</div>

μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ λ°μ΄ν„°μ˜ 값이 각 <p> 에 μ—°κ²°λ˜μ–΄ 화면에 λ‚˜νƒ€λ‚œλ‹€.

μ—¬κΈ°μ„œ v-bind: 문법을 : 둜 κ°„μ†Œν™”ν•  수 μžˆλ‹€. 예λ₯Ό λ“€μ–΄ v-bind:idλŠ” :id와 같은 λ™μž‘μ„ ν•œλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈ ν‘œν˜„μ‹

뷰의 ν…œν”Œλ¦Ώμ—μ„œλ„ μžλ°”μŠ€ν¬λ¦½νŠΈ ν‘œν˜„μ‹μ„ μ“Έ 수 μžˆλ‹€. {{}} μ•ˆμ— μžλ°”μŠ€ν¬λ¦½νŠΈ ν‘œν˜„μ‹μ„ λ„£μœΌλ©΄ λœλ‹€.

<div id="app">
  <p>{{ message }}</p>
  <p>{{ message + "!!!" }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</div>

μžλ°”μŠ€ν¬λ¦½νŠΈ ν‘œν˜„μ‹μ„ μ‚¬μš©ν•  λ•Œ μ£Όμ˜ν•΄μ•Όν•  점이 μžˆλ‹€.

  1. μžλ°”μŠ€ν¬λ¦½νŠΈ μ„ μ–Έλ¬Έκ³Ό λΆ„κΈ° ꡬ문은 μ‚¬μš©ν•  수 μ—†λ‹€.

  2. λ³΅μž‘ν•œ 연산은 μΈμŠ€ν„΄μŠ€ μ•ˆμ—μ„œ μ²˜λ¦¬ν•˜κ³  ν™”λ©΄μ—λŠ” κ°„λ‹¨ν•œ μ—°μ‚° 결과만 ν‘œμ‹œν•΄μ•Όν•œλ‹€.

<div id="app">
  {{ var a = 10;}} <!-- X, 선언문은 μ‚¬μš© λΆˆκ°€ -->
  {{ if(true){ return 100; } }}<!-- X, λΆ„κΈ° ꡬ문 μ‚¬μš© λΆˆκ°€ -->
  {{ true? 100 : 0 }} <!-- O, μ‚Όν•­μ—°μ‚°μž ν‘œν˜„ κ°€λŠ₯ -->
  {{ message.split('').reverse().join('') }} <!-- X, λ³΅μž‘ν•œ 연산은 μΈμŠ€ν„΄μŠ€ λ‚΄μ—μ„œ μˆ˜ν–‰ -->
  {{ reversedMessage }} <!-- O, μŠ€ν¬λ¦½νŠΈμ—μ„œ computed μ†μ„±μœΌλ‘œ 계산 ν›„ μ΅œμ’… κ°’λ§Œ ν‘œν˜„ -->
</div>

computed

cpmputed 속성은 데이터 연산듀을 μ •μ˜ν•˜λŠ” μ˜μ—­μ΄λ‹€.

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function(){
      // μ—¬κΈ°μ„œ thisλŠ” vm μΈμŠ€ν„΄μŠ€λ₯Ό 가리킨닀.
      return this.message.split('').reverse().join('')
    }
  }
});

λ³΅μž‘ν•œ 계산은 computed (데이터 속성을 μžλ™μœΌλ‘œ κ³„μ‚°ν•΄μ£ΌλŠ” 속성)λ₯Ό μ΄μš©ν•˜μ—¬ λ‚˜νƒ€λ‚΄λŠ” 것이 μ’‹λ‹€. HTML에 μ΅œμ’…μ μœΌλ‘œ ν‘œν˜„λ  κ°’λ§Œ λ‚˜νƒ€λ‚΄κ³ , λ°μ΄ν„°μ˜ 기본연산은 μžλ°”μŠ€ν¬λ¦½νŠΈ λ‹¨μ—μ„œ ν•¨μœΌλ‘œμ¨ 화면단 μ½”λ“œμ˜ 가독성을 높일 수 있기 λ•Œλ¬Έμ΄λ‹€. λ˜ν•œ 반볡적인 연산에 λŒ€ν•΄μ„œλŠ” 미리 κ³„μ‚°ν•˜μ—¬ μ €μž₯ν•΄ 놓고, ν•„μš”ν•  λ•Œ λ°”λ‘œ λΆˆλŸ¬μ˜€λŠ” caching 효과λ₯Ό 얻을 수 μžˆλ‹€.

즉, computed 속성은 λ‹€μŒκ³Ό 같은 μž₯점을 κ°€μ§€κ³  μžˆλ‹€.

  • data 속성 κ°’μ˜ 변화에 따라 μžλ™μœΌλ‘œ λ‹€μ‹œ μ—°μ‚°ν•œλ‹€.

  • caching : λ™μΌν•œ 연산을 λ°˜λ³΅ν•΄μ„œ ν•˜μ§€ μ•ŠκΈ° μœ„ν•΄ μ—°μ‚°μ˜ κ²°κ³Ό 값을 미리 μ €μž₯ν•˜κ³  μžˆλ‹€κ°€ ν•„μš”ν•  λ•Œ λΆˆλŸ¬μ˜€λŠ” λ™μž‘ ( 쒅속 λŒ€μƒ )

computed vs methods

methods 속성은 ν˜ΈμΆœν•  λ•Œλ§Œ ν•΄λ‹Ή 둜직이 μˆ˜ν–‰λ˜κ³ , computed 속성은 λŒ€μƒ 데이터 값이 λ³€κ²½λ˜λ©΄ μžλ™μ μœΌλ‘œ μˆ˜ν–‰λœλ‹€. 즉, μˆ˜λ™μ μœΌλ‘œ 데이터λ₯Ό κ°±μ‹ ν•˜λŠ”μ§€, λŠ₯λ™μ μœΌλ‘œ 데이터λ₯Ό κ°±μ‹ ν•˜λŠ”μ§€μ˜ 차이이닀.

methods속성은 μˆ˜ν–‰ν•  λ•Œλ§ˆλ‹€ 연산을 ν•˜κΈ° λ•Œλ¬Έμ— λ³„λ„λ‘œ 캐싱을 ν•˜μ§€ μ•Šμ§€λ§Œ, computed 속성은 데이터가 λ³€κ²½λ˜μ§€ μ•ŠλŠ” ν•œ 데이터λ₯Ό μΊμ‹±ν•˜κ³  μžˆλ‹€κ°€, ν•„μš”ν• λ•Œ λ°˜ν™˜ν•΄ μ€€λ‹€. λ”°λΌμ„œ, λ³΅μž‘ν•œ 연산을 반볡 μˆ˜ν–‰ν•΄μ„œ 화면에 λ‚˜νƒ€λ‚΄μ•Ό ν•œλ‹€λ©΄, computed 속성을 μ΄μš©ν•˜λŠ” 것이 μ„±λŠ₯λ©΄μ—μ„œ 더 νš¨μœ¨μ μ΄λ‹€.

 computed: {
        message: function(){
          return Date.now();
        }
      }

computed 속성은 쒅속 λŒ€μƒμ„ 따라 μ €μž₯(캐싱)되기 λ•Œλ¬Έμ— Date.now() 와 같이 아무곳에도 μ˜μ‘΄ν•˜μ§€ μ•ŠλŠ” 속성은 μ ˆλŒ€λ‘œ updateλ˜μ§€ μ•ŠλŠ”λ‹€.

computed vs watch

watch 속성은 데이터 λ³€ν™”λ₯Ό 감지해 μžλ™μœΌλ‘œ νŠΉμ • λ‘œμ§μ„ μˆ˜ν–‰ν•œλ‹€. computed 속성과 μœ μ‚¬ν•˜μ§€λ§Œ computed 속성은 λ‚΄μž₯ APIλ₯Ό ν™œμš©ν•œ κ°„λ‹¨ν•œ 연산에 μ ν•©ν•œ 반면, watch 속성은 데이터 호좜과 같이 μ‹œκ°„μ΄ μƒλŒ€μ μœΌλ‘œ 많이 μ†Œλͺ¨λ˜λŠ” 비동기 μ²˜λ¦¬μ— μ ν•©ν•˜λ‹€.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input v-model="message">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'reverse message',
      },
      watch: {
        message: function(data){
          console.log(data + '값이 λ³€κ²½λ©λ‹ˆλ‹€.');
        }
      }
    });
  </script>
</body>
</html>

Directive

λ·° λ””λ ‰ν‹°λΈŒλž€ HTML νƒœκ·Έ μ•ˆμ— v-접두사λ₯Ό κ°€μ§€λŠ” λͺ¨λ“  속성듀을 μ˜λ―Έν•œλ‹€. μ•žμ—μ„œ 닀룬 v-bind 속성도 λ””λ ‰ν‹°λΈŒμ— ν•΄λ‹Ήλœλ‹€. λ””λ ‰ν‹°λΈŒλŠ” ν™”λ©΄μ˜ μš”μ†Œλ₯Ό 더 μ‰½κ²Œ μ‘°μž‘ν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•˜λŠ” κΈ°λŠ₯으둜 뷰의 데이터 값이 λ³€κ²½λ˜μ—ˆμ„ λŒ€ ν™”λ©΄μ˜ μš”μ†Œλ“€μ΄ λ³€κ²½λœ 데이터 값에 따라 κ°±μ‹ λœλ‹€. ν™”λ©΄μ˜ μš”μ†Œλ₯Ό 직접 μ œμ–΄ν•  ν•„μš”μ—†μ΄ 뷰의 λ””λ ‰ν‹°λΈŒλ₯Ό ν™œμš©ν•΄ ν™”λ©΄ μš”μ†Œλ₯Ό μ‘°μž‘ν•  수 μžˆλ‹€.

λ””λ ‰ν‹°λΈŒ μ’…λ₯˜

μ—­ν• 

v-if

μ§€μ •ν•œ λ·° 데이터 κ°’μ˜ μ°Έ, κ±°μ§“ 여뢀에 따라 ν•΄λ‹Ή HTML νƒœκ·Έλ₯Ό 화면에 ν‘œμ‹œν•˜κ±°λ‚˜ ν‘œμ‹œν•˜μ§€ μ•ŠλŠ”λ‹€. (ν•΄λ‹Ή νƒœκ·Έ μ™„μ „νžˆ μ‚­μ œ)

v-for

μ§€μ •ν•œ λ·° λ°μ΄ν„°μ˜ 개수만큼 ν•΄λ‹Ή HTML νƒœκ·Έλ₯Ό 반볡 좜λ ₯ν•œλ‹€.

v-show

v-if와 μœ μ‚¬ν•˜κ²Œ λ°μ΄ν„°μ˜ μ§„μœ„ 여뢀에 따라 ν•΄λ‹Ή HTML νƒœκ·Έλ₯Ό 화면에 ν‘œμ‹œν•˜κ±°λ‚˜ ν‘œμ‹œν•˜μ§€ μ•ŠλŠ”λ‹€. (display:none css λ₯Ό μ£Όμ–΄ μ‹€μ œ νƒœκ·ΈλŠ” 남아 있고, ν™”λ©΄μƒμœΌλ‘œλ§Œ 보이지 μ•ŠμŒ)

v-bind

HTML νƒœκ·Έμ˜ κΈ°λ³Έ 속성과 λ·° 데이터 속성 μ—°κ²°

v-on(@)

ν™”λ©΄ μš”μ†Œμ˜ 이벀트λ₯Ό κ°μ§€ν•˜μ—¬ μ²˜λ¦¬ν•  λ•Œ μ‚¬μš© v-on:을 κ°„μ†Œν™”ν•œ 문법은 @ 이닀.

v-model

formμ—μ„œ 주둜 μ‚¬μš©λ˜λŠ” μ†μ„±μœΌλ‘œ, 폼에 μž…λ ₯ν•œ 값을 λ·° μΈμŠ€ν„΄μŠ€μ˜ 데이터와 μ¦‰μ‹œ λ™κΈ°ν™”ν•œλ‹€. 화면에 μž…λ ₯된 값을 μ €μž₯ν•΄ μ„œλ²„μ— λ³΄λ‚΄κ±°λ‚˜ watch 와 같은 속성을 μ΄μš©ν•΄ μΆ”κ°€ λ‘œμ§μ„ μˆ˜ν–‰ν•  수 μžˆλ‹€. <input>, <select>, <textarea> νƒœκ·Έμ—λ§Œ μ‚¬μš©κ°€λŠ₯

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <a v-if="flag">vue.js</a>
    <ul>
      <li v-for="system in systems">{{system}}</li>
    </ul>
    <p v-show="flag">vue.js</p>
    <h5 v-bind:id="uid">Vue Documents</h5>
    <button v-on:click="popupAlert">alert</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        flag: false,
        systems: ['ios', 'window', 'android'],
        uid: 10
      },
      methods: {
        popupAlert: function(){
          return alert('alert!!');
        }
      }
    });
  </script>
</body>
</html>

이벀트 처리

λ·° ν™”λ©΄μ—μ„œ λ°œμƒν•œ 이벀트λ₯Ό μ²˜λ¦¬ν•˜κΈ° μœ„ν•΄ v-on λ””λ ‰ν‹°λΈŒμ™€ methods 속성을 ν™œμš©ν•œλ‹€.

<div id="app">
  <button v-on:click="clickBtn">클릭</button>
</div>
var vm = new Vue({
  el: '#app',
  methods: {
    clickBtn: function(){
      alert('clicked');
    }
  }
});

λ‹€μŒ μ˜ˆμ œλŠ” v-on:click λ””λ ‰ν‹°λΈŒλ₯Ό μΆ”κ°€ν•˜μ—¬ 클릭 λ²„νŠΌ ν΄λ¦­μ‹œ clickBtn λ©”μ„œλ“œκ°€ μ‹€ν–‰λœλ‹€.

<div id="app">
  <button v-on:click="clickBtn(10)">클릭</button>
</div>
var vm = new Vue({
  el: '#app',
  methods: {
    clickBtn: function(num){
      alert('clicked'+num);
    }
  }
});

λ‹€μŒκ³Ό 같이 인자λ₯Ό λ„˜κΈΈ 수 μžˆλ‹€. μΆ”κ°€μ μœΌλ‘œ event 인자λ₯Ό μ΄μš©ν•΄ ν™”λ©΄ 돔 μ΄λ²€νŠΈμ— μ ‘κ·Όν•  수 μžˆλ‹€.

<div id="app">
  <button v-on:click="clickBtn">클릭</button>
</div>
var vm = new Vue({
  el: '#app',
  methods: {
    clickBtn: function(event){
        console.log(event);
    }
  }
});

function(event){} 와 같이 event 인자λ₯Ό μ •μ˜ν•˜λ©΄ ν•΄λ‹Ή 돔 μš”μ†Œμ˜ 이벀트 객체에 μ ‘κ·Όν•  수 μžˆλ‹€.

MouseEvent {isTrusted: true, screenX: 2181, screenY: 557, clientX: 25, clientY: 356, …}
PreviousHTTP 톡신NextSingle File Component

Last updated 4 years ago

Was this helpful?