When doing PC-side projects, sometimes it needs to be compatible with IE browser, so many writing methods need to be changed. Here are some writing methods that I have summarized (compatible to IE9, because vue.js supports at least IE9, and further down, you need to use native JS )
PS: The project is a vue project that introduces vue.js, in the form of new Vue ({ el:'#app' }), and does not use scaffolding.
1. In order to ensure that the imported js files will not cause page problems due to official website updates, download and save the used js and css files to the project.
2. Methods must be written in the form of function: (){}, including methods in data, moved, methods, etc. Arrow functions cannot be used.
3. Do not use let or const to define variables, use var
4. When using echart, options should be written outside new Vue({}) and written as a global variable. Note: Because it is not written in data(), options are not responsive data.
5. Introduce the JQ.js file and use ajax to send the request:
$.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 success uses .bind(this) to ensure that this can be used normally in the callback function
6. Use the following methods to add thousandths to a number. You cannot use .toLocaleString()
formatNum: function (value) {
if (!value) return 0
return value
.toString()
.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,')
},
7. You cannot use for...of/in, use the original for loop
for(var i = 0; i < data.length; i++){
// todo
}
8. Add v-cloak to the #app tag to prevent flickering problems when the page is loaded (solve the flickering problem of interpolation expressions)
At the same time, add it to the shared style file
9. IE11 and IE10 are not compatible with template tags (but IE9 lacks support...)
**Solution:** Do not use the template tag in the file, use other tags instead.
PS: In a certain project, I need to use v-for and merge tables (using rowspan and colspan attributes) to make tables, so one row needs to use two tr tags, so I use template. When making IE compatible, display It failed, and finally replaced template with tbody, which solved it perfectly (there can be zero or more tbody in a table, see MDN document: The Table element )
10.IE browser automatically converts the week in the interface into English
This is the data obtained by the IE browser interface.
This is the data obtained by the Google Chrome interface.
It’s so cheating, I can only do the conversion myself.