Vue 初心者向けチュートリアル

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>今回は、Vue の初心者向けチュートリアルをお届けします。Vue の初心者向けの注意点は何ですか? 実際のケースを見てみましょう。

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>推奨学習:

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 Vue Frameworkビデオチュートリアル 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 vue.js Getting Started Video Tutorial 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 Vue2.0の入門と実践的なプロジェクトの学習ビデオチュートリアル 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 Wheat Academy Vue.jsビデオチュートリアル 》

1. vueとは

Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。

圧縮後わずか17kb

2. Vue環境構築

直接ダウンロードして タグを使用してインポートすると、Vueがグローバル変数として登録されます。

ただし、Vue を使用して大規模なアプリケーションを構築する場合は、NPM インストールを使用することをお勧めします。

ここでの推奨事項は、タオバオの cnpm を使用することです。とても速いです

npm install -g cnpm --registry=https://registry.npm.taobao.org 次に、インストールします

# 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖，走你 cd my-project npm run dev 3. 最初の Vue アプリケーション

单击事件 今年{{age}}

各 Vue インスタンスが作成されると、一連の初期化プロセスが実行され、また、これらのフックを使用してビジネス ロジックを適切なタイミングで実行できます。

一般的なライフサイクルは次のとおりです: 作成---マウント---破棄

Vue のより一般的に使用されるライフサイクル フックは次のとおりです:

• インスタンス作成後に created が呼び出されますが、この段階ではデータの観測等は完了していますが、まだマウントされておらず、$el はまだ利用できません。 一部のデータを初期化して処理する必要がある場合にさらに便利です。

• Mounted el は、インスタンスにマウントした後に呼び出されます。通常、最初のビジネス ロジックはここから始まります。

• beforeDestroy はインスタンスが破棄される前に呼び出されます。 主に、addEventListener を使用して監視されるいくつかのイベントのバインドを解除します。

var app =new Vue({ el: '# app', data: { a: 2 } , created: function () { console.log(this.a); //2 }, mounted: function () { console.log(this.el); //

} }); この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

webpack の自動モバイル ビルド rem メソッドの詳細な説明

環境ごとに Vue プロジェクトをパッケージ化する方法