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 にアップグレードする手順と落とし穴
XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...
序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...
この記事では、UbuntuシステムでSVNを設定するプロセスを簡単に紹介します。ソースを更新sudo...
1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...
必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...
目次概要1. フックの呼び出し順序2. onChangesフック3. 変更検出メカニズムとDoChe...
# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...
コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...
1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...
<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...
div を使用してマスクを作成したり、ポップアップ ウィンドウをシミュレートしたりします。ただし、I...
目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...
地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...
アプリケーション例ウェブサイト http://www.uhuigou.net画像の動的読み込みは目新...
輸出: docker save -o centos.tar centos:latest #cento...