1. 特徴MVVMフレームワークです
データも一方通行であり、一方向データフローと呼ばれる。
IE8以下のブラウザには対応していません
2. 例// Vue シングルページインスタンス <template> ラベル... </テンプレート> <スクリプト> エクスポートデフォルト{ データ () {}、 メソッド: {}, 計算: {}, 時計: {} } </スクリプト> <スタイル> スタイル... </スタイル> 3. オプションデータ
データ() { 戻る { カウント: 2 コピー数: 1 } } // this.count を使用する // 2 計算された
// 計算プロパティはパラメータを受け入れず、依存データをキャッシュし、戻り値を持つ必要があります 計算: { ダブルカウント: 関数 () { this.count *= 2 を返す }, } // this.doubleCount を使用する // 4 方法
メソッド: { cLog(メッセージ) { コンソール.log(メッセージ) } } // this.cLog('関数が呼び出されました') を使用します // コンソール出力: 関数が呼び出されました 時計
時計: count(値、[古い値]) { // 値: 変更された値 this.copyCount = value + 1 } } // カウントが変更されると自動的にトリガーされます this.count = 2 this.copyCount // 3 コンポーネント
'xxxx' から UploadImg をインポートします コンポーネント: { UploadImg } // テンプレート <アップロード画像> 4. 基本的な文法一般的な指示
5. ライフサイクル
6. ルーティング管理 Vue-Router
6.1 ルーティング構成// NPM ダウンロード npm install vue-router // ルータ.js 'vue' から Vue をインポートします 'vue-router' から VueRouter をインポートします。 Vue.use(VueRouter) //ページルーティングを定義する(パス、コンポーネント) デフォルトの新しいルーターをエクスポートします({ { path: '/foo', component: () => import('/pages/foo') }, // ルーティングコンポーネントの遅延読み込み { path: '/bar', component: '/pages/bar'} }) // メイン.js './router.js' からルーターをインポートします。 新しいVue({ el: '#app', router, // ルートを Vue インスタンスにマウントします render: h => h(App) }) // ページ.vue <!-- 両者の関係を区別することが重要です --> this.$router // ルーター、組み込みのプッシュおよび置換ルーティングメソッドにアクセスします this.$route // 現在のルート、組み込みパス、クエリ、およびその他のルーティング属性にアクセスします // app.vue <!-- ルートに一致するコンポーネントがここでレンダリングされます --> <ルータービュー></ルータービュー> 6.2 ルーティング宣言型ルーティング <ルーターリンク:to="..."> <router-link :to="..." 置換> プログラムによるルーティング this.$router.push({ パス: 'register', クエリ: { プラン: 'private' }}) this.$router.replace(...) // push との違いは、履歴レコードが挿入されないことです。 this.$router.go( [Number] n ) // 履歴レコード内の前進または後進のステップ数 // ルート パラメーターに中国語が含まれる場合、文字化けを避けるために、最初に encodeURLComponent を使用してトランスコードすることをお勧めします。 6.3 ルーティングガードグローバルガード
グローバルフロントガード(一般的に使用される) // ユーザーが認証に失敗した場合は /login にリダイレクトします router.beforeEach((to, from, next) => { // to は入力するルートオブジェクト、from はソースルート、next はフック関数、解放するかどうか if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) そうでなければ次() }) グローバル解析ガード(理解) router.beforeResolve((to, from, next) => { // ... }) グローバルポストフック(理解) router.afterEach((to, from) => { // このルート ガードは次のフック関数を受け入れません // ... }) 専用ルーターガード(理解)
const ルーター = 新しい VueRouter({ ルート: [ { パス: '/foo', コンポーネント: Foo、 beforeEnter: (to, from, next) => { // ... } } ] }) コンポーネント内部ガード(理解)
ルートに入る前 beforeRouteUpdate (2.2 の新機能) ルート出発前 コンポーネントのガード | Vue-Router 公式ドキュメント 7. ステートマネージャー Vuex7.1 構成//ストア.js 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします Vue.use(Vuex) ... デフォルトの新しいVuex.Storeをエクスポートします({ 州、 ゲッター、 突然変異、 行動、 モジュール }) // メイン.js './store' からストアをインポートします Vue.prototype.$store = ストア 8. 5つのコア属性州
//ストア.js 定数状態 = { 名前: 'zzz' } <!--page.vue--> // 1. this.$store.state.name // 'zzz' を直接呼び出します // 2. 補助関数のマッピングが計算されます: { ...mapState(['名前']) } this.name // 'zzz' 突然変異
const 変異 = { 更新名(状態、新しい名前) { 状態名 = 新しい名前 } } <!--page.vue--> // 1. this.$store.commit(updateName, 'zzh') を直接呼び出します // state.name: 'zzh' // 2. 補助関数マッピングメソッド: { ...mapMutations(['updateName']) } this.updateName('zzh') // 状態名: 'zzh' アクション
定数アクション = { asyncUpdateName(コンテキスト) { // 非同期操作。たとえば、name=xxx と仮定して、更新された名前を取得するための HTTP リクエストを開始するなど。 ... context.commit('updateName', res.name) // state.name: 'xxx' } } <!--page.vue--> // 1. this.$store.dispatch(asyncUpdateName) を直接呼び出す // 2. 補助関数マッピングメソッド: { ...mapActions(['asyncUpdateName']) } this.asyncUpdateName() ゲッター
定数ゲッター = { フォーマット名(状態) { 状態名 + '2021' を返す } } <!--page.vue--> // 1. this.$store.getter.formatName() を直接呼び出します // 'xxx2021' // 2. 補助関数のマッピングが計算されます: { ...mapGetters(['formatName']) } this.formatName() // // 'xxx2021' モジュール
// モジュール内 this.$store.state.name // 内部アクセスには名前空間は必要ありません // モジュール外 this.$store.state.login.name // login はモジュール名前空間です... その他の特性も同様 モジュール|Vuex公式ドキュメント 9. HTTPリクエストライブラリAxios
<!-- api.js --> 'axios' から axios をインポートします // インスタンスを作成して設定する axios.create({ baseURL: 'http://www.baidu.com', // リクエスト ベース アドレス timeout: 1000 // リクエスト タイムアウト... }) // リクエストインターセプター axios.interceptors.request.use(request => { リクエスト.headers['Content-Type'] = 'application/json' ... }) // レスポンスインターセプター axios.interceptors.response.use(response => { ... 応答データを返す }) //リクエストエクスポートのデフォルトを設定する{ getId: () => axios.get('/getId'), getNameById: id => axios.post('/getNameById', id) } <!-- main.js --> './api.js' から api をインポートします。 Vue.prototype.$api = api <!-- page.vue --> this.$api.getId().then(res => { ... })。キャッチ() これで、Vue 2.0 の基礎に関する詳細な記事は終了です。Vue 2.0 の基礎に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Web デザイン: Web ミュージックの実装テクニック
>>: Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴
目次1. クエリの最適化1. MySQLチューニングの概要2. 小さなテーブルが大きなテーブルを動か...
不明な点があるときはいつでも、Blog Park にアクセスして、いつでも答えやインスピレーションを...
MySQL レプリケーション テーブルの詳細な説明テーブル構造、インデックス、デフォルト値などを含む...
目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...
目次1. ローカルストレージを構築する2. npmパッケージを作成し、プライベートリポジトリにアップ...
目次移行ツールアプリケーション変換mysql8.0 ドライバ パッケージを追加データソース構成の変更...
/**************************** * システムコール**********...
前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...
少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...
Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...
HTML で色を表す方法は 3 つありますが、最もよく使われるのは 6 桁の 16 進コード表現です...
1. ボタンが押されたときに点線のボックスをキャンセルする<br />入力に属性値hid...
HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...
1.コマンドが見つかりません コマンドが見つかりません2. そのようなファイルまたはディレクトリは...
私は SQL の初心者で、オープンソースのインストールは非常に簡単だと思っていましたが、その過程でい...