vue 라이프사이클, vue 인스턴스, 템플릿 구문-JS 튜토리얼-php.cn

이번에는 vuelifecycle, vue 인스턴스, 템플릿 구문을 가져왔습니다. vue lifecycle, vue 인스턴스, 템플릿 구문을 사용할 때 Notes는 무엇인가요?

Vue는 탄생 이후 조용한 틈새 프레임워크에서 중국의 3대 프레임워크 중 하나로 발전했으며, 초기 버전부터 현재 2.5.13(2018.1.26 현재 안정 버전, 2014~2018)까지 발전했습니다.

요점으로

Vue.js는 매우 인기 있는 JavaScript MVVM 라이브러리로, 데이터 기반 및 구성 요소화된 아이디어로 구축되었습니다. Angular.js와 비교하여 Vue.js는 더 간단하고 이해하기 쉬운 API를 제공하므로 Vue.js를 빠르게 시작하고 사용할 수 있습니다.

이전 블로그에서 Vue의 설치와 Webpack의 기본 구성을 소개한 데 이어, 이번 글에서는 Vue와 Vue의 사용법을 소개하겠습니다.

이전에 jQuery를 사용하여 DOM을 조작하는 데 익숙했다면 Vue.js를 배울 때 DOM을 수동으로 조작한다는 생각은 접어두시기 바랍니다. Vue.js는 데이터 기반이므로 별도의 작업이 필요하지 않기 때문입니다. DOM을 수동으로 조작합니다. 특별한 HTML 구문을 통해 DOM과 data를 바인딩합니다. 바인딩을 생성하면 DOM은 데이터와 동기화 상태를 유지하며 데이터가 변경될 때마다 그에 따라 DOM이 업데이트됩니다.

물론 Vue.js를 사용할 때 jQuery와 같은 다른 라이브러리와 함께 사용할 수도 있습니다.

이 기사의 내용이 좋다고 생각하시면 좋아요를 눌러주세요. 나중에 github에 데모를 업로드하겠습니다.

좋은 것들

vue를 배우고 싶다면 HTML, CSS, JavaScript에 대한 중급 지식이 있어야 합니다.
프런트엔드 개발을 이제 막 배우기 시작했다면 프레임워크를 첫 번째 단계로 사용하는 것이 최선의 방법이 아닐 수도 있습니다. 기본 사항을 숙지한 후 다시 오세요! 다른 프레임워크에 대한 이전 경험이 도움이 되지만 필수는 아닙니다. (공식 홈페이지의 원문입니다.)

1. 첫 번째 단계, Vue 라이프사이클 테이블

Vue 라이프사이클 테이블을 잘 익히려면 반드시 이해가 필요합니다

깊은 인상과 이해를 위해 공식 웹사이트 라이프사이클 아이콘에 주석을 달아주세요(주소가 포함된 소스 네트워크 다이어그램) )

2.vue 인스턴스

모든 Vue 애플리케이션은 Vue 함수를 사용하여 새로운 Vue 인스턴스를 생성하는 것으로 시작됩니다:

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

로그인 후 복사

3. 인스턴스 수명 주기 후크

각 Vue 인스턴스는 생성될 때 일련의 단계를 거칩니다. 프로세스 - 데이터 바인딩 설정, 메소드 매개변수 전달, DOM에 인스턴스 마운트, 데이터 변경 시 DOM 업데이트 등이 있습니다. 동시에 라이프사이클 후크라는 일부 기능이 프로세스 중에 실행되어 여러 단계에서 자신의 코드를 추가할 수 있습니다.

예를 들어, 마운트된 후크는 인스턴스가 생성된 후 코드를 실행하는 데 사용될 수 있습니다.

new Vue({
  data: {
    a: 1
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log(&#39;a is: &#39; + this.a)
  }
})
// => "a is: 1"

로그인 후 복사

업데이트 및 삭제와 같은 인스턴스 수명 주기의 여러 단계에서 호출되는 다른 후크도 있습니다. 수명 주기 후크의 this 컨텍스트는 이를 호출한 Vue 인스턴스를 가리킵니다.

3. 템플릿 구문

Vue.js는 HTML 기반 템플릿 구문을 사용하므로 개발자는 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있습니다. 모든 Vue.js 템플릿은 합법적인 HTML이며 사양을 따르는 브라우저 및 HTML 파서로 구문 분석될 수 있습니다.

기본 구현에서 Vue는 템플릿을 가상 DOM 렌더링 기능으로 컴파일합니다. 반응형 시스템과 결합된 Vue는 다시 렌더링해야 하는 구성 요소 수를 지능적으로 계산하고 DOM 작업 수를 최소화할 수 있습니다.

가상 DOM에 익숙하고 JavaScript의 강력한 기능을 선호하는 경우 선택적 JSX 구문을 사용하여 템플릿 없이 직접 렌더링 함수를 작성할 수도 있습니다. (공식 웹사이트의 원본 단어)

3.1. 텍스트 보간

가장 일반적인 데이터 바인딩 형식은 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간입니다.

<span>Message: {{ msg }}</span>

로그인 후 복사

Mustache 태그는 해당 항목의 msg로 대체됩니다. 데이터 객체 속성의 값입니다. 바인딩된 데이터 개체의 msg 속성이 변경될 때마다 보간 지점의 내용이 업데이트됩니다.

vue는 기본 양방향 바인딩입니다. 양방향 바인딩을 원하지 않는 경우 일회성 데이터에 v-once 명령을 사용하세요. 하지만 노드의 모든 데이터 바인딩에 영향을 미치니 주의하세요.

<span v-once>这个将不会改变: {{ msg }}</span>

로그인 후 복사

3.2, 원본 HTML

이중 중괄호는 데이터를 HTML 코드가 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 v-html 지시문을 사용해야 합니다.

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

로그인 후 복사

사이트에서 동적으로 렌더링된 임의 HTML은 XSS 공격으로 쉽게 이어질 수 있으므로 매우 위험할 수 있습니다. 신뢰할 수 있는 콘텐츠에만 HTML 보간을 사용하고 사용자 제공 콘텐츠에는 절대 사용하지 마세요.

3.3. JavaScript 사용 Expressions

지금까지 vue 템플릿에서 vue는 간단한 속성 키 값만 바인딩했습니다. 그러나 실제로 모든 데이터 바인딩에 대해 Vue.js는 완전한 JavaScript 표현식 지원을 제공합니다.

{{ number + 1 }}
{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
<div v-bind:id="&#39;list-&#39; + id"></div>

로그인 후 복사

3.4. 명령

명령은 v- 접두사가 붙는 특수 속성입니다. 지시어 속성의 값은 단일 JavaScript 표현식이어야 합니다(v-for는 예외입니다). 지시문의 역할은 표현식 값이 변경될 때 관련 효과를 DOM에 반응적으로 적용하는 것입니다. 소개에서 본 예를 검토하세요

<p v-if="seen">现在你看到我了</p>

로그인 후 복사

v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

3.4.1、参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

로그인 후 복사

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

로그인 후 복사

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

3.4.2、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写: