뷰 연구 노트 (A) 항목

사설 단어

뷰는 수집 된 자신의 감정과 경험의 조금과 함께, 주로 공식 문서를 참조하십시오, 기사의 일련의 학습

부적절는 먼저 다음 문서를 뷰의 공식을 첨부, 저를 수정하시기 바랍니다 :

자습서 : https://cn.vuejs.org/v2/guide
API : https://cn.vuejs.org/v2/api/
스타일 가이드 : https://cn.vuejs.org/v2/style-guide/
요리 책 : https://cn.vuejs.org/v2/cookbook/

1, 설치

(1)에 의해 <script>도입

학습 과정에서는 최신 버전을 사용할 수 있습니다 :

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

개발 환경에서는 명시 적 버전 (2.6.10 최신 안정 버전)를 사용하는 것이 좋습니다 :

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

프로덕션 환경에서, 우리는 압축 된 버전을 사용 :

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

개발 버전과 경고의 전체 개발 버전을 포함하는 생산 버전하지만, 생산 버전의 차이는 더 빠른 속도가

(2) NPM설치

대규모 애플리케이션을 구축 할 때, 우리는 권장 NPM(컴퓨터가 환경 관련에 대해 구성되어 있는지 확인이 이전) 설치 :

$ npm install vue

동시에, 뷰는 공식 CLI를 제공합니다, 당신은 신속하게 복잡한 발판을 구축 할 수 있습니다

$ npm install vue-cli

아주 초보자 CLI를 추천하지 않을 경우 때문에 그러나, 그래서 여기에 특정 소개하지 않습니다

2. 시작하기

뷰를 통해 각 응용 프로그램 Vue기능은 시작 뷰의 인스턴스를 만들려면

var vm = new Vue({
  // 选项
})

다음과 같이 간단한 예이다 :

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue"
            },
            methods: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

우선, 우리가 <head>하는 <script>태그 뷰를 도입

그런 다음에 표시 방법 및 메시지 데이터 reversedMessage () 태그의 결과를 반환<body><div>

다음으로, 우리는 주로 참조 우리가 생성자 뷰를 선언 탭을,<body><script>

이 간단한 뷰 생성자 각각 세 개의 파라미터를 가지고 el, data및methods

(1) 엘 - 뷰 특정 인스턴스가 마운트

엘은 CSS 선택자 (문자열 유형)는 HTMLElement를 인스턴스 일 수있다

예시적인 실시 예에서, '#app'CSS의 선택은, 뷰는 애플리케이션을 결합하는 HTML 요소의 인스턴스 ID를 보여

이후의 모든 작업은 모든 영향을받지 요소를 HTML로 위의 지정된 HTML 요소 내에있는

(2) 데이터 - 뷰 데이터 객체 인스턴스

개체 유형 중 하나의 데이터가 될 수 또는 유형의 기능이 될 수 있습니다

일반적으로, 데이터는 데이터에 따라서, 객체 (0 개 이상의 키 - 값 쌍을 포함 함) 순수한 목적이어야한다

또 다른 성분을 형성 할 때, 데이터는 초기 데이터 객체 함수를 반환 선언되어야한다는

구성 요소는 데이터 인 경우, 객체를 여러 인스턴스를 생성하는 데 사용 될 수 있기 때문에, 모든 데이터 객체의 같은 인스턴스를 공유합니다

인스턴스를 만든 후, 당신은 인스턴스 속성 수있는 vm.$data원래 데이터 개체에 대한 액세스를

동시에, 또한 에이전트 데이터 주체의 모든 속성의 예, 즉 액세스가 vm.a방문하는 것과 같습니다vm.$data.a

(3) 방법 - 뷰 방법의 예

일반적으로, 본 실시 예의 방법은 자동 뷰에 결합 될

우리는 화살표 기능을 사용할 때,이는 뷰 인스턴스에 대한 구속력이되지 않습니다이 바인딩 컨텍스트 부모 범위 때문에

방법은 뷰 인스턴스로 통합됩니다, 즉, 우리는 할 수 있습니다 vm.functionName()이러한 방법에 액세스

우리는 무엇을 배웠는가? - 옵션

데이터

데이터 √

방법 √

계산

손목 시계

소품

프로필렌 데이터

심판

√

주형

세우다

renderError

생명 후크 함수

자원

결합

다른