Vue 등급의 실례를 만들 수 있는 구조기의 쓰기 학회편 Part1

5646 단어 인스턴스Vue.js구조기
※ 이 내용은 Vue입니다.js 입문부터 응용 프로그램 개발을 실천할 때까지 P36~P42를 배웠을 때의 자기이해 노트다.

복습~복습


자세한 내용은 지난번 기사를 보십시오↓
Vue.js~도입, 기본 단어의 정의, 생각~
기본적으로 Vue 클래스 인스턴스는 Vueインスタンス입니다.다음과 같이 표시됩니다.
let Vueインスタンス　= Buttonクラス（ 属性を私が代入するもの ）;
(Vue 클래스에 의해 정의된 Vue 구조자에 의해 정의됨)
Vue.js 조작 실례.그래서 이제 실례를 만드는 구조기의 쓰기를 배워보자.

구조기의 작법


구조기 쓰기 학습의 서장으로 Vue.js가 어떻게 처리되는지 확인하세요.
[뷔의 처리 순서 확인!]
0. 쓰기 구조기
1. Vue 인스턴스 생성
2. HTML 섹션에 Vue 인스턴스 적용(DOM에 설치됨)
이런 순서.
지금부터 속성 확인을 시작합니다.el 속성은 Vue 인스턴스에서 대체할 DOM을 지정하고 Vue를 지정합니다.js로 생성된 DOM으로 바꾸기.
Vue 실례를 만들기 위해 Vue 클래스를 사용했지만 (Vue.js를 사용하여 개발한 개발자) Vue 클래스를 정의하지 않았습니다. (프로그램 라이브러리에 쓰려면 그 기회가 있을 수 있습니다.)Vue 클래스에 대해 정의된 옵션 대입 값일 뿐입니다.잊을 수 없는 규칙이 하나 더 있다.그것은 실례를 생성할 때 구조기의 매개 변수는 반드시 사전형이어야 한다는 것이다.
이 두 가지의 기본을 기억하더라도 바로 Vue에서 생성된 DOM을 DOM 요소에 설치하고 어떻게 된 일인지 실천하면서 배운다.

導入の基本　


Vue.도입 원가와 학습 원가가 낮은 것이 중점이다.다음script만 기술하면 시작할 수 있습니다.<script src="https://unpkg.com/[email protected]"></script> 라벨에 쓰십시오.
그런 다음 Vue 클래스의 옵션에 데이터를 대입하여 인스턴스(객체)를 생성하므로 다음을 준비합니다.
<script>
var app = new Vue({
})
</script>
DOM 요소를 요약하면 다음과 같이 시작합니다.
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/[email protected]"></script>
    <title>初めてのVueJs</title>
</head>

<script>
var app = new Vue({
    // オプションにデータを代入していく
})
</script>
다음은 el,mount,data!
DOM 요소에 설치하는 방법은 el입니다.$mount 옵션이 수락되지 않은 경우 el는 수동으로 Vue 인스턴스의 채우기를 시작합니다(DOM 요소와 연관되지 않음).data 속성은 마운트하고 표시하는 속성입니다.
속성이 뭐예요?이런 느낌이니까 윈도 속성을 예로 들어 생각해 보세요.
창 속성
window.vm = vm
이른바 widow 속성이란 브라우저에 이미 존재하는 전역 대상이다.
새 창에 연결된 전역 변수는 vm에 대입하여 전역 대상에 등록합니다.
참고로 JS는 납품을 참조합니다.아래의 생각을 참조하시오.
b = 5
a = b
a = 10

この時bは
値渡し : b = 5
参照渡し : b = 10（abをaに代入する時に、aとbが紐づいてしまう）
그러니까 창문.vm를 변경하면 vm도 변경됩니다.
같은 변수를 사용했다면 참고로 납품하면 덮어쓰이기 때문에 주의해야 합니다.하지만 이런 상황을 피할 방법이 있는 것 같다.(상세한 상황은 데이터가 함수를 통해 전달하는 것을 배울 때)
console.log(vm)
개발 도구에 Constore를 표시하고 상기 정보를 입력하면 다음과 같은 정보를 볼 수 있습니다있어, 없어.

예컨대
console.log(vm.$〜〜)
면 방문할 수 있습니다.
입력 시도console.log(vm.$el)
<div id="app">
  <p> hoge </p>
</div>
이렇게 하면 constore에 표시되는지 확인할 수 있습니다.
$로 시작하는 속성과 메서드는 Vue입니다.이 정보는 js에서 제공되며, 자신이 필요로 하는 정보를 얻을 수 있습니다.값의 변경을 감시할 수도 있고 디버깅에 사용할 수도 있다.그리고(밑줄을) 시작한 것은 거의 만지지 않는다.

데이터 변경을 모니터링하고 View를 다시 그리거나 DOM 요소를 업데이트합니다.


예를 들어, 개발자 도구의 Constore
vm.items[0].name = 'hogehoge'
그리고 Enter 키를 누르면 View에 표시된 "hoge"가 "hogehoge"가 되었는지 확인할 수 있습니다.

$watch 방법으로 감시

$watch(
    第一引数には監視対象値を返す関数 function(){}の形,
    第二引数には値が変わった場合に呼ばれるコールバック関数function(){}の形
    )
↓ 실제 코드
vm.$watch(function() {
    // hogeの量
    return this.items[0].quantity
  }, function(quantity) {
      // hogeの値が更新されたらConsoleで量を表示
      console.log(quantity)
  })

끝말


이번 보도에서el옵션,데이터속성,mount방법,watch방법을 배웠습니다.
다음은 P43~의 내용 템플릿 문법부터 배웁니다.
다음 기사(예정)
Vue 등급의 실례를 만들 수 있습니다~ 구조기의 쓰기 학습편 Part2~
• 데이터 바인딩
• 데이터 바인딩 텍스트 확장
지도성
C#에서 yield 사용 방법 설명
MFC의 문서 보기 프레임과 문서 템플릿 간의 관계

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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