PC 側のプロジェクトを行う場合、IE ブラウザに対応させる必要がある場合があり、多くの記述方法を変更する必要があるため、いくつかの記述方法をまとめました (vue.js は少なくとも IE9 をサポートしているため、IE9 に対応)さらに下では、ネイティブ JS を使用する必要があります)
PS: このプロジェクトは、新しい Vue ({ el:'#app' }) の形式で vue.js を導入する Vue プロジェクトであり、スキャフォールディングは使用しません。
1. インポートされた js ファイルが公式 Web サイトの更新によってページの問題を引き起こさないようにするために、使用する js および css ファイルをダウンロードしてプロジェクトに保存します。
2. メソッドは、data、moved、メソッドなどのメソッドを含む、function: (){} の形式で記述する必要があります。アロー関数は使用できません。
3. 変数の定義には let や const を使用せず、var を使用してください。
4. echart を使用する場合、オプションは new Vue({}) の外側に記述し、グローバル変数として記述する必要があります。注: オプションは data() に記述されていないため、応答データではありません。
5. JQ.js ファイルを導入し、ajax を使用してリクエストを送信します。
$.ajax({
url: baseUrl + '/xxx/xxx/xxx',
type: 'GET',
data: {
},
dataType: 'json',
xhrFields: {
withCredentials: true // 此字段标识要跨域传输数据
},
crossDomain: true,
success: function (res) {
}.bind(this) // 使用 .bind(this) 来保证回调函数中可以正常使用 this
})
Ajax の成功では、.bind(this)を使用して、これがコールバック関数で正常に使用できるようにします。
6. 数値に 1000 分の 1 を加算するには、次のメソッドを使用します。.toLocaleString() は使用できません。
formatNum: function (value) {
if (!value) return 0
return value
.toString()
.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,')
},
7. for...of/in は使用できません。オリジナルの for ループを使用してください。
for(var i = 0; i < data.length; i++){
// todo
}
8. #app タグに v-cloak を追加して、ページの読み込み時のちらつきの問題を防止します (補間式のちらつきの問題を解決します)。
同時に共有スタイルファイルに追加します
9. IE11 と IE10 はテンプレート タグと互換性がありません (ただし、IE9 はサポートされていません...)
**解決策:** ファイル内でテンプレート タグを使用せず、代わりに他のタグを使用してください。
追伸: とあるプロジェクトで、v-forを使ってテーブルをマージ(rowspan属性とcolspan属性を使用)してテーブルを作る必要があり、1行にtrタグを2つ使う必要があるため、テンプレートを使用しています。失敗し、最終的にテンプレートを tbody に置き換えました。これで完全に解決されました(テーブルには 0 個以上の tbody が存在する可能性があります。MDN ドキュメント: The Table elementを参照してください)。
10.IE ブラウザはインターフェイス内の週を自動的に英語に変換します
これは IE ブラウザ インターフェースで取得されたデータです
これは Google Chrome インターフェースで取得されたデータです
あまりにも不正なので、自分で変換するしかありません。