Vue day1

5306 ワード

npm install -g @vue/cli
vue를 사용할 수 있게 도와주는것 
vue createプロジェクト名
터미널 명령어로 vue 프로젝트를 생성할 수 있다.
node.なぜjsをインストールしますか?
node.js를 설치하면 npm을 사용할 수 있다.
npm이란? : 각종 웹 개발 라이브러리 설치 도우미 ex)npm run serve..
App.vue
Vue의 메인페이지 (HTML의 index.html)이라고 생각하면 편해용
node_modules
프로젝트에서 쓰는 라이브러리들의 보관소
package.json
라이브러리 버전, 프로젝트 설정등을 기록하는 곳
>{データバインド}
-JS 데이터를 HTML 에 꽂아넣는 문법
-데이터는 object 자료로 저장해야해요 : {자료이름  :자료내용}
どうしてこの文法を書きますか.いつ使いますか.ぜひ知っておきたい!
1. HTML 하드코딩을 해놓으면 나중에 변경하기 어려움
2. Vue는 실시간 자동 렌더링을 지원하기 때문 == web-app 만들떼 매우 유용!!
3. 자주 변할거 같은 데이터들은 데이터로 보관하고 데이터바인딩을 통해 꽂기
HTML属性はデータをバインドすることもできます!
-단 {{}} 이 문법이 아니라 :속성="데이터 이름"
<h4 class="red" :style="스타일">XX 원룸</h4>
>Vue反復文
	<a>Home</a>
    <a>Home</a>
    <a>Home</a>
    <a>Home</a>
    <a>Home</a>
    <a>Home</a>
    벌써부터 어질어질하죠?
    <a v-for = ?? in ?? :key=" "
    <태그 v-for =”a in 6” :key : “a”>
>Vue復述特徴1
변수 작명은 2개까지 가능함
왼쪽변수 a는 array내의 데이터를 뜻
오른쪽 변수 i 는 1씩 증가하는 변수

イベントハンドラ
- HTML 클릭시 코드 실행하는법
  버튼눌렀을 때 자바스크립트 실행하려면
  전통 JS 방식은 onclick=” ”
  Vue방식은 v-on:click =” ”
  Vue방식은 @click = “ ”
  이벤트 종류는 다양함
  @clcik
  @mouseover . . .
Vueに関数を書き込む場合