Vue.js 간단한 설치 및 빠른 시작에 대한 자세한 설명-JS 튜토리얼-php.cn

Vue.js 간단한 설치 및 빠른 시작에 대한 자세한 설명

小云云

풀어 주다： 2018-01-15 13:04:34

원래의

1363명이 탐색했습니다.

이 글은 Vue.js의 간단한 설치와 빠른 시작 관련 정보를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

이전 섹션에서는 Vue.js 프레임워크를 소개했습니다. 이 섹션에서는 몇 가지 작은 코드를 작성해 볼 수 있습니다.

1 간단한 설치

Vue.js를 사용하려면 먼저 프로젝트에 설치해야 합니다. 여기서 설명하는 것은 높은 비용에 관계없이 가장 간단한 방법입니다. 시간은 js 파일을 직접 도입하고 코드를 먼저 입력하는 것입니다.

<head>
    <meta charset="UTF-8">
    <title>简易安装 Vue.js</title>
    <script src="vue.js"></script>
</head>

로그인 후 복사

공식 웹사이트는 Vue.js 소스 코드를 다운로드할 수 있는 장소를 제공합니다: https://cdn.jsdelivr.net/vue/2.1.3/vue.js

원하지 않는 경우 로컬로 다운로드하려면 직접 CDN을 사용하여 온라인 리소스를 소개할 수도 있습니다.

<script src="https://xx/vue.js"></script>

로그인 후 복사

이런 식으로 우리는 가장 간단한 방법으로 프로젝트에 Vue.js를 성공적으로 도입했습니다. npm 및 Bower와 같은 멋진 설치 방법에 대해서는 나중에 살펴보겠습니다.

2 데이터 중심 보기

가 도입된 후 사용할 수 있습니다. 가장 멋진 점은 DOM 작업을 자유롭게 하여 더 이상 복잡하고 성능이 많이 소모되는 DOM 작업을 수행할 필요가 없는 데이터 중심 보기라고 들었습니다. 그럼, 그것이 어떻게 진행되는지 봅시다!

이제 페이지의 js 개체에 있는 변수 값을 렌더링한다고 가정해 보겠습니다. 전통적인 접근 방식은 먼저 getElementById를 사용하여 DOM 노드 개체를 얻은 다음 innerHTML을 사용하여 해당 콘텐츠를 설정하는 것입니다.

이제 Vue.js에서 다음을 수행해야 합니다.

<p id="app">
  公众号：{{ name }}
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       name:"web前端教程",
     }
   });
 </script>

로그인 후 복사

new Vue()를 통해 인스턴스 vm을 생성합니다. 매개변수는 json 객체이고 el 속성은 다음에 존재하는 DOM 요소를 제공합니다. 페이지( id='app')는 이 인스턴스가 지정된 DOM 노드와 연결되어 있음을 나타냅니다.

DOM 노드에서 이중 중괄호 {{ }} 구문을 사용하여 Vue 인스턴스 객체 데이터의 기존 속성 값을 렌더링할 수 있습니다. 예를 들어 위의 경우 name 속성 값입니다. "웹 프론트엔드 튜토리얼"은 페이지에 렌더링되며, {{ 이름 }}을 대체하여 "웹 프론트엔드 튜토리얼" 효과를 표시합니다.

이 과정에서는 DOM 노드를 작동하는 코드를 작성하지 않았습니다. 또한 이전 섹션에서 말했듯이 MVVM 모드의 viewModel은 모델 데이터를 모니터링하는 경우 모니터 역할을 합니다. 변경사항인 경우 업데이트하라는 알림이 표시됩니다. 이 프로세스에는 귀하의 참여가 필요하지 않습니다.

(mvvm 검토)

시도해 보겠습니다. 이름의 값을 "hello word"로 변경하고 코드를 추가하지 않고도 페이지 보기가 자동으로 업데이트되는지 확인합니다.

아래 gif를 보고 크롬 브라우저를 통해 살펴보겠습니다.

(느리게, gif가 로드될 때까지 기다리세요)

위 그림과 같이 name 값이 변경되면, 페이지 보기를 업데이트하기 위해 innerHTML을 작성할 필요 없이 변경 사항이 즉시 발생했습니다.

Vue.js의 데이터 기반 뷰입니다.

3 양방향 바인딩

더 편리한 점은 Vue.js가 뷰와 데이터의 양방향 바인딩을 달성하기 위한 편리한 구문 지침도 제공한다는 것입니다. 즉, 데이터의 변경만이 뷰를 구동할 수 있는 것이 아니라, 또한 사용자는 페이지에서 일부 작업을 수행한 후 모델 레이어의 데이터를 업데이트하는 것도 매우 편리합니다.

예시: 사용자가 페이지 입력창에 입력한 내용을 모니터링하여 실시간으로 페이지에 업데이트합니다.

Vue에서는 v-model 지시문을 사용하여 이를 쉽게 구현할 수 있습니다. (v-model이 무엇인지 걱정하지 마십시오. 다음 장에서 자세히 소개됩니다.)

<p id="app">
   <input v-model="number">
   <p>数字:{{ number }}</p>
 </p>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       number:"",
     }
   });
 </script>

로그인 후 복사

효과는 다음과 같습니다:

(느리게, gif 이미지가 로드될 때까지 기다리세요)

이 경우 입력의 내용 변경을 모니터링하는 코드를 작성할 필요가 없습니다. 컨트롤과 사용자가 입력한 내용은 vm 인스턴스의 데이터 속성 번호 값을 실시간으로 업데이트합니다. 번호가 업데이트되면 그에 따라 뷰도 업데이트됩니다. 이 모든 것이 Vue.js에 의해 수행되기 때문입니다.

4 구성 요소

위에서 Vu.jse의 데이터 드라이버를 시연했습니다. 이전 섹션에서 Vue.js에 구성 요소화 라는 또 다른 중요한 핵심이 있다고 언급했습니다.

컴포넌트화는 페이지에서 특정 블록을 독립적으로 추출하여 쉽게 재사용할 수 있는 컴포넌트로 캡슐화하는 것입니다.

예: 페이지에 동일한 카드가 여러 개 있다고 가정합니다.

传统的办法，我们可以要写三份同样的HTML布局：

 <p id="app">
  <!--第1个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第2个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
  
  <!--第3个卡片-->
  <p class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述，很长的描述</p>
    <button>我是按钮</button>
  </p>
 </p>

로그인 후 복사

如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。

在Vue.js中，我们试着把卡片封装成一个组件。

<p id="app">
   <card></card>
   <card></card>
   <card></card>
 </p>

 <script>
  //注册一个名叫card的组件
 Vue.component(&#39;card&#39;,{
    template:`<p>
      <img src="logo.png" alt="">
      <h2>web前端教程</h2>
      <p>这里是描述，很长的描述</p>
      <button>我是按钮</button>
    </p>`
  });

  new Vue({
    el:"#app"
  });
 </script>

로그인 후 복사

我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高。

可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数，后面我们会有专门的章节来介绍组件的详细用法。

5 本节小结

看到这里，你已经了解了Vue.js的数据驱动和组件化两大核心了，你已经入门了。后面的章节都是围绕这两个核心点来展开讲解。