vue の構築とルーティングの使用法の概要-jsチュートリアル-php.cn

今回は、vue の構築とルーティングの使用についての概要をお届けします。vue の構築とルーティングの使用に関する 注意事項 について、実際の事例を見てみましょう。

1. コンポーネントの 3 つのマウント方法

自動マウント

var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ログイン後にコピー rree

2. ルーティング経由でパラメーターを渡す方法 3. レンダリングの場合: h =>

render:h=>h(App) は ES6 のアロー関数の記述メソッドであり、render:function(h){return h(App);} と同等です。

1 this は、this をラップする関数の外側のオブジェクトを指します。

2.h は、vue エコシステムの一般的な管理である creatElement のエイリアスです

3.template:' '、コンポーネント:{App} は一緒にまたは単独で使用されます render:h=>h( App ) は同じ効果を実現します

前者は タグを識別し、後者はアプリの p としてテンプレートの下の ID を直接解析します // 可以实现延迟按需挂载 {{name}}

挂载 var obj= {name: '张三'} var vm = new Vue({ data: obj }) function test() { vm.$mount("#app"); } 4. Vue.nextTick() の

DOM がレンダリングされたことを確認するために、DOM 関連の操作がこの関数のコールバックに書き込まれます。 nextTick の起源:

VUE のデータ駆動型ビューの更新により、は非同期です。つまり、データが変更されてもビューはすぐには更新されませんが、ビューを均一に更新する前に、同じイベント ループ内のすべてのデータ変更が完了するまで待機します。

nextTick トリガーのタイミング:

同じイベント ループ内でデータが変更された後、DOM は更新を完了し、nextTick(callback) のコールバックがすぐに実行されます。

アプリケーションシナリオ:

ビューが更新された後、新しいビューに基づいて操作する必要があります。 Vue

ライフサイクル のcreated()フック関数で実行される DOM操作

は、Vue.nextTick()の コールバック関数

に配置する必要があります。理由は何でしょうか? 理由は、create() フック関数の実行時に実際には DOM がまったくレンダリングされず、このときの DOM 操作が無駄になるため、DOM 操作用の JS コードを Vue に入れる必要があるためです。 nextTick() のコールバック関数内。これに対応するのが実装されたフック関数です。このフック関数が実行される時点ですべての DOM のマウントとレンダリングが完了しているため、このフック関数内で DOM 操作を実行しても問題はありません。 データ変更後に操作を実行する必要があり、この操作でデータの変更に応じて変更される DOM 構造を使用する必要がある場合、この操作を Vue.nextTick() のコールバック関数に含める必要があります。 イベント ループの簡単な概要:

同期コードの実行 -> 非同期 キュー

を見つけて、実行スタックにプッシュし、callback1 を実行します [イベント ループ 1] -> 非同期キューを見つけてプッシュします。それを実行スタックに追加し、callback2[イベント ループ 2] を実行します。つまり、各非同期コールバックは最終的に独自の独立したイベント ループを形成します。 nextTick の起源と組み合わせると、各イベント ループで nextTick がトリガーされるタイミングを推測できます: この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語のウェブサイトです！

推奨読書: プロジェクト作成時のvue-cli+webpackエラーレポート

jqueryフルページプラグインがヘッダーとテールを操作する方法