Paketinstallationstool
1.npm
2.bower
3.yarn
Jetzt empfiehlt das jeder. . . Es soll schneller und besser sein
Build-Packaging-Tool (um ehrlich zu sein, ich kann jetzt immer noch keinen Unterschied erkennen)
Build-Tool Task Executor
Hilfe beim Komprimieren von Dateien? Sprite? Verwirrung usw. erfordern eine manuelle Vereinfachung? Manuelle Arbeit Schluckgrunzen
Verpackungstool Modulverpackungstool
Der modulare Code wird schließlich für die Online-Verwendung zusammengestellt und verpackt, und Seajs müssen auf der Browserseite gepackt werden Mehr empfohlen
js auf der Seite
Die traditionelle Einführungsmethode script src
Knoten dynamische Einführung
Dies ist ein sehr magisches Node-Tool Webpack stellt Ihre Seite dynamisch zusammen. Wenn Sie beispielsweise das Plug-in in Knotenmodulen verwenden, verwenden Sie kein Skript, um es in die Seite einzuführen? Wenn Sie es vorerst nicht verstehen, können Sie nicht mit gesundem Menschenverstand darüber nachdenken (vue-cli) dev Es ist der dynamische Assembly-Build, der alle dynamischen Assemblys in einem zusammenfasst. . .
es2015==es6 =>true
jquery-Attribut selbst hinzufügend
a.css({'property':'+=value ' })
Meine aktuellen Gedanken zu Vue
Lassen Sie uns zunächst über die Vorteile sprechen, die nur Daten verarbeiten, ohne Dom zu bedienen
Lassen Sie uns über die Mängel sprechen. Wenn Sie a tun möchten, müssen Sie b tun, wenn Sie c tun möchten, wenn Sie a tun möchten, wenn Sie b tun möchten b, wenn du c machen willst, wenn du a machen willst, wenn du b machen willst, wenn du b machen willst, wenn du c machen willst, wenn du a machen willst, wenn du b machen willst , wenn du b machen willst, wenn du c machen willst, wenn du a willst Mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach a. Mach b, mach b, mach c, mach a, mach b, mach b, do c, do a, do b, do b, do c, am Ende ist es schwer zu verstehen. Um es bequemer und mühsamer zu machen, müssen wir weitere Dinge hinzufügen
Inhaltsbearbeitbar
div simuliert Textbereich-Rich-Text-Editor
<div class="simutextarea">
<span class="simut-fastenbegin">#youCantDeleteMe</span><span class="simut-textwrapper">
<span class="simut-textplaceholder">Hot or not? Tell it like it is and hashtag!</span>
<span class="simut-textplaceinput" contenteditable="true"> </span>
</span>
</div>
Nach dem Login kopieren
Aber es gibt einige Probleme, die das Cursorproblem nicht lösen können (Sprung zur ersten Seite). Wenn Sie Zeit haben, schauen wir uns an, wie sie es machen >
Je nach Gerät springen
Drei Parteien können springen und den UserAgent vom Browser senden lassen
- Betriebs- und Wartungssprung
- Programmsprung-Umleitung
- Front-End-Umleitung
Gleichzeitig sind diese drei Parteien plus Netzwerk Betreiber und sogar Router können mit bösartigem DNS böswillig Dinge zur Seite hinzufügen
Knoten ist dasselbe wie ein Laufzeitserver
Das Bild befindet sich in der Mitte
- Hintergrundposition Mitte
- Position absolut
Mehrere Zeilen weggelassen (moderne Browser)
overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
Nach dem Login kopieren
CDN-Seite mit wirklich dynamischem Inhalt
Seite Nachdem der Cache vom CDN-Server zwischengespeichert wurde, muss er aktualisiert werden, um ihn wirklich zu ändern. Dann muss der Inhalt, der wirklich sorgfältig geändert werden muss, js erhalten (z B. die aktuell angemeldeten Benutzerinformationen usw.)
js regulär, um alle passenden Übereinstimmungen zu finden
var regEx=/js_quantity[a-z]+/g;regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled')
[0];regEx.exec('js_quantityabc js_quantityminus minus disabled').index;Nach dem Login kopieren
Exec kontinuierlich ausführen
async/await
demo(Script snippet #1)
//测试 async async async await//先来的 返回一个promise 完成时调用resolvevar sleep=function(){ return new Promise(function(resolve,reject){
setTimeout(function(){ console.log('Asettimeout has been executed, promiss has been resolved');
resolve(['sleep1','sleep2']);
},3000);
});
};//后到的 async（异步）修饰function await修饰执行先来的var start=async function(){ let sleepreturnarray=await sleep(); console.log('%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed'+sleepreturnarray[1],'color:red;');
};
start();Nach dem Login kopieren
async bedeutet, dass es sich um eine asynchrone Funktion handelt. „await“ kann nur in dieser Funktion verwendet werden.
Warten bedeutet, auf das Versprechen zu warten, das Ergebnis zurückzugeben, bevor mit der Ausführung fortgefahren wird.
await sollte von einem Promise-Objekt gefolgt werden (andere Rückgabewerte spielen natürlich keine Rolle, sie werden einfach sofort ausgeführt, aber das wäre bedeutungslos...)
Das ist es. Derzeit ist dies die ultimative Lösung für die Hölle des asynchronen Rückrufs. Natürlich muss es mit Babel kombiniert werden. Beachten Sie, dass derzeit Ultimate
vue-Komponentenkommunikation
Auch wenn es Ihnen nicht gefällt, müssen Sie es verwenden, wenn Ihnen die Verwendung zugewiesen wurde. . .
Die Bereiche zwischen Komponenten sind unabhängig und Komponenten müssen häufig Daten zwischen ihnen übertragen. A ist die übergeordnete Komponente, und darunter gibt es die Unterkomponenten B und C.
Die Daten von A können über Requisiten an B und C weitergegeben werden.
A kann über $broadcast Ereignisse von B und C aufrufen, um die Daten von B und C zu verarbeiten.
B und C können die Ereignisse von A über $dispatch aufrufen, um die Daten von A zu manipulieren.
Wenn B die Daten von C verarbeiten muss, ist dies schwieriger. Es muss zuerst an A gesendet und dann an C gesendet werden.
Es ist in Ordnung, wenn das Projekt relativ klein ist. Je größer das Projekt, desto häufiger kommunizieren die beteiligten Komponenten. Zu diesem Zeitpunkt wird es sehr ermüdend und fehleranfällig sein. Darum geht es bei Vuex. Es kann Daten in einer separaten Ebene platzieren und Methoden zur externen Manipulation interner Daten bereitstellen. Es ist ein bisschen vulgär, also lasst es uns verstehen.
=== === ===Update: Vue 2 wurde veröffentlicht, $dispatch und $broadcast wurden entfernt und das Kommunikationsereignis Ping-Pong tritt nicht mehr auf.
Wir benötigen eine Vue-Instanz, die als Kommunikationsmedium fungiert. Die offizielle Vue-Dokumentation nennt es Event-Bus. Standard exportieren new Vue();
Wenn wir eine Ereigniskommunikation zwischen Komponenten benötigen, müssen wir auf diesem Ereignisbus nur $emit und $on verwenden.
import Bus from './bus.js';
export default Vue.extend({
template: `
<div>{{msg}}</div>
`,
data: () => ({
msg: 'Hello World!'
}),
created() {
Bus.$on('setMsg', content => {
this.msg = content;
});
}
});Nach dem Login kopieren
import Bus from './bus.js';
export default Vue.extend({
template: `
<div @click="sendEvent">Say Hi</div>
`,
methods: {
sendEvent() {
Bus.$emit('setMsg', 'Hi Vue!');
}
}
});Nach dem Login kopieren
Event Bus ist eine Praxis, die Sie auch in Vue 1.x verwenden können.
Groß ist in einem kleinen Container zentriert
Methode 1
Groß: Position links 50 %; Breite des Großen ]; oben... Das Gleiche weglassen wie links
Klein: Position relativ;
法二
设置为背景图 且background-position center
文本框和按钮同高对齐(less)
form{ font-size: 0;position: relative; .formitem{ height: 30px;line-height: 30px; font-size: 14px;vertical-align: middle;
} input[type=text]{ .formitem(); border: 1px solid #000; padding: 0 5px 0 35px; width: 235-40px;
} button{ .formitem(); color: #fff;background-color: #000; width: 135px;height: 32px;line-height: 32px;
} &:before{ content: '';display: inline-block;position: absolute; left: 38px; top: 1px; .sprite(@youjiandingyue_07);
}
}Nach dem Login kopieren
正则替换 保留原始内容
http://([A-Za-z0-9.-]+).sammydress.com
https://$1.sammydress.com
$1 是代表([A-Za-z0-9.-]+)匹配到的模糊内容
$1-$n分别代表第1个和第n个括号内匹配到的内容。
var regEx=/([A-Za-z0-9.-]+)abc/;'sdjlfjslfabc'.replace(regEx,'$1def')
Nach dem Login kopieren
结果是"sdjlfjslfdef"
关于vue一点新的体会
专注于操作数据，数据和视图分离，通过操作数据的方式操作视图，mvvm
而不是$().html()等等这种形式
webstorm 保存不会触发webpack watch
原来是这样啊啊啊啊啊啊
text align justify
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用
vue validator
中文文档
关于postcss中用于不转换rem的注释/*no*//*px*/在webpack build中不生效的解决办法
sass loader会把注释去掉 导致用于告诉postcss不用转换rem的注释也去掉 导致边线px变成小数rem 显示不出来的bug
sass?outputStyle=expanded 展开 带注释的？
module: {loaders: [
{test: /\.scss$/,//感謝谷歌loader: 'style!css!postcss-loader!sass?outputStyle=expanded',// include: APP_PATH},
]
},Nach dem Login kopieren
webpack 可以接受形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules 的配置参数后的loader
