[Vue.js]Vue.js

##Vue.js  html 작성 기본 순서

1. vue.js 라이브러리

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.html 화면 작성하기

<div id="app">  

       <!-- expression, 결과데이터, 3항연산자  조건식?true-value:false-value

               불가 - 변수 선언, 명령문 선언

        -->

       <div>{{ message}}</div>

</div>

3. new Vue instance 생성하기

<script>

    new Vue();

    let app = new Vue();

 

    let app = new Vue( {

         el: "#app",

         data: {

                message: "광주 5반 짱!!!", 

                year: 2022,

                title: 8기,

         }

    } );

  </script>

 

 

##Emmet

--  https://emmet.io  -> cheat sheet

--html, css 자동완성 제공 편리

-- visual Studio: 자동  Emmet 내장 제공

 

-- Html5 문서 자동생성

 >! + enter

 >html:5

 

-- ">" : 자식요소

>&nbsp; 자식요소

-- "+" : 형제요소

'+' 형제요소

-- "*숫자" : 반복 태그

" * "&nbsp; 반복

 

 

-- ".class-name", "#id-name": class, id 지정

 

 

-- " {텍스트}" : 텍스트 입력

 

--"$", "$$$" 넘버링(숫자) 순서대로 나열

 

-- "^" 부모요소

--"()" 그룹화 사용

 

--" [속성명="속성값"] " 속성사용

-- "lorem", "lorem숫자" dummy 텍스트

--폼양식 사용

>>form:

>>form:post

>>form:get

 

>>input:text

>>input:button

>>input:checkbox