简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > View.js > Hauptteil

Erste Schritte mit Vue-Anweisungen: Lassen Sie uns über die sechs häufig verwendeten integrierten Anweisungen sprechen

青灯夜游
Freigeben： 2022-06-09 20:21:46
nach vorne
2765 Leute haben es durchsucht

Dieser Artikel führt Sie durch die VueBefehle und stellt die sechs häufig verwendeten integrierten Befehle in Vue vor. Ich hoffe, er wird Ihnen hilfreich sein!

Erste Schritte mit Vue-Anweisungen: Lassen Sie uns über die sechs häufig verwendeten integrierten Anweisungen sprechen

Anweisungsklassifizierung

Anweisungen sind eine von Vue für Entwickler bereitgestellte Vorlagensyntax, die verwendet wird, um Entwickler beim Rendern der Grundstruktur der Seite zu unterstützen. (Teilen von Lernvideos: vuejs-Video-Tutorial) Die in

verwendeten Daten sind in den Daten der Instanz definiert, und das Ereignis ist in den Methoden der Instanz definiert

  • Anweisungen zur Inhaltswiedergabe: Unterstützt Entwickler beim Rendern von DOM-Elementen. Textinhalte.
  • Anweisungen zur Attributbindung.: Unterstützt Entwickler beim dynamischen Binden von Attributwerten für die Attribute von Elementen.
  • Anweisungen zur Ereignisbindung Anweisungen zur bidirektionalen Bindung: Unterstützen Sie Entwickler beim schnellen Abrufen von Formulardaten, ohne das DOM bedienen zu müssen (Änderungen an der Datenquelle werden mit der Seite synchronisiert, und Änderungen an der Seite werden auch mit der Datenquelle synchronisiert)
  • Bedingtes Rendering Anweisungen: Unterstützen Sie Entwickler beim Drücken von „Muss die Anzeige und Ausblendung von DOM steuern“.
    • v-text
    • kann nur Klartextinhalte rendern,
  • überschreibt den ursprünglichen Inhalt im Tag 
    <p v-text="gender">性别</p>
    Nach dem Login kopieren

{{ }} Interpolationsausdruck

kann nur Klartextinhalte rendern, nicht Überschreibe den ursprünglichen Inhalt im Tag 

<p>性别：{{ gender }}</p>
Nach dem Login kopieren

v-html

kann markierte Zeichenfolgen in HTML-Inhalte rendern. v-bind: oder:

ist das Attribut des Elements dynamisch Bindungsattributwert 

<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->
Nach dem Login kopieren

Hinweis: Interpolationsausdruck und v-bind unterstützen auch die Operation des Javascript-Ausdrucks 

<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->
Nach dem Login kopieren
{{ 1 + 2 }}  //一元运算
{{ ok ? &#39;YES&#39; : &#39;NO&#39;}}  //三元运算
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}  //字符串的反转
Nach dem Login kopieren

3. Anweisungen zur Ereignisbindung

v-on: oder @

, um Ereignisse an Elemente zu binden , das ist ein Objekt, und das darin enthaltene Zielattribut zeigt auf das DOM-Element des aktuell gebundenen Ereignisses. Übergeben Sie einen Parameter: Das Ereignis wird überschrieben, um die von Ihnen übergebenen Parameter zu verwenden und das Ereignis beizubehalten. Sie können einen tatsächlichen Parameter manuell übergeben. Die formalen Parameter sind optional

<div :id="&#39;list-&#39; + id"></div>  <!--字符串和变量的拼接-->
Nach dem Login kopieren

Ereignismodifikatoren

Modifikatoren, die verwendet werden können, solange es sich um ein Ereignis handelt verwendet

Ereignismodifikatoren

Beschreibung

.preventStandardverhalten verhindern (z. B. verhindern, dass ein Link springt, Formularübermittlung verhindern)

.stop

Ereignis verhindern

    .capture
  • event，它是一个对象，里面的target属性指向的是当前绑定事件的DOM元素
  • 传一个参：event则会被覆盖，为了能用自己传的参又能保留event，则可以手动再传一个实参$event Den aktuellen Event-Handler im Capture-Modus auslösen

.once

Das gebundene Ereignis wird nur einmal ausgelöst

.self
<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{
            add(){
                this.count ++; //相当于vm.count ++;
            }
        }
    })
</script>
Nach dem Login kopieren
Tastenmodifikatoren können nur verwendet werden, wenn Tastaturereignisse ausgelöst werden. Hier sind zwei häufig verwendete Drücken Sie beim Drücken der Esc-Taste auf der TastaturBeim Drücken der Eingabetaste auf der TastaturVier. Zwei-Wege-Bindungsbefehl
Der Event-Handler wird nur ausgelöst, wenn event.target das ist aktuelles Element selbst
Tastenmodifikatoren Beschreibung
.esc
.Enter
<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{                    
            add(n,event){
                //修改
                this.count +=n;

                //判断
                if(this.count % 2 === 0)
                    event.target.style.color = &#39;red&#39;;
                else
                    event.target.style.color = &#39;&#39;;
            }                    
        }
    })
</script>
Nach dem Login kopieren

V-Modell

Formulardaten schnell abrufen (gilt nur für Formularelemente wie Eingabe, Textbereich, Auswahl)

.number Konvertieren Sie den vom Benutzer eingegebenen Wert automatisch in einen numerischen Typ..trimFiltern Sie automatisch die vom Benutzer eingegebenen führenden und nachgestellten Leerzeichen Die Daten werden automatisch aktualisiert, wenn der Fokus verloren geht (im Allgemeinen erfolgt die Aktualisierung in Echtzeit)
<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>
Nach dem Login kopieren

五、条件渲染指令

v-show

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

<p v-show="flag">这是被 v-show 控制的元素</p>
Nach dem Login kopieren

v-if

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

<p v-if="flag">这是被 v-if 控制的元素</p>
Nach dem Login kopieren

v-else-if

配合 v-if 指令一起使用，否则将不会被识别

<div v-if="type === &#39;A&#39;">优秀</div>
<div v-else-if="type === &#39;B&#39;">良好</div>
<div v-else-if="type === &#39;C&#39;">一般</div>
<div v-else>差</div>
Nach dem Login kopieren

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

  • item是 被循环的每一项 ，名字随意
  • items是 待循环的数组 ，名字随意
<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>

    <tbody>
        <!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
        <!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
        <tr v-for="(item,index) in list">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
       </tr>
    </tbody>
</table>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:&#39;张三&#39;, gender:&#39;男&#39; },
                { id: 2, name:&#39;李四&#39;, gender:&#39;女&#39; },
                { id: 3, name:&#39;王五&#39;, gender:&#39;男&#39; }
            ]
        }
    })
</script>
Nach dem Login kopieren

注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

  • key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）
  • key 的属性值只能是 字符串/数字 类型，否则报错
  • key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系）
<tr v-for="(item,index) in list" :key="item.id">
Nach dem Login kopieren

（学习视频分享：web前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonErste Schritte mit Vue-Anweisungen: Lassen Sie uns über die sechs häufig verwendeten integrierten Anweisungen sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
vue vue.js
Quelle：juejin.cn
Vorheriger Artikel：Führen Sie Sie Schritt für Schritt durch, um mit vue3.x ein Flussdiagramm zu zeichnen Nächster Artikel：Ich begleite Sie Schritt für Schritt bei der Entwicklung eines Backgammon-Spiels mit Vue!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Vue 3 und Vuetify 3 greifen auf SCSS/SASS-Variablen in Komponenten zu Ich möchte vordefinierte Variablen in meiner Vue3-Komponente verwenden. <template>&l...
Aus 2023-11-17 13:52:29
0
1
293
Das Modul ist im Vue-Projekt nicht definiert Ich habe gerade eine neue Vue-Anwendung erstellt, indem ich npmini tvue@latest ausgeführt ...
Aus 2023-11-17 12:38:53
0
2
394
Felder von Objekten im Formular validieren – Vue 3 + Vee-validieren + Ja Ich habe ein Formular, in dem sich einige Felder innerhalb eines Objekts befinden: <scr...
Aus 2023-11-16 13:56:09
0
1
169
Vue 3 importiert dynamisch basierend auf Requisiten Ich verwende unplugin-icon, um eine Symbolkomponente zu erstellen. Normalerweise kann ich ...
Aus 2023-11-16 11:40:01
0
1
235
Vue 3 Composition API – Schaltfläche zum Senden des Formulars deaktivieren, bis alle Bedingungen erfüllt sind Ich möchte die Schaltfläche zum Senden des Formulars deaktivieren, bis alle Eingabefelder ...
Aus 2023-11-13 09:41:53
0
3
438
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！