Vue day1
5306 ワード
npm install -g @vue/cli
イベントハンドラ
vue를 사용할 수 있게 도와주는것
vue createプロジェクト名터미널 명령어로 vue 프로젝트를 생성할 수 있다.
node.なぜjsをインストールしますか?node.js를 설치하면 npm을 사용할 수 있다.
npm이란? : 각종 웹 개발 라이브러리 설치 도우미 ex)npm run serve..
App.vueVue의 메인페이지 (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に関数を書き込む場合Reference
この問題について(Vue day1), 我々は、より多くの情報をここで見つけました https://velog.io/@bob0714/Vue-day1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol