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.jsvar 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를 사용할 때 주로 기입하는 내용입니다.
Reference
이 문제에 관하여(Vue.js란? ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/36ba2fc4dee783def482
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
명령을 사용하는 것은 특별히 없지만
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를 사용할 때 주로 기입하는 내용입니다.
Reference
이 문제에 관하여(Vue.js란? ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akari_0618/items/36ba2fc4dee783def482
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
①var
첫 번째 줄에 Var이라는 설명이 보입니다. 이것은 Vue의 핵심입니다. 이것이 없으면 처음에는 움직이지 않습니다. 심장입니다.
덧붙여서 Var는 Js에서 변수 선언의 경우에 사용됩니다.
②data
이것은 객체, 배열의 지정이 됩니다. 자세한 내용은 나중에 학습합니다.
이상이 Vue.js를 사용할 때 주로 기입하는 내용입니다.
Reference
이 문제에 관하여(Vue.js란? ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akari_0618/items/36ba2fc4dee783def482텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)