uni-appベース構文

data属性
dataは、初期データオブジェクトを返す関数として宣言する必要があります.それ以外の場合、ページが閉じると、データは自動的に破棄されず、再びページを開くと、前回のデータが表示されます.
グローバル変数
uni-appグローバル変数のいくつかの実装方法
共通テンプレート
これらのグローバル変数を組織および管理するための専用モジュールを定義し、必要なページに導入します.(個人感覚、おすすめ)
例は、uni-appプロジェクトのルートディレクトリの下にcommonディレクトリを作成し、commonディレクトリの下にhelperを新規作成する.jsは、共通のメソッドを定義するために使用されます.

const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  

export default {  
    websiteUrl,  
    now,  
    isArray  
}  

次にpages/index/index.vueでモジュールを参照

  
    import helper from '../../common/helper.js';  

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + helper.now());  
        },  
        methods: {  
        }  
    }  
 

この方式はメンテナンスが便利ですが、毎回導入する必要があるのが欠点です.
Vueをマウントprototype
使用頻度の高い定数や方法を直接Vueに拡張する.prototypeでは、各Vueオブジェクトが「継承」されます.(個人感覚では、グローバル変数が少ない方はこの方法が使えます)
例は、main.jsに属性/メソッドをマウントする

Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';  
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
}; 

そしてpages/index/index.vueで呼び出す

  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + this.now());  
        },  
        methods: {  
        }  
    }  
 

この方法はmain.jsで定義すると、各ページで直接呼び出されます.
Tips

各ページに重複する属性やメソッド名が表示されないようにする.

・Vue.prototypeにマウントする属性または方法を推奨し、統一した接頭辞を付けることができる.例えば$url、global_urlこれにより、コードを読む際にも現在のページの内容と区別しやすくなります.

globalData(推奨しない)
アプレットではアプリ上でglobalDataを宣言できますが、Vueにはこの属性がなく、APIを使用してこの値を読み書きできます.
Vuex
VuexはVue専用です.jsアプリケーション開発のステータス管理モード.集中型ストレージ管理アプリケーションのすべてのコンポーネントのステータスを採用し、対応するルールでステータスが予測可能な方法で変化することを保証します.
計算プロパティ

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //       getter
    reversedMessage: function () {
      // `this`    vm   
      return this.message.split('').reverse().join('')
    }
  }
})

結果:
Original message: “Hello”
Computed reversed message: “olleH”
条件付きレンダリング

v-if

v-else

v-else-if

v-show

簡単な例

一般に、v-ifはより高いスイッチングオーバーヘッドを有し、v-showはより高い初期レンダリングオーバーヘッドを有する.したがって、非常に頻繁に切り替える必要がある場合は、v-showを用いるのが好ましい.実行時に条件が変更されない場合は、v-ifを使用するとよい.
リストレンダリング