vuejs의 모듈식 접근 방식을 사용하여 개발-JS 튜토리얼-php.cn

vuejs의 모듈식 접근 방식을 사용하여 개발

亚连

풀어 주다： 2018-06-20 15:11:04

원래의

2931명이 탐색했습니다.

이 글은 주로 vuejs를 모듈식으로 작성하는 방법을 자세히 소개하고 있습니다. 에디터가 꽤 괜찮다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집기를 따라 살펴보겠습니다

Introduction

vuejs는 시작하기 위한 간단한 프레임워크로, 사용하기 쉽고 확장하기 쉽습니다. webpack의 인기에 따라 vuejs는 코드를 쉽게 패키징할 수 있는 자체 로드인 vue-loader도 출시했습니다. 나는 최근에 vue-loader가 제공하는 모듈식 기능을 완벽하게 사용하는 json 뷰어-ac를 작성했으며 많은 경험을 얻었습니다. 여기에 녹음하세요.

파일 구조

 <template>
  <p>
   <app-header></app-header>
  </p>
</template>
<style>
...
</style>
<script>
  import AppHeader from &#39;./AppHeader.vue&#39;
  export default {
   name:&#39;app&#39;,
   props:[&#39;data&#39;]
   data() {
    return {}
    },
   methods: {
    handleClick() {}
   },
   components: {
    AppHeader
   }
  }
</script>

로그인 후 복사

템플릿에는 일반적으로 p와 같은 닫힌 HTML 태그인 템플릿 코드가 포함되어 있습니다.

style에는 CSS 코드가 포함되어 있습니다. 이 코드는 현재 템플릿에만 적용하려면 범위가 지정된 속성을 사용해야 합니다.

 <style scoped>

로그인 후 복사

다음과 같은 일부 CSS 전처리기를 사용하려면 sass에서는 lang만 선언하면 vue-loader가 자동으로 로드됩니다. 물론 해당 sass-loader가 설치되어 있어야 합니다.

 <style lang="sass">

로그인 후 복사

script 여기서는 es6 코드가 사용되었습니다. 저는 babel을 사용하여 컴파일하므로 당연히 es6 사전 설정인 babel을 설치하고 루트 디렉터리에 .babelrc 파일을 빌드해야 합니다. 자세한 내용은 my ac를 참조하거나 공식 vue-cli를 사용하여 프로젝트를 초기화할 수 있습니다.

템플릿은 태그를 보이지 않게 만듭니다

템플릿은 템플릿의 가장 바깥쪽에 있는 태그일 뿐만 아니라 일반 태그로도 사용할 수 있습니다. 예를 들어 v-if를 사용하여 일부 영역의 표시 및 숨기기를 제어해야 하는 경우 이렇게 할 수 있습니다.

 <template>
  <template v-if="valid">
    <p></p>
  </template>
  <template v-else>
   <p></p>
  </template>
</template>

로그인 후 복사

또한 템플릿은 렌더링되지 않으므로 최종 DOM 구조에 영향을 미치지 않습니다.

참고: v-show는 템플릿과 함께 사용할 수 없습니다.

flux

실제 개발 중에 원래 데이터 관리 모델이 혼란스럽고 임시 데이터, 영구 데이터, 사용자를 구별하기 어렵다는 것을 알게 될 것입니다. 데이터 및 배경 데이터는 현재 Flux를 도입하는 것이 가장 적절합니다.

당분간 다른 라이브러리를 소개하고 싶지 않다면 직접 구현해 볼 수도 있습니다. 실제로는 매우 간단합니다. store.js를 준비하세요.js

 let trim = str => {
 return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, &#39;&#39;);
}
export const state = {
  jsons: []
}

export const actions = {
  parse(jsonStr) {
    if(!trim(jsonStr)) return

    let jsonObj = null
    try{  
      jsonObj = JSON.parse(jsonStr)
    }catch(err){
      state.jsons.push({err: jsonStr + &#39;&#39;, valid: false })

    }
    if(jsonObj){
      state.jsons.push({obj:jsonObj, valid: true})
    }
  }
}

로그인 후 복사

모든 뷰 데이터는 상태에서 나옵니다. 모든 수정은 작업을 통해 수행되어야 합니다. 하위 구성 요소의 데이터 수정은 상위 구성 요소에 영향을 주지 않으므로 vuejs의 양방향 바인딩 기능을 안전하게 사용할 수 있습니다.

그런 다음 앱의 루트 구성 요소 아래에 상태와 작업을 도입한 다음 필요에 따라 하위 구성 요소에 전달할 수 있습니다.

import { state, actions } from &#39;../store&#39; data() {
  return {
   state,
   actions
  }
 },

로그인 후 복사

<child :state="state" :handleClick="actions.update"></child>

로그인 후 복사

import public css

페이지에서 일반적으로 사용되는 스타일 변수를 common.sass

 $width: 80%;
$height: 100%;
$moli-green:#CCF3E4;
$moli-white:#f8f8f8;

로그인 후 복사

등의 공용 파일을 컴포넌트 스타일로 소개하면 매우 편리하고 강력하지 않을까요?

하지만 안타깝게도 아직 구현 방법을 모르겠습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.