Vue? ?? ?? ?? ??: 1. "function (name) {...}"? ?? ?? ??? ?????. 2. ?? ?? ??? ???? ?? ??? ??? ?????. 3. "this"? ?? ?????. .iconList"? "" ???? ???? ? ????.

? ??? ?? ??: Windows 7 ???, Vue ?? 2.9.6, DELL G3 ???

vue? ?? ??? ??? ????

vue?? ?? ?? ??

Background

???? ?? ???? ?? ??? ?? ??? ???? ????? ??? ???? ??? ?????? ????? ?? ???? ???? ???? ???.

Idea

?? ?? ??? ????? ??? ?? ?? ?? ??? ??? ???? ???? ???? ????? ???.

??

1. ?? ?? ????

const loadFile = function (name) { // name為文件所在位置
    let xhr = new XMLHttpRequest(),
        okStatus = document.location.protocol === "file:" ? 0 : 200;
    xhr.open('GET', name, false);
    xhr.overrideMimeType("text/html;charset=utf-8");//默認(rèn)為utf-8
    xhr.send(null);
    return xhr.status === okStatus ? xhr.responseText : null;
}
export default loadFile;

2. ?? ??? ??? ???? ?????

import loadFile from '../assets/js/localFile';

?? ?? ???? ?????

            // 以.iconfont為節(jié)點(diǎn)分割字符串，只需要.iconfont之后的字符串
                let iconData = loadFile('iconfont/iconfont.css').split('.iconfont')[1];
                // 獲取第一次出現(xiàn)'}'時候的索引值
                let iconLi = iconData.indexOf('}');
                // 得到第一次出現(xiàn)'}'之后的所有字符串信息【這部分就是我們需要的字體圖標(biāo)的信息】
                let liList = iconData.substring(iconLi + 1, iconData.length-1);
                // 分割每個字體圖標(biāo)信息
                let icons = liList.split('.');
                // 設(shè)置分割標(biāo)識
                let flag = ':before';
                // 循環(huán)獲取到的字體圖標(biāo)數(shù)組
                for (let i = 0; i < icons.length; i++) {
                    // 判斷不為空
                    if (icons[i].indexOf(flag) > -1) {
                        // 獲取圖標(biāo)信息中的class部分，也就是:before之前的信息
                        let liList = icons[i].split(flag);
                        // 將class添加到數(shù)組，最后再頁面上進(jìn)行循環(huán)輸出
                        this.iconList.push(liList[0]);
                    }
                }

????? ??? ?? this.iconList? ?? ???? ??????.

?? ??: "5?? vue.js ??? ???? ? ?? ??"

? ??? Vue?? ?? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!