입문

약 2개월 전, Vue.js에 관해서 나는 아래의 책으로 공부를 시작했다.
2주 정도 공부해서 만든 ToDo 리스트를 살짝 정리해 보면 다음과 같습니다.(Bootstrap으로 설계되어 상태 버튼 하나만 추가됨)
이후 라라벨과의 그룹 제작을 목표로 라라벨 공부에 전념하고 있다.
최근에 드디어 Laravel과 Vue의 합작을 이해했습니다. 어쨌든 Vue.나는 js로 새로운 투자조합의 전단을 만들고 싶다...
손은 조금도 움직이지 않는다.전혀 기억이 안 나요.슬프다울다
2주 정도 공부했지만 한 달이 지나고 눈치챘을 때 머릿속이 완전히 빠져버렸어요...기억력은 이렇다
그래서 다시 복습하는 김에 Vue.나는 js의 기본을 보도로 총결하였다.(향후 메모 작성)
※ 워드프레스에 정리된 것을 복사하는 동안 책상 모양이 붕괴되었습니다...본 기사에 신경을 쓰신다면 아래의 내용에서 보실 수 있기를 바랍니다...

Vue.표시 js

우선 Vue.js로 Hello world 해봐.

index.html

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="main.js"></script>

앱의 안쪽에 템플릿을 씁니다.

인터넷 환경에 연결할 수 있는 경우 Vue입니다.CDN은 js 설치에 사용할 수 있습니다.
주 표기법을 사용하여 {{{}}에 속성 이름을 기술할 때 그 값을 묘사합니다.

main.js

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

구조 함수(클래스 인스턴스를 생성할 때 실행하는 방법) Vue를 사용하여 루트 Vue 인스턴스를 생성합니다.
데이터 내의 데이터를 템플릿 옆으로 보냅니다.변수화된 후에도 컨트롤러에서 접근할 수 있지만 반드시 필요한 것은 아니다.

실제 드로잉

<p>hello</p>

기본 기능 (지령/내장 구성 요소)

v-bind

클래스, 스타일, 속성 등의 레이블에 귀속됩니다. ※ustache {{{{{}}}는 텍스트 내용 특유의 표시이기 때문에 표시에서 사용할 수 없습니다.

<input type="text" v-bind:value="message">

생략 모드

<input type="text" :value="message">

v-for

목록 데이터 중복 묘사 요소를 사용할 때 중복하고자 하는 라벨을 사용합니다.

v-on

클릭 시 요소 변경과 같은 DOM 이벤트 처리(이벤트)는 처리할 때 사용됩니다.
※ 고양이 노트에서는 활동과 관련된 처리 내용을'활동 처리 프로그램'이라고 하고, 활동 처리 프로그램과 활동 관련을'핸들'이라고 합니다.

<button v-on:click="handleClick">クリック</button> <!--handleClickはコンポーネントのmethodsオプションに定義-->

약어 "@"

<button @click="handleClick">クリック</button>

v-model

데이터와 폼 입력 항목을 귀속(동기화)하는 데 사용합니다.
아래에서 표의 문자를 편집할 때 화면의 메시지를 동기적으로 업데이트합니다.

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  }
})

v-if

속성이 진짜일 때만 조건 브랜치에 템플릿을 그립니다.조건이 충족되지 않을 때 평론을 하다.유사한 지령은 v-show가 있습니다. 이것은 스타일 = "display:none;"의 규격화 거리의 멱 함수.
태그는 여러 요소를 그룹화할 수 있습니다.

<templete v-if="ok">
  <h1>タイトル</h1>
  <p>コンテンツ</p>
</templete>

또한 v-else-if, v-else를 조합하여 여러 조건을 지정할 수 있습니다.

<transition> 태그

내장 구성 요소.CSS 변환 및 애니메이션을 쉽게 적용할 수 있습니다.

기본 옵션 구성

Vue 클래스 인스턴스 템플릿 생성

//main.js

vue = Vue.new({
  el: '#app',
  data: {
    message: "Hello Vue.js"
  },
  computed: {
    computedMessage: function(){ 
      return this.message + "!"
    },
  },
  created: {
  // アクションフック
  },
  methods: {
    myMethod: function(){
    },
  },
})

el:mount 요소

응용 프로그램의 선택기를 연결합니다.

data:

응용 프로그램에 사용할 데이터를 등록합니다.

computed:

속성을 계산합니다.함수로 계산된 데이터.
방법에 this를 추가합니다.
템플릿의 가독성을 유지하기 위해 여기에 기술합니다.

created:

생명주기 하크.특정 시간에 자동으로 호출됩니다.호출하고 싶은 시기에 따라 방법을 바꾸다.
인터럽트 처리의 구조를'연결'이라고 부른다

methods:

응용 프로그램 사용 방법.
코드 관리에 편리하도록 구분 처리, 이벤트 처리 프로그램 등 상세한 설치를 책임진다.

구성 요소

이것은 기능이 있는 모든 UI 위젯의 템플릿과 자바스크립트를 하나의 그룹으로 하여 다른 UI 위젯과 분리하여 개발하고 관리할 수 있는 구조이다.설계도.재활용이 쉬워지다.
※ UI(User Interface)는 사용자가 PC와 상호작용할 때 입력 및 표시 방법 등의 구조를 말합니다.

index.html

<h1>Vue.js</h1>
<div id="app">
  <hello />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('hello',
{
  template: '<p>Hello!</p>'
})
var app = new Vue({
  el: '#app',
});
</script>

구성 요소 정의

Vue.이름, {정보 설정};

어셈블리 내보내기

구성 요소 이름
 

<h1>Vue.js</h1>
<div id="app">
  <mycomponent />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var component = {
  template:'<p>localcomponent</p>'
}
new Vue({
  el: '#app',
  components: {
    'mycomponent':component
  }
});
</script>

로컬 구성 요소 등록

Vue 객체의 "components"속성을 등록하면 이 구성 요소의 역할 영역에서만 사용할 수 있습니다.
components: {'구성품 표시': 구성 요소 이름}
※Vue.components는 전역 구성 요소입니다.
부모 세대와 하위 세대 사이의 구성 요소 데이터 흐름은'부자 세대에서 하위 세대로'와'사용자 정의 이벤트 $emit (자자 세대에서 부모 세대로)'를 사용합니다.
 
확장 프레임워크에는 Nuxt.js 및 VuePress가 포함됩니다.
"Vuex"와 "Vue Router"등 확장 라이브러리를 가져오면 목적에 따라 효과적으로 배율을 조정할 수 있습니다.
또한 UI 구성 요소 웹 사이트에는 "Element"와 "Onsen UI"가 있습니다.

용어

명령

템플릿과 논리를 연결하는 기능.템플릿에서 "v-if"등 자신의 속성으로 기술합니다.처리 매개 변수와 수식자를 선택할 수도 있습니다.

적재

설정된 요소와 응용 프로그램을 연결합니다.

데이터 바인딩

데이터와 묘사를 동기화하는 구조(JavaScript의 데이터와 이 데이터를 사용하는 위치를 연결하고 데이터에 변화가 있으면 자동으로 DOM을 업데이트합니다).시스템을 다시 활성화하는 기능 중 하나입니다.

DOM(Document Object Model)

JavaScript에서 html 요소를 조작하는 데 사용되는 구조입니다.(서류의 특정 부분에 표시를 하기 위해'이 부분'은'이런 일을 하고 싶다'는 처리를 할 수 있도록 하는 규정이다.)

탭 페이지에서 항목 작성 또는 편집

Vue 인스턴스에서 사용할 데이터 또는 메서드의 위치를 정의합니다.

이번 총결산에서 사랑을 끊은 일

템플릿 제어 명령 (예: v-pre 또는 v-html)
각 명령의 수식자
스크롤 이벤트 가져오기(부드럽게 스크롤) P114
계산 속성 세부 정보 (흡수기 및 설정기, 캐시 및 스위치 옵션)
어셈블리 부자 간 데이터 스트림 P154
전환 P194
Vue CLI P216
Vuex P252
Vue Router P282

예비 지식

jQuery와 함께 사용

Vue.js를 사용하면 jQuery(DOM 운영 라이브러리)를 동시에 사용할 기회가 줄어듭니다.마운트된 요소 내의 DOM을 직접 조작해도 가상 DOM이 업데이트되지 않고 데이터가 변경되지 않기 때문입니다.
DOM을 직접 참조하려면 $el 또는 $refs 등의 사용자 지정 명령을 사용합니다.

느끼다

복습을 해보니 이번 할애의 각 지령의 수식부호는 상당히 중요한 역할을 발휘했고 수량이 많아서 파악하기 어려웠다.우선 조합에 과도적인 텍스트 애니메이션을 설치하여 공부하세요.
Vue Router에서도 SPA는 동경하지만 Vue CLI의 도입은 필수적이기 때문에 우선 Vue CLI를 도입하지 않고 할 수 있는 곳부터 조합 제작에 활용하면서 공부합니다.

웹 페이지 정보

고양이 공식 지원 페이지
고양이 소스 코드github
자바스크립트 초보자도 바로 알아!DOM이란 무엇입니까?
Vue.동정이가 고양이 책을 읽고 얻은 것 ①

앞으로 활용하고 싶은 튜토리얼 등

Vue.js/Vuex를 사용하여 Trello풍 어플리케이션 만들기!
Vue CLI 활용
Vue.js & Firebase로 트위터의 SNS 앱을 만들어 보세요!
Vue CLI 사용(Vue Router Ali, Vuex 제외)
Nuxt.js & Contentful로 높은 규격의 조합 사이트를 간단하게 공개합니다!【JAMstack】