vueプラグイン、モジュール化

8859 ワード
vue
vue補完
DOM要素の取得
  • 救命藁、document.querySelector
  • 1:templateでエレメントref=「xxxx」
    • を識別
  • 2:取得するとき、this.$refs.xxxx取得要素
  • コンポーネントを作成し、DOMをロードし、ユーザーはボタン
    • をクリックする.
  • refは、DOM上で取得するオリジナルDOMオブジェクト
    • である.
  • refコンポーネントで取得されたのはコンポーネントオブジェクトです
  • $elはDOM
    • を持っています
  • このオブジェクトは私たちが普段遊んでいるthisに相当し、関数
    • を直接呼び出すこともできます.

    ルート
    ルーティングの原理
  • 従来の開発方式urlが変更された後、すぐに要求を開始し、ページ全体に応答して、ページ全体
    • をレンダリングする.
  • SPAアンカー値が変更されても要求は開始されず、ajax要求が開始され、ページデータがローカルに変更されます.
  • ページはユーザー体験をスキップしないほうがいい

    • SPA
  • single pageアプリケーション
  • フロントエンドルーティング
  • アンカー値監視
  • ajax動的データ取得
  • コアポイントはアンカー値
    • である
  • フロントエンドフレームワークVue/angular/reactは、単一ページアプリケーション
    • の開発に適しています.
    きほんしよう
  • vue-router
  • vueのコアプラグイン
  • 1:ダウンロードnpm i vue-router -S
  • 1.2(重要):装着カードVue.use(VueRouter);
  • 2:main.jsにvue-routerオブジェクトimport VueRouter form './x.js';
    • を導入する
  • 3:ルーティングオブジェクトvar router = new VueRouter();
    • を作成する.
  • 4:ルーティング規則router.addRoutes([ ]);の構成
  • ルーティングオブジェクト{path:' ',component: ( ) }
  • 5:構成されたルーティングオブジェクトをVueに渡す
  • optionsで渡す->keyをrouter
    • と呼ぶ
  • 6:ピット(コンポーネントを使用)
    • router-link
  • to
  • は、aラベルのhref
    • を生成するのに役立ちます.
  • アンカー値コードのメンテナンスが不便で、アンカー値名を変更する必要がある場合
  • は[使用回数+1(構成規則)]箇所のコード
    • を変更する必要がある.

    名前付きルーティング
  • 1:ルーティングオブジェクトの名前{ name:'home',path:'/home',component:Home}
    • を与える
  • 2:router-linkのto属性にこの規則を記述する
  • 名前でルーティングオブジェクトを探し、そのpathを取得し、独自のhref
    • を生成する.
  • はメンテナンスコストを大幅に削減し、アンカー値の変更はmainにのみ使用する.jsでpath属性を変更すれば
    • ステージのまとめ
  • vue-router使用手順:1:導入2:プラグインのインストール3:ルーティングインスタンスの作成4:ルーティングルールの構成5:ルーティングオブジェクトをvue 6:ピット
    • に関連付ける
  • router-link to="/xxx"ネーミングルーティング
  • ルーティングルールオブジェクトにname属性
    • を加える
  • router-linkで:to="{name:"xxx’}"

  • 辺鄙なAPI整理:
  • Vue.use(プラグインオブジェクト);//プロセス中にグローバルコンポーネントが登録され、vmまたはコンポーネントオブジェクトにプロパティ
    • に掛けられます.
  • vmおよびコンポーネントオブジェクトを掛ける方法:Object.defineProperty(Vue.prototype,’$router’,{get:function(){return独自のrouterオブジェクト;})


    • パラメータrouter-link、
  • Vue.prototype.xxx = {add:fn}
  • すべてのコンポーネントでthisを使用します.xxxはこの相手
    • を手に入れることができます
  • クエリー文字列
  • 1:構成:to="{name:'detail',query:{id:hero.id} }"
  • 2:ルール{name:'detail',path:'/detail',component:Detail}
  • 3:取得this.$route.query.id
  • 4:
    • を生成する.
  • path方式
  • 4:
    • を生成する.
  • 1:構成:to="{name:'detail',params:{id:hero.id} }"
  • 2:ルール{ name:'detail',path:'/detail/:id'}
  • 3:取得this.$route.params.id
  • クエリー文字列構成パラメータ
  • router-link一回
  • 取得時1回
  • path方式構成パラメータ
  • router-link一回
  • ルール構成時宣言位置
  • 取得時1回
  • 書くコードの注意事項をまとめます
  • path方式は、ルーティングルールに位置
    • を宣言する必要がある.

    vue-routerのオブジェクト
  • $routeルーティング情報オブジェクト、読み取り専用オブジェクト
  • $routerルーティング操作オブジェクト、書き込みオブジェクト
    • のみ
    ネストされたルーティング
  • 市販のいわゆる単ページ応用フレームワークで多ページ応用を開発する
  • ネストルーティング
  • ケース
  • 私のホームページに入って表示します:映画、歌曲
  • コード思想
  • 1:router-viewの細分化
  • router-view第1層には、router-view
    • が含まれる
  • 2:各ピットが掘られ、個別のコンポーネント
    • に対応する.
  • 使用上の注意:1:router-viewはrouter-view 2:ルーティングchildrenルーティング
    • を含む
    ナレッジポイントの紹介
  • ルーティングmetaメタデータ->metaルーティングルールに対して認証権限が必要かどうかの構成
  • ルーティングオブジェクトとname属性の同級{ meta:{ isChecked:true } }
  • ルーティングフック->パーミッション制御の関数実行期間
  • ルーティングが一致するたびに、レンダリングコンポーネントはrouter-viewの前の
    • に達する.
  • router.beforeEach(function(to,from,next) { } )


    • 練習する
  • 1:koaを使用してサーバを作成...
  • a./loginのリクエスト...ctx.body = { msg:‘ok’} jq ajax

  • 2:クライアントが応答を受信後.OKならlocalStroageにこの値
    • を保存
  • 3:グローバルルーティングガードでは、区別/loginは検証しない(meta),/showは検証し、検証条件はlocalStorageから
    • を取得することである.
    プログラミングナビゲーション
  • 1:指定されたアンカーポイントにジャンプし、ページthis.$router.push({ name:'xxx',query:{id:1},params:{name:'abc'} });
    • を表示する.
  • 2:構成規則{name:'xxx',path:'/xxx/:name'}
  • 3:履歴による.前進または後退
  • this.$router.go(-1|1);
  • はさらに、-1は一歩後退する
    • を表す.

    axios
    きほんしよう
    Axios.method('url',[,..data],options)
.then(function(res){  })
.catch(function(err) { } )

    マージリクエスト
  • this.$axios.all([  1,  2])
.then(  this.$axios.spread(function(res1,res2){  
         
         })
)

    • ブロッキング
  • シングルリクエスト構成options:axios.post(url,data,options);
  • グローバル構成defaults:this.$axios.defaults
  • config :
  • response.config
  • options
  • baseURLベースURLパス
  • paramsクエリー文字列(オブジェクト)
  • transformRequest変換要求体データ
  • transformResponse変換応答体データ
  • headersヘッダ情報
  • data要求体データ
  • timeoutリクエストがタイムアウトしました.リクエストがどのくらい後に応答しなかったかはタイムアウト(ミリ秒)
    • です.

    モジュール化
  • webpackコマンドnpm init-y npm [email protected] --save-dev --registry https://registry.npm.taobao.org
  • package.jsonファイル"scripts": { "test": "webpack ./main.js ./build.js" },
  • コマンドラインnpm run test
    • を実行
    ES 6モジュール
  • インポートおよびエクスポートには、トップレベルの役割ドメイン
    • しか存在しません.
  • require導入コード実行時に
    • をロードする
  • importとexportはいずれもプリロードであり、コード実行前の
    • にロードされる.
    矢印関数とfunction
  • 矢印関数は略記形式
    • である.
  • 適用シーン:矢印関数自体にthisとargumentsがないため、通常、イベントオブジェクト
    • ではなく、イベントクラスのコールバック関数で上位functionにthisをバインドするために使用されます.
  • 矢印関数は、コンストラクション関数
    • として使用できません.
    ES 6関数の略記
  • オブジェクトのプロパティに使用する
    fn3() { //   :function,        

				console.log(this);

		},
    • VUEのWPFにおけるMvvMモード異同
    小学校四則演算