vuejs でモジュール式アプローチを使用して開発する-jsチュートリアル-php.cn

vuejs でモジュール式アプローチを使用して開発する

亚连

リリース： 2018-06-20 15:11:04

オリジナル

2946 人が閲覧しました

この記事では主にモジュール形式での vuejs の書き方を詳しく紹介していますが、編集者が非常に良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

はじめに

vuejs は、使いやすく、拡張しやすい、入門用のシンプルなフレームワークです。 webpack の人気に伴い、vuejs もコードを簡単にパッケージ化できる独自のロード vue-loader を起動しました。最近、vue-loader によってもたらされるモジュール機能を完全に使用する json viewer-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>

ログイン後にコピー

template にはテンプレートコードが含まれており、通常は p などの閉じた HTML タグです。

style には CSS コードが含まれています。このコードは、現在のテンプレートにのみ適用したい場合は、スコープ付き属性を使用する必要があります

 <style scoped>

ログイン後にコピー

などの CSS プリプロセッサを使用する必要があります。 sass の場合は、 lang を宣言するだけで、vue-loader が自動的にロードされます。もちろん、対応する sass-loader がインストールされていることが前提です。

 <style lang="sass">

ログイン後にコピー

script ここでは es6 コードが使用されていることに注意してください。コンパイルには babel を使用します。そのため、もちろん es6 プリセットである babel をインストールし、ルートディレクトリに .babelrc ファイルをビルドする必要があります。詳細については、私の ac を参照するか、公式の vue-cli を使用してプロジェクトを初期化してください。

templateはタグを非表示にします

templateはテンプレートの一番外側のタグだけでなく、通常のタグとしても使用できます。たとえば、v-if を使用して一部の領域の表示と非表示を制御する必要がある場合、これを行うことができます。

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

ログイン後にコピー

また、テンプレートはレンダリングされないため、最終的な DOM 構造には影響しません。

注: v-show はテンプレート

flux

では使用できません。実際の開発中、元のデータ管理モデルが混乱しており、一時データ、永続データ、ユーザーのどれであるかを区別するのが難しいことがわかります。データとバックグラウンドデータを考慮すると、現時点ではフラックスを導入するのが最も適切です。

当分他のライブラリを導入したくない場合は、実際には非常に簡単に自分で実装してみることができます。 store.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

ページでよく使用されるスタイル変数をsass

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

ログイン後にコピー

などの公開ファイルをコンポーネントのスタイルで導入すると、とても便利で強力だと思いませんか？

しかし、残念ながら、これを実装する方法はまだわかりません。

上記は私があなたのためにまとめたものです。

親ノード選択時に子ノードも選択されるように無効にするJstreeでの実装方法

Vueでのフィルターの使い方について

JavaScriptでの適応処理方法

以上がvuejs でモジュール式アプローチを使用して開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。