Vue.js란? ?

이번에는 Vue. js에 대해 배우고 싶습니다.
Vue.js는 프런트 엔드에서 사용되는 언어입니다. 자바 스크립트 프레임 워크가됩니다.
HTML과 CSS로 쓴 후에 움직임을 붙일 수 있습니다.
프런트 엔드에서 자주 사용되는 언어인 것 같습니다.
그 밖에도 자바스크립트의 프레임워크가 많이 있어 용도별로 구분하여 갑니다.
또, Vue.js에는 한층 더 프레임워크가 존재합니다만, 여기에서는 할애하겠습니다.

Vue.js를 사용하는 이점



Vue.js를 사용하는 몇 가지 이점이 있습니다.
①HTML과 CSS
②Javascript의 지식이 있으면 비교적 순조롭게 들어온다.
③ DOM이 를 자동 처리해 준다. (Js에서 HTML과 CSS 데이터를 가져옵니다)
입니다.

도입 방법



명령을 사용하는 것은 특별히 없지만
HTML과 Vue 자체에 결정 같은 설명 내용이 있습니다.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js practice</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="script/script.js"></script>
</body>
</html>

script.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'こんにちわ!'
  }
})

위가 주요 Vue.js의 병아리입니다.
브라우저에서 보면 다음과 같이 됩니다.



HTML 측에서 Vue.js



① Vue Devtools
이것을 사용하면 Vue 응용 프로그램의 버그를 쉽게 찾을 수 있으므로 설치하는 것이 좋습니다.
HTML에서는 다음과 같이 설명합니다. body 태그 맨 마지막에 입력합니다.
또, 그 아래에 Js 폴더와 그 파일을 읽어 주기 위해서 기술합니다.
htps // cd 응. js에서 ぃvr. 네 t / n pm / ゔ @ 2.6.12 "
②div 태그
나중에 설명하겠습니다.이것은 Vue.js에서 인스턴스 배포가 여기입니다 ~라는 의미입니다.
div 태그 안에 넣고 싶은 단어 등을 기술합니다.
UI의 영역이 됩니다. Ul/UX에 대해서는 나중에 학습해 나갈 것입니다.

JS 측에서의 구현



①var
첫 번째 줄에 Var이라는 설명이 보입니다. 이것은 Vue의 핵심입니다. 이것이 없으면 처음에는 움직이지 않습니다. 심장입니다.
덧붙여서 Var는 Js에서 변수 선언의 경우에 사용됩니다.
②data
이것은 객체, 배열의 지정이 됩니다. 자세한 내용은 나중에 학습합니다.

이상이 Vue.js를 사용할 때 주로 기입하는 내용입니다.

좋은 웹페이지 즐겨찾기