Vue.js 현재 시간 표시 ~ 시계 ~

9138 단어 HTMLHTML5자바스크립트Vue.js

Vue.js란?



사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크입니다. 다른 단일 판(모놀리식: monolithic) 프레임워크와 달리 Vue는 조금씩 적용할 수 있도록 설계되었습니다. 핵심 라이브러리는 뷰 레이어에만 초점을 맞추고 있습니다. 따라서 사용하기 시작하거나 다른 라이브러리와 기존 프로젝트에 통합하는 것은 매우 간단합니다. 또한 현대적인 도구 및 지원 라이브러리와 함께 사용하면 정교한 단일 페이지 응용 프로그램을 개발할 수 있습니다.

참고 URL
htps // jp. 아 js. rg/v2/구이데/가서 x. HTML

Vue.js를 사용하는 이점


  • 부담없이 사용할 수 있다:
    Vue.js는 jQuery와 마찬가지로 script 태그를 한 줄 쓰는 것만으로 시작할 수 있습니다.
  • DOM 조작을 자동적으로 실시한다 :
    HTML 문서 전체의 요소의 구성을 DOM(Document Object Model)이라고 합니다. Vue.js는 HTML측의 요소와 JavaScript측의 값이나 이벤트와의 대응부를 자동으로 실시해 줍니다. 이렇게하면 jQuery보다 간결하고 이해하기 쉽게 코드를 작성할 수 있습니다.
  • 학습 비용이 낮음:
    Angular나 React와 비교해 프레임워크의 규모가 작은 만큼, 기억하는 것도 적어집니다. 자바스크립트나 jQuery의 기본 지식이 있다면 몇 시간의 학습으로 개발을 시작할 수 있을 것입니다.

    • Vue.js에서 현재 시간을 가져와 표시



    처음에 전체상을 잡아주기 위해서, 완성품을 기술합니다.
    
<!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">
    <p>{{ now }}</p>
    <button v-on:click="time">現在時刻</button> <!-- v-on:event -->
  </div>
  <!-- Vue.jsをインストール -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- ここから記述していきます -->
  <script>
    let app = new Vue({
      el: "#app",
      data:{
        now: "00:00:00"
      },
      methods: {
        time: function(e){ function(e) 
          var date = new Date();

          this.now = date.getHours() + ":"
          + date.getMinutes() + ":" +
          date.getSeconds();
        }
      }
    });
  </script>
</body>
</html>

    완제품





    여기에서 요소별로 설명하겠습니다. 덧붙여서 Vue.js는 방금 시작했기 때문에, 설명이 이르지 않는 곳이 있으면 코멘트 부탁드립니다.
    
  <div id="app">
    <p>{{ now }}</p>
    <button v-on:click="time">現在時刻</button> <!-- v-on:event -->
  </div>

    우선은 HTML로 이쪽.

    {{}}
    이 설명은 자바 스크립트 메시지로 자동 대체됩니다.
    v-on
    v-on 지시문을 사용하면 DOM 이벤트를 구독하고 이벤트 발화시 JavaScript를 실행할 수 있습니다.

    참고 URL
    htps // jp. 아 js. rg/v2/구이데/에ぇぇㅇts. HTML # % 3 % 82 % 4 % 3 % 83 % 99 % 3 % 83 % B3 % 3 % 83 % 88 % 3 % 81 % Au % 8 % B3 % BC % 8 % A % 아 D

    다음에 코멘트 아웃으로 script 이후의 설명해 갑니다.
    
let app = new Vue({
  el: "#app", //el: "ID要素"を取得します
  data:{
    //こちらのプロパティでHTMLの{{}}を置換します
  },
})

    다음에 method 이후의 설명해 갑니다.
    let app = new Vue({
  el: "#app",
   data:{
     now: "00:00:00" //now: == {{}}
   },

   methods: {
     time: function(e){  //function(e) この引数eは、eventの「e」
       let date = new Date();  //new演算子でオブジェクトのインスタンスを生成
        //現在時刻の取得 **ここからはjavascript**
         this.now = date.getHours() + ":"
         + date.getMinutes() + ":" +
         date.getSeconds();
     }
   }
});

    버튼을 누르기 전





    어때?
    클릭 이벤트에서 현재 시간을 얻을 수 있었습니까?

    나도 아직 공부중입니다만, 쓰는 방법 자체는 심플하고 매우 알기 쉽지요.

    덧붙여서 나는 이쪽을 Youtube에서 보고 학습을 했습니다.
    부디 그쪽도 참고까지 봐 주세요.

    Youtube 타니 구치 마코토 노모 스타 채널
    htps //w w. 요츠베. 이 m/와 tch? v=jdcZ3LvTs78
    JavaScript의 객체 조작 배열
    클래스 없는 CSS 프레임워크를 만들었습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage