입문

나 는 자기 학습 과 출력 을 해 보았다
이 기사는 Qiita의 첫 투고입니다.

시도해 본 일

Vue.나는 js로 간단한 코드를 써 보았다

원래 Vue.js가 뭐예요?

Vue.js는 클라이언트가 사용하는 JavaScript 프레임워크입니다.
따로따로 설명하자면
▶클라이언트
웹 서버에 액세스하여 얻은 결과를 웹 페이지에 표시합니다.
▶︎JavaScript
웹 페이지를 복잡한 기능을 가지게 하는 프로그래밍 언어
▶등틀
비교적 적은 코드로 효과적으로 제작된 기능의 집합
중요한 것은, 나는 이것이 웹 페이지에서 사람을 매우 기분 좋게 하는 기능 중의 하나라고 생각한다

Vue.js가 뭐예요?

학습 원가가 낮다

JavaScript 프레임워크도 많지만 학습 비용이 낮고 학습이 용이하다는 장점이 있습니다.
공식 사이트는 일본어, 기술 블로그의 보도도 충실하기 때문에 조사하기 쉽다

소형에서 대규모 개발까지

개인 개발에서 대형 사이트까지
기업용) 구글, 애플, 라인, 노트, ZOZO

SPA 개발

SPA(단일 페이지) 개발
SPA란 브라우저가 처리할 수 있는 처리가 JavaScript로 끝나고 서버와의 통신 제어가 필요한 최소한이라는 것을 말한다

VM 모델

웹 서비스 개발
Model
View
ViewModel
분리 개발한 디자인 사상을 가지고 View로 모델의 데이터를 처리하기 쉬운 것을 설정하고 데이터로 이 기능을 연결하여 데이터 자체를 공유하고 처리하는 생각을 가지고 있습니다.
글만으로는 잘 몰라서 신경 쓰이는 사람여기 참조

개요를 아시는 곳에서 만들어보도록 하겠습니다.

이번에 만든 건 정적 html 파일이에요.

index.html 만들기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Worldを表示</title>
  </head>
  <body>
    <!--- "Hello World" を表示する --->
  </body>
</html>

만든 인덱스.html 파일에서 CDN 작성

Vue.js를 가져오는 몇 가지 방법이 있는데 이번에는 CDN을 이용했습니다.
body 태그에 기술하기

  <body>
    <!--- "Hello World" を表示する --->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>

표시할 html 설명

메시지라는 변수를 준비하고 "Hello World"문자열을 저장하고 표시합니다
messeage라는 변수를 #의 괄호로 묶고div 표시로 묶고 id 요소를 분배합니다

  <body>
    <!--- "Hello World" を表示する --->
    <div id="app">{{ message }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>

html 이렇게 준비했습니다.

Vue 함수 사용

여기서 제가 드디어 Vue를 쓰기 시작했어요.
처음 썼을 때 문법이 좀 복잡했어요. 예의죠.


const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})

먼저 Vue 인스턴스 생성
el:'#app'에서 Vue 함수를 방금 id 요소를 분배한 앱의 값으로 설정합니다
데이터: {}에 준비된 메시지 변수는 출력된 문자열을 저장합니다

스크립트 태그로 묶기

마지막으로 스크립트 탭으로 다음과 같이 요약합니다.


<body>
  <div id="app">{{ message }}</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    })
  </script>
</body>

출력

이상의 프로그램 제작이 완료되었으니 브라우저에 표시해 보세요

뜨면 오케이!

index.전문


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Worldを表示</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello World'
        }
      })
    </script>
  </body>
</html>

마지막

이번엔 Vue야.js로 간단한 프로그램을 만들었지만, 아직 Vue입니다.왜냐하면 js의 장점을 충분히 발휘하지 못했어요.
나는 나중에 다시 공부하고 싶으면 기사를 투고하고 싶다

Reference

이 문제에 관하여(Vue.js에서 Hello World 출력 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kohei__y/items/dd98a8370c00673b1625

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Vue.js에서 Hello World 출력 시도

입문