소개하다

준비됐나요?

• Vue.js

Vue(/vju?/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한
• 프로그레시브 프레임워크

  입니다. 다른 대형 프레임워크와 달리 Vue는 아래에서 위로 레이어별로 적용되도록 설계되었습니다. Vue의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다. 반면에 현대적인 도구 체인 및 다양한

  지원 라이브러리
와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션을 위한 드라이버를 완벽하게 제공할 수도 있습니다.

• Vue에 대해 자세히 알아보고 싶다면 Vue의 핵심 개념과 샘플 프로젝트를 안내하는 동영상을 제작했습니다.

이미 숙련된 ​​프런트엔드 개발자이고 Vue와 다른 라이브러리/프레임워크의 차이점을 알고 싶다면
• 다른 프레임워크 비교

  를 확인하세요.

• 시작하기

  • 공식 가이드에서는 사용자가 HTML, CSS 및 JavaScript에 대한 중간 수준의 지식을 가지고 있다고 가정합니다. 방금 프런트 엔드 개발을 배우기 시작했다면 첫 번째 단계로 프레임워크를 사용하는 것이 최선의 아이디어가 아닐 수도 있습니다. 기본 사항을 숙지하고 돌아오세요! 다른 프레임워크에 대한 이전 경험이 도움이 되지만 필수는 아닙니다.

  설치

• Vue.js를 사용해 보는 가장 쉬운 방법은 JSFiddle에서 Hello World 예제를 사용하는 것입니다. 브라우저의 새 탭에서 열고 예제를 따라 몇 가지 기본 사용법을 배울 수 있습니다. 또는 .html 파일.html 文件，然后通过如下方式引入 Vue：

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  或者：

  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

  如果你喜欢交互式的东西，你也可以查阅这个 Scrimba 上的系列教程，它揉合了录屏和代码试验田，并允许你随时暂停和播放。

  
  

  声明式渲染

  ---

  Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
  

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

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

  输出：

  Hello Vue!

  我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

  除了文本插值，我们还可以像这样来绑定元素特性：

  <div id="app-2">
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  })

  输出：
  

  鼠标悬停几秒钟查看此处动态绑定的提示信息！

  这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

  如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

  
  

  条件与循环

  ---

  控制切换一个元素是否显示也相当简单：
  

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

  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })

  输出：

  现在你看到我了

  继续在控制台输入 app3.seen = false을 만든 후 ​​다음과 같이 Vue를 소개할 수 있습니다:

  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>

  🎜또는: 🎜

  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  })

  🎜설치 튜토리얼🎜에서는 Vue를 설치하는 더 많은 방법을 제공합니다. 특히 Node.js 기반 빌드 도구에 익숙하지 않은 경우 초보자가 vue-cli를 직접 사용하는 것을 권장하지 않습니다. 🎜🎜대화형 작업을 좋아한다면 녹화 화면과 코드를 결합한 Scrimba 튜토리얼 시리즈🎜를 확인해 보세요. 시험장이며 언제든지 일시 중지하고 플레이할 수 있습니다. 🎜🎜
  🎜

  선언적 렌더링

  ---

  🎜핵심적으로 Vue.js는 간결한 템플릿 구문을 사용하여 DOM에 데이터를 선언적으로 렌더링할 수 있는 시스템입니다.
  🎜

  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
  </div>

  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

  🎜출력:🎜

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

  🎜첫 번째 Vue 애플리케이션을 성공적으로 만들었습니다! 문자열 템플릿을 렌더링하는 것과 매우 유사해 보이지만 Vue는 뒤에서 많은 작업을 수행합니다. 이제 데이터와 DOM이 연결되었으므로 모든 것이 반응됩니다. 이것을 어떻게 확인하나요? 브라우저의 JavaScript 콘솔(이 페이지에서 열림)을 열고 app.message 값을 수정하면 그에 따라 위의 예제 업데이트가 표시됩니다. 🎜🎜텍스트 보간 외에도 다음과 같이 요소 속성을 바인딩할 수도 있습니다. 🎜

  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!'
    }
  })

  // 定义名为 todo-item 的新组件
  Vue.component('todo-item', {
    template: '<li>这是个待办项</li>'
  })

  🎜출력:
  🎜

  <ol>
    <!-- 创建一个 todo-item 组件的实例 -->
    <todo-item></todo-item>
  </ol>

  🎜여기서 새로운 것을 발견합니다. 표시되는 v-bind 기능을 지시문이라고 합니다. 지시문에는 Vue에서 제공하는 특수 기능임을 나타내기 위해 v- 접두사가 붙습니다. 짐작할 수 있듯이 렌더링된 DOM에 특별한 반응 동작을 적용합니다. 여기서 이 지시문의 의미는 "이 요소 노드의 title 속성을 ​​Vue 인스턴스의 message 속성과 일치하게 만드세요."입니다. 🎜🎜브라우저의 JavaScript 콘솔을 다시 열고 app2.message = 'New Message'를 입력하면 이 바인딩된 title 속성이 다시 HTML이 업데이트된 것을 볼 수 있습니다. 🎜🎜
  🎜

  조건 및 주기

  ---

  🎜요소 표시 여부를 제어하는 ​​것도 매우 간단합니다.
  🎜

  Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop"，类似于一个自定义特性。
    // 这个 prop 名为 todo。
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })

  <div id="app-7">
    <ol>
      <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量，即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”，稍后再
        作详细解释。
      -->
      <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
    </ol>
  </div>

  🎜출력: 🎜

  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })
  var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    }
  })

  🎜콘솔에 app3.seen = false를 계속 입력하면 다음을 확인할 수 있습니다. 이전에 표시된 메시지가 사라집니다. 🎜

  이 예는 데이터를 DOM 텍스트나 속성뿐만 아니라 DOM 구조에도 바인딩할 수 있음을 보여줍니다. 또한 Vue는 Vue가 요소를 삽입/업데이트/제거할 때 자동으로 전환 효과를 적용할 수 있는 강력한 전환 효과 시스템을 제공합니다.

  각각 특별한 기능을 가진 다른 많은 명령이 있습니다. 예를 들어, v-for 지시문은 배열 데이터를 바인딩하여 항목 목록을 렌더링할 수 있습니다. v-for 指令可以绑定数组的数据来渲染一个项目列表：

  <div id="app">
    <app-nav></app-nav>
    <app-view>
      <app-sidebar></app-sidebar>
      <app-content></app-content>
    </app-view>
  </div>

  rrreee

  输出：

  

  在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

  
  

  处理用户输入

  为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

  rrreeerrreee

  输出：
  

  

  注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

  Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

  rrreeerrreee

  输出：

  

  组件化应用构建

  组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

  

  在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

  rrreee

  现在你可以用它构建另一个组件模板：

  rrreee

  但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：

  rrreee

  现在，我们可以使用 v-bindrrreeerrreee

  출력:

  
  

  콘솔에서 app4.todos.push({ text: '새 프로젝트 ' }) 목록 끝에 새 항목이 추가된 것을 확인할 수 있습니다.

  🎜🎜

  🎜사용자 입력 처리🎜

  🎜사용자가 애플리케이션과 상호작용할 수 있도록 하기 위해 , v-on 지시어를 사용하여 이벤트 리스너를 추가하고 Vue 인스턴스에 정의된 메서드를 호출할 수 있습니다: 🎜rrreeerrreee🎜출력: 🎜🎜🎜🎜🎜 reverseMessage 메소드에서, DOM을 건드리지 않고 애플리케이션의 상태를 업데이트했습니다. 모든 DOM 작업은 Vue에 의해 처리되며, 작성하는 코드는 논리 수준에만 집중하면 됩니다. 🎜🎜Vue는 양식 입력과 애플리케이션 상태 간의 양방향 바인딩을 쉽게 달성할 수 있는 v-model 지시문도 제공합니다. 🎜rrreeerrree🎜출력: 🎜🎜🎜

  🎜컴포넌트 기반 애플리케이션 구축🎜

  🎜컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 작고 독립적이며 종종 재사용 가능한 구성 요소를 사용하여 대규모 애플리케이션을 구축할 수 있게 해주는 추상화이기 때문입니다. 주의 깊게 생각해 보면 거의 모든 유형의 애플리케이션 인터페이스가 구성 요소 트리로 추상화될 수 있습니다: 🎜🎜🎜🎜Vue에서 구성 요소는 본질적으로 사전 정의된 옵션이 있는 Vue 인스턴스입니다. Vue에 컴포넌트를 등록하는 것은 간단합니다: 🎜rrreee🎜 이제 이를 사용하여 다른 컴포넌트 템플릿을 만들 수 있습니다: 🎜rrreee🎜 하지만 이는 모든 할일 항목에 대해 동일한 텍스트를 렌더링하므로 멋져 보이지 않습니다. 상위 범위에서 하위 구성 요소로 데이터를 전달할 수 있어야 합니다. prop🎜: 🎜rrreee🎜이제 v-bind를 사용할 수 있도록 구성 요소 정의를 수정해 보겠습니다. 지시어는 루프 출력의 각 구성 요소에 할 일 항목을 전달합니다. 🎜rrreeerrreee🎜출력: 🎜🎜🎜🎜🎜

  이것은 단지 의도적인 예일 뿐이지만 애플리케이션을 두 개의 작은 단위로 분할했습니다. 하위 유닛은 소품 인터페이스를 통해 상위 유닛과 잘 분리됩니다. 이제 <todo-item> 구성 요소를 더욱 개선하여 상위 단위에 영향을 주지 않고 더 복잡한 템플릿과 논리를 제공할 수 있습니다. <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。

  在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。在 后续教程 中我们将详述组件，不过这里有一个 (假想的) 例子，以展示使用了组件的应用模板是什么样的：

  rrreee

  
  

  与自定义元素的关系

  你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is

  대규모 애플리케이션에서는 개발을 보다 쉽게 ​​관리할 수 있도록 전체 애플리케이션을 구성 요소로 나누어야 합니다. 다음 튜토리얼
  에서 구성 요소를 자세히 다룰 예정이지만, 여기에 구성 요소를 사용하는 애플리케이션을 보여주는 (가상의) 예가 있습니다. 템플릿은 다음과 같습니다:
  1. rrreee

  2. 사용자 정의 요소와의 관계

  Vue 구성 요소를 눈치채셨을 수도 있습니다.

  Custom과 매우 유사합니다. Elements - Vue의 구성 요소 구문 섹션이 이 사양을 참조하기 때문에 웹 구성 요소 사양의 일부입니다. 예를 들어 Vue 구성 요소는 Slot API

  및 is 속성입니다. 그러나 몇 가지 주요 차이점이 있습니다.

  
  

  웹 구성 요소 사양이 완성되어 채택되었지만 모든 브라우저에서 기본적으로 구현되지는 않습니다. 현재 Safari 10.1+, Chrome 54+, Firefox 63+는 기본적으로 웹 구성 요소를 지원합니다. 이와 대조적으로 Vue 구성 요소는 폴리필이 필요하지 않으며 지원되는 모든 브라우저(IE9 이상)에서 일관되게 작동합니다. 필요한 경우 Vue 구성 요소를 기본 사용자 정의 요소로 래핑할 수도 있습니다. Vue 구성 요소는 순수 사용자 정의 요소에는 없는 몇 가지 중요한 기능, 특히 교차 구성 요소 데이터 흐름, 사용자 정의 이벤트 통신 및 빌드 도구 통합을 제공합니다.

  Vue는 내부적으로 사용자 정의 요소를 사용하지 않지만 애플리케이션이 사용자 정의 요소를 사용하거나 사용자 정의 요소의 형태로 게시되면
  여전히 상호 운용성이 좋습니다

  . Vue CLI는 Vue 구성 요소를 기본 사용자 정의 요소로 구축하는 것도 지원합니다.
  🎜🎜🎜🎜🎜준비됐나요? 🎜🎜🎜🎜우리는 핵심 Vue의 가장 기본적인 기능을 간략하게 다루었습니다. 이 튜토리얼의 나머지 부분에서는 이러한 기능과 기타 고급 기능을 더 자세히 다룰 것이므로 전체 튜토리얼을 꼭 읽어보세요! 🎜🎜🎜🎜🎜 🎜