5분 안에 VueJS를 이해하세요.

27383 단어 webdevvuejavascriptdev
나는 최근에 줄곧 VueJS를 놀고 있다.나는 인상이 깊다.그것은 간단하고, 강하며, 매우 재미있으며, 매우 환영을 받는다.나 같은 바보도 그걸로 재미있는 일을 빨리 할 수 있다.누구나 그것으로 위대한 일을 할 수 있다는 것을 보여주기 위해서일 뿐이다.앞에 5분 남았어요?

종전


2012년 뉴욕 지역에서그때 그는 자바스크립트를 배우는 가장 좋은 생활을 하고 있었다.그는 좌우로 난처하게 작은 프로젝트를 하고 있다.그중 하나가 터졌어popularity on Hackernews!에반은 몰랐지만, 그는 구글의 주의를 끌었을 뿐이었다.

그는 곧 구글에 채용되었는데, 그의 직책은 아이디어를 혁신하기 위해 실험 프로젝트를 만드는 것이다.그는 일반적인 자바스크립트를 많이 사용했다.그는 AngularJS와 다른 프레임워크를 시도했지만, 그는 즉각 이에 대해 분노를 억제할 수 없었다.그는 그가 필요로 하는 자유를 찾지 못했다.그래서 그는 이런 틀에서 가장 좋은 부분을 추출하고 자신의 개인적인 수요에 따라 가볍고 연장할 수 있는 틀을 만들어야 한다는 생각을 하게 되었다.
2013년 7월에 VueJS가 처음으로 제출했다.기록에 남기기 위해 VueJS는 씨앗이라고 불린다.JS.근데 얘는 NPM에서 찍었어!에반은 프레임이 보기 부분을 중심으로 하기 때문에 영어에서 보기처럼 보이는 것을 원한다.그는 구글에 가서'보기'를 몇 가지 언어로 번역했다.그는 우연히 프랑스어 번역'Vue'와몇 분 후에 VueJS가 발표되었습니다.
2014년에 VueJS의 첫 번째 버전이 인터넷에 등장했다.이 프로젝트는 곧 폭발하지 않을 것이다.그러나 점점 더 많은 사람들이 그것에 대해 이야기하고 있다.오늘VueJS is in the big league.

VueJS란 무엇입니까?


VueJS는 사용자 인터페이스를 만드는 데 사용되는 Javascript 프런트엔드 프레임입니다.'한 번 더?'답은 긍정적이다.그냥 좀 달라서요.
우선 흥미로운 것은 VueJS가 증량 통합으로 설계되었다는 점이다.이것은 기존의 전방 프로그램이 있다면 모든 것을 다시 할 필요가 없다는 것을 의미한다.VueJS에서 새 부품을 작성하여 다른 부품과 빠르게 통합할 수 있습니다.
VueJS도 모든 전면 프레임에서 가장 사용하기 쉽다.이것이 바로 나를 백엔드 개발자로 끌어들인 이유다.아주 빨리, 나는 앞장서서 일을 좀 했다!나 놀랐어!문서와 테스트 자료를 읽는 몇 시간 동안 나는 모든 기본 지식을 이해했다.나는 이미 운송 전단에 있다.

VueJS는 경쟁사로부터 좋은 아이디어를 얻기도 했다.데이터 연결을 허용합니다.데이터와 DOM은 결합되어 변화에 반응한다.VueJSthe concept of virtual dom와 관련이 있다는 사실도 알아냈습니다.DOM은 직접 변경되지 않고 가상 DOM을 거칩니다.
우리는 또 발견했다the organization by component.이 기능은 응용 프로그램을 여러 개의 하위 구성 요소로 나누어 각각의 생명 주기를 관리하고 다시 사용할 수 있도록 합니다.이미지 목록을 만들려고 합니다. 이미지를 관리하는 구성 요소와 이미지 구성 요소 목록을 관리하는 구성 요소를 만들 수 있습니다.
이것은 매우 좋은데, 그것은 어떻게 일을 합니까?

그것은 어떻게 일합니까?


이번에 나는 다음 단계의 내용을 더욱 잘 이해하기 위해 부정행위를 했고 코드를 미리 보여 주었다.안녕, 세상!
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script>
      const data = { message: "Hello World !" };
      new Vue({
        el: "#app",
        data: data
      });
    </script>
  </body>
</html>
VueJS는 주로 응용 프로그램의 보기 부분에 주목한다.이를 위해 이 틀의 일부 영감은the MVVM architecture pattern에서 나왔다.VueJS는 DOM(뷰 부분)을 뷰 인스턴스(모델 뷰 부분)와 연결합니다.이 두 부분은 데이터 귀속 시스템에 의해 연결된다.
마지막으로 보기 실례의 데이터는 모델 부분이다.이것은 응용 프로그램에 데이터를 제공할 것입니다.Hello World 코드의 모델화는 다음과 같습니다.

VueJS 응용 프로그램은 하나 이상의 구성 요소로 구성됩니다.전역 응용 프로그램의 실례가 시작될 때, 먼저 루트 실례가 있습니다.이것은 루트 실례입니다. 이것은 하나의 구성 요소 트리로 구성되어 있으며, 이 구성 요소들은 자신의 루트 실례를 가지고 있습니다.
그러나 새 Vue()를 사용하여 어셈블리를 생성할 때 인스턴스의 라이프 사이클은 어떻게 변경됩니까?나는 나의 일반적인 어리석은 패턴을 만들고 싶지만, 사실은 공식적인 VueJS 문서가 매우 우수하다는 것을 증명한다.It's rare to have a good documentation . 그래서 나는 그들의 패턴을

나는 너에게 그것을 감상하게 해서 도대체 무슨 일이 일어났는지 확실히 알게 할 것이다.유일하게 알 수 없는 것은 '만들기' 와 '설치' 사이의 차이입니다.

  • 생성됨 표현 엔티티는 뷰 모델 부품에서만 사용할 수 있습니다.

  • VueJS에 마운트하면 DOM 요소가 페이지에 표시되므로 작업을 수행할 수 있습니다.
    • 아주 좋아, 이제 우리 손을 더럽히자.

    비밀번호 보여주세요.


    나는 너에게 내가 개인을 위해 작성해야 할 코드를 보여 주겠다.세 개의 구성 요소만 있는 간단한 응답 갤러리우리는 루트 응용부터 시작한다.
    응용 프로그램.vue
    <template>
  <div id="app">
    <action v-bind:message="messageAction"></action>
    <grid v-bind:photos="photos"></grid>
  </div>
</template>

<script>
  import action from './components/action.vue'
  import grid from './components/grid.vue'

  export default {
    name: 'App',
    components: { action, grid },
    data: function () {
      return {
        photos: [
          {
            id: 0,
            url: "https://i.imgur.com/p3IKY9G.jpg"
          }
        ],
        messageAction: "It's working !"
      }
    }
  }
</script>

<style>
  {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Arial;
  }
</style>
    템플릿에 있어서, 나는 먼저div에서 나의 루트 프로그램을 설명합니다. 그중에는 두 개의 구성 요소 (action과grid) 가 있습니다.내가 어떻게 v-bind 명령을 통해 구성 요소에서 나온 실례적인 데이터를 전달하는지 주의하십시오.
    스크립트에 있어서, 우리가 내보낸 프로그램에서 사용할 구성 요소를 가져옵니다.우리는 데이터, 사진, 그리고 하나의 소식을 성명하는데, 이러한 정보는 변화에 반응적이다.
    스타일에 있어서 저는 매우 간단한 CSS를 통합했는데 이것은 전체 프로젝트의 전체 국면입니다.
    다음은 동작 부분.
    움직여.vue
    <template>
  <div class="callToAction">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'callToAction',
    props: {
      message: String
    }
  }
</script>

<style scoped>
  .callToAction {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  h1 {
    color: red;
    background:black;
    padding: 10px;
  }
</style>
    action 구성 요소는 텍스트입니다. 페이지 중간에 놓습니다. 이것은 사용자에 대한 조작 호출입니다.응용 프로그램에서 온 메시지를 표시하려면 메시지 구문을 사용합니다.
    또한 스타일 부분은'범위화'된 것이므로 주의해야 한다.즉, 논의된 CSS가 어셈블리에서만 유효합니다.이것은 모든 구성 요소의 스타일 범위를 분리하는 데 매우 유용하다.
    격자선.vue
    <template>
  <div class="grid">
    <div v-bind:key="grid.id" v-for="grid in grids" class="column">
      <photo
        v-for="photo in grid" 
        v-bind:photo="photo" 
        v-bind:key="photo.id"
      ></photo>
    </div>
  </div>
</template>

<script>
import photo from './photo.vue'

export default {
  name: 'grid',
  components: { photo },
  props: ['photos'],
  computed: {
    grids: function () {
      const grids = []
      const deepClonePhotos = JSON.parse(JSON.stringify(this.photos))
      const gridsToMake = Math.ceil(deepClonePhotos.length / 2) - 1

      for (let index = 0; index <= gridsToMake; index++) {
        const currentGrid = []

        for(let i = 0; i < 2; i++) {
          if(deepClonePhotos.length) {
            currentGrid.push(deepClonePhotos.shift())
          }
        }

        grids.push(currentGrid)
      }

      return grids
    }
  }
}
</script>

<style scoped>
  .grid {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0;
  }

  /* Create four equal columns that sits next to each other */
  .column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }
</style>
    격자 구성 요소는 프로그램에서 받은 데이터에 따라 이미지 격자를 표시하는 논리를 생성합니다.템플릿 부분에서, 나는 두 장의 그림마다 열을 만들었다.이 칼럼에서 나는 나의 두 장의 사진을 보여 주었다.나는 이 점을 실현하기 위해 다른 사진 구성 요소를 사용한다.v-for 명령을 사용하여 내 목록을 훑어보는 것을 알 수 있습니다.
    스크립트 부분에서, 나는 props를 사용하여 응용 프로그램에서 v-bind가 전달하는 데이터를 얻는다.그리고 컴퓨터 함수를 사용하여 그림의 데이터로 새 격자 변수를 만듭니다.
    사진.vue
    <template>
  <img :src="photo.url" alt ="" />
</template>

<script>
  export default {
    name: 'photo',
    props: ['photo']
  }
</script>

<style scoped>
  .column img {
    vertical-align: middle;
    width: 100%;
  }
</style>
    사진 구성 요소는 사진의 표시를 한 구석에서만 분리할 수 있습니다.이것은 매우 간단하지만, 그것은 내가 미래에 이 방면의 많은 일을 변화시킬 수 있도록 허락한다. 위의 논리에 부딪칠 필요가 없다.여느 때와 마찬가지로, 나는 조금 넣었다. codesandbox, 너는 그것을 가지고 놀 수 있고, 그것의 실제 효과를 볼 수 있다.

    후기


    우리는 이미 5분 넘게 이야기를 나누었다.문서를 빨리 읽은 후에 내가 몇 시간 안에 첫 번째 프로그램을 만들었다는 것을 알아야 한다.이 틀의 처리는 미친 듯이 사람을 매우 즐겁게 한다.솔직히 말해서, 나는 네가 한번 테스트해 보라고 건의한다. 이것은 매우 재미있다.
    [DP] 접미사 표현식 및 값 구하기 visitor
    도서 추적 레일 앱

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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