今回は、Vueをゼロから使う方法についてお届けします。実践的な事例を見てみましょう。 1. vue とは Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。 圧縮後わずか17kb 2. Vue環境構築 直接ダウンロードしてタグでインポートするとVueがグローバル変数として登録されます。 </p> <p style="text-align: left;">ただし、Vue を使用して大規模なアプリケーションを構築する場合は、NPM インストールを使用することをお勧めします。 </p> <p style="text-align: left;">ここでの推奨事項は、非常に高速な淘宝の cnpm を使用することです</p> <pre>npm install -g cnpm --registry=https://registry.npm.taobao.org</pre> <p style="text-align: left;">それから、それをインストールします</p> <p style="text-align: left;"><span style="color: #ff0000"><strong>3. 最初の Vue アプリケーション</strong></span></p> <p style="text-align: left;"><span style="color: #ff0000"><img alt="" src="https://img.php.cn/upload/article/000/000/002/eb0e3a7072cbb3e6b84e7d95107e62fb-0.png"></span></p> <p style="text-align: left;">4. <span style="color: #ff0000"> <strong></strong></span>各 Vue インスタンスが作成されると、一連の初期化プロセスが実行され、対応するライフサイクル フックも呼び出されます。これらのフックを使用して、適切なタイミングでビジネス ロジックを実行できます。 </p> <p style="text-align: left;">一般的なライフサイクルは次のとおりです: created---mounted---destroy</p> <p style="text-align: left;"> Vue の最も一般的に使用されるライフサイクルフックは次のとおりです: </p> <p style="text-align: left;">• created はインスタンスの作成後に呼び出されます。この段階では、データの観察などが行われます。 . は完了しましたが、まだマウントされておらず、$el はまだ使用できません。 一部のデータを初期化して処理する必要がある場合にさらに便利です。 </p> <p style="text-align: left;">• マウントされた el は、インスタンスにマウントされた後に呼び出されます。通常、最初のビジネス ロジックはここから始まります。 </p> <p style="text-align: left;">• beforeDestroy はインスタンスが破棄される前に呼び出されます。 主に、addEventListener を使用して監視されるいくつかのイベントのバインドを解除します。 </p> <pre># 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖,走你 cd my-project npm run dev</pre> <p style="text-align: left;">完全なライフサイクル図: </p> <p style="text-align: left;"></p> <p style="text-align: left;"><img alt="" src="https://img.php.cn/upload/article/000/000/002/eb0e3a7072cbb3e6b84e7d95107e62fb-1.jpg">この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 </p> <p>推奨読書: </p> <p></p>Angular2でDomを使用する際の注意点は何ですか<p><a href="http://www.php.cn/js-tutorial-402770.html" target="_blank"></a><br></p>FileReader APIの使用方法<p><a href="http://www.php.cn/js-tutorial-402759.html" target="_blank" style="font-size: 14px;"></a></p>