Vue での Vue.prototype の使用に関する詳細な説明

Vue.prototype.$appName = '私のアプリ'

新しいVue({
  beforeCreate: 関数() {
    console.log(this.$appName)
  }
})

Vue.prototype.appName = '私のアプリ'

新しいVue({
  データ： {
    // おっと、`appName` も定義したインスタンス プロパティ名です。
    appName: '他のアプリの名前'
  },
  beforeCreate: 関数() {
    console.log(このアプリ名)
  },
  作成: 関数 () {
    console.log(このアプリ名)
  }
})

// メイン.js
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
'./store' からストアをインポートします

Vue.config.productionTip = false
Vue.prototype.$appName = 'main'

新しいVue({
    el: '#app',
    店、
    ルーター、
    コンポーネント: { アプリ },
    テンプレート: '<App/>',
})

// すべてのコンポーネントにプロパティ $appName を登録し、初期値 'main' を割り当てると、すべてのコンポーネントが this.$appName を使用してこの変数にアクセスできます。
// コンポーネントに値が割り当てられていない場合、初期値は 'main' になります

// ホーム.vue
<テンプレート>
  <div>
    <div @click="changeName">名前を変更</div>
    <div @click="gotoTest2">テスト2に移動</div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  方法:{
    名前を変更する(){
      this.$appName = "test1"
    },
    gotoTest2(){
      this.$router.push('/about')
    } 
  }
}
</スクリプト>

// について.vue
<テンプレート>
  <div>
    <div>test2 の {{this.$appName}}</div>
  </div>
</テンプレート>

Vue.prototype.$appName = { 名前: 'main' }

 // メイン.js
Vue.prototype.$reverseText = 関数 (プロパティ名) {
  this[プロパティ名] = this[プロパティ名]
    。スプリット（''）
    。逆行する（）
    。参加する（''）
}

// 対応するコンポーネント <script>
エクスポートデフォルト{
  データ（） {
    戻る {
      メッセージ: 'こんにちは'
    }
  },
  作成された() {
    console.log(this.message) // => "こんにちは"
    this.$reverseText('メッセージ')
    console.log(this.message) // => "olleH"
  }
}
</スクリプト>

npm インストール vue-axios --save

npm install qs.js --save //その機能は、json形式をデータに必要な形式に直接変換することです

// メイン.js
'vue' から Vue をインポートします
'axios' から axios をインポートします
'qs' から qs をインポートします

Vue.prototype.$axios = axios //グローバル登録、使用方法: this.$axios
Vue.prototype.qs = qs // グローバル登録、使用方法: this.qs

// 対応するコンポーネント <script>
  エクスポートデフォルト{
    データ（）{
      戻る {
        ユーザーID:666、　
                トークン：''、
      }
    },
    作成された(){
      this.$axios({
        メソッド:'post',
        url:'api',
        data:this.qs.stringify({ //バックエンドに送信されるデータはこちら userId:this.userId,
          トークン:this.token,
        })
      }).then((response) =>{ //ここではES6構文が使用されています console.log(response) //リクエストが正常にデータを返しました}).catch((error) =>{
        console.log(error) //リクエストが失敗したときに返されるデータ})
    }
  }
</スクリプト>

'echarts' から echarts をインポートします
Vue.prototype.$echarts = echarts 

'base/loading' から myLoading をインポートします。
Vue.component('myLoading',myLoading);

'element-ui' から ElementUI をインポートします。
Vue.js の ElementUI 要素をオーバーライドします。