vue.js
- Was ist Vue?
- Ein fortschrittlicher
JavaScriptRahmen
- Wofür wird Vue verwendet?
- Der Effekt ist
构建用户界面
- Was sind die Eigenschaften?
- Funktionen sind:, müssen
渐进式nur auf Daten achten
Grundlegende Verwendung
Montagepunkt des Vue
- 1. Mount Point El-Funktion: Teilen Sie der Vue-Instanz mit, auf welche Instanz Sie die Daten in Daten rendern möchten
- 2. Vorsichtsmaßnahmen
- (1) Der Einhängepunkt kann den ID-Selektor (vue empfohlen), den Klassen-Selektor und den Etiketten-Selektor verwenden
- Grundsätzlich werden in der Entwicklung ID-Selektoren verwendet, um die Eindeutigkeit von HTML-Tags sicherzustellen
- Wenn die Daten in Daten für mehrere Elemente wirksam sein sollen, können Sie die vue-Instanz in das übergeordnete Element einbinden
- (2) Wenn der Selektor mehrere Elemente auswählt, wird nur das erste Element ausgewählt (die unterste Ebene ist der Abfrageselektor).
- (3) Der Einhängepunkt kann nicht als
htmlundbody-Label festgelegt werden (das Programm meldet einen Fehler).
- (1) Der Einhängepunkt kann den ID-Selektor (vue empfohlen), den Klassen-Selektor und den Etiketten-Selektor verwenden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
<div id="app">
{
{
message }}
</div>
<hr>
<div id="box" class="container">
{
{
message }}
</div>
<hr>
<div class="container">
{
{
message }}
</div>
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- el : element wird verwendet, um den Einhängepunkt der vue-Instanz festzulegen (auf welches Element die Daten gerendert werden sollen)
- Daten : Die zu rendernden Daten
- Datengesteuert: Vue rendert die Seite automatisch basierend auf den Daten in den Daten (keine DOM-Operation erforderlich).
- Methoden : Speichern Sie die Methoden in vue
Interpolationsausdruck
Interpolationsausdruck (Vorlagensyntax) offizielles Website-Dokumentportal
- Vue rendert die Daten im Datenobjekt automatisch in die Ansicht
- Hinweis:
(1) { {}}: Interpolationsausdruck, auch Bartsyntax genannt.
(2) Funktion des Interpolationsausdrucks: Daten auf die Seite rendern.
(3) Binäre Operation unterstützen. { {Age + 1}}
(4) Unterstützung Ternäre Arithmetik { {Alter> 30? 'Alter Mann': '小 鲜肉'}}
(5) Unterstützt die Wertesyntax von Arrays und Objekten
(6) Unterstützt keine Verzweigungssyntax und Schleifensyntax
Vue allgemeine Anweisungen
Vue Befehl offizielle Website Dokumentportal
Das Wesentliche an Vue-Anweisungen ist: Vue fügt HTML-Tags einige Attribute hinzu
Jede Anweisung in Vue beginnt mit v- (wird verwendet, um native Attribute von HTML-Tags zu unterscheiden).
