DevSpring

[Spring] Vue.js, Semantic UI 사용하기

  1. 1. Vue.js
  2. 2. Semantic UI
  3. 3. 참조

Vue.js

Frontend framework으로 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링할 수 있다.

사용하기 위한 준비는 html 파일에 아래 구문을 추가하는 것만으로 충분하다.

예제는 다음과 같다.

hexo에서 { { message } } 가 잘 표현되지 않아 \ 를 넣었다. 실제 소스에서는 넣지 않는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function() {
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue'
        }
    });
}
</script>
</head>
<body>
<div id="app">
\{\{ message }}
</div>
</body>
</html>

Semantic UI

이전에 BootStrap을 사용해본 적이 있었기 때문에 핫한 ui framework이 뭐가 있나 찾아보았더니 Semantic UI를 찾을 수 있었다.

Semantic UI는 jquery 기반의 UI Framework이다.

vue.js와의 integration을 위한 https://semantic-ui-vue.github.io/ 도 있었으나, 아직은 잘 모르므로 일반적인 것으로 그냥 해보기로 한다. (아마 나중에 코드가 복잡해지면 js 코드끼리 충돌이 나서 깨지리라 예측해본다…)

사용법은 여기 나와있다. https://semantic-ui.com/introduction/getting-started.html

설치 등이 귀찮기 때문에 cdn을 찾아서 link하였다.

1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>

body에는 이런 코드를 넣어서 확인해본다.

1
2
3
4
5
6
7
8
9
10
<div id="index">
<button class="ui primary button">
  Save
</button>
<button class="ui button">
  Discard
</button>
</div>

참조

Share