Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend View.js Was sind die am häufigsten verwendeten Anweisungen in Vue?

Was sind die am häufigsten verwendeten Anweisungen in Vue?

青灯夜游
青灯夜游
Nov 25, 2020 am 11:32 AM
vue 指令

Zu den allgemeinen Befehlen für vue gehören: v-once-Befehl, v-show-Befehl, v-if-Befehl, v-else-Befehl, v-else-if-Befehl, v-for-Befehl, v-html-Befehl, v-text-Befehl, v -bind-Befehl, v-on-Befehl, v-model-Befehl usw.

Was sind die am häufigsten verwendeten Anweisungen in Vue?

vue.js definiert sich offiziell als Datenvorlagen-Engine und stellt eine Reihe von Anweisungen zum Rendern von Daten bereit.

Die Anweisungen von Vue.js beginnen mit v-. Sie wirken sich auf HTML-Elemente aus. Wenn die Anweisungen an Elemente gebunden sind, können wir einige spezielle Verhaltensweisen hinzufügen Stellen Sie sich Direktiven als spezielle HTML-Attribute vor. Der Zweck der

-Direktive besteht darin, ein bestimmtes Verhalten entsprechend auf das DOM anzuwenden, wenn sich der Wert des Ausdrucks ändert.

Zusammenfassung der allgemeinen Anweisungen von Vue

1.v-once

kann eine einmalige Interpolation durchführen, wenn sich die Daten ändern, wird der Inhalt bei der Interpolation nicht aktualisiert. Beachten Sie jedoch, dass sich dies auf andere Datenbindungen auf dem Knoten auswirkt: 

<div id="app">
        <p v-once>原始值: {{msg}}</p>
        <p>后面的: {{msg}}</p>
        <input type="text" v-model="msg">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
       el: &#39;#app&#39;,
        data: {
           msg: &#39;今天的天气很好!&#39;
        }
    });
Nach dem Login kopieren

Das Hinzufügen des Befehls v-once ändert sich nicht

2.v-show

und v-if Das Gleiche. Der Unterschied besteht darin, dass v-show, wenn es auskommentiert ist, ein display:none-Attribut erhält, um zu verhindern, dass es angezeigt wird! Informationen zur Verwendung finden Sie in der nächsten v-if-Anweisung. Der Unterschied zwischen v-show und v-if:

v-if ist ein echtes bedingtes Rendering, da dadurch sichergestellt wird, dass der bedingte Block ordnungsgemäß zerstört und neu erstellt wird Der Wechsel der Ereignis-Listener und Unterkomponenten in v-show erfolgt einfach basierend auf CSS.

v-if hat höhere Umstellungskosten und v-show hat höhere anfängliche Renderingkosten. Daher ist es besser, v-show zu verwenden, wenn Sie häufig wechseln müssen

, und v-if, wenn es unwahrscheinlich ist, dass sich die Bedingungen während der Laufzeit ändern.

3.v-if

Was auf v-if folgt, ist ein Ausdruck oder ein Ausdruck, der wahr oder falsch zurückgibt. Und der Wert ist wahr und fasle Wenn er falsch ist, wird er auskommentiert. v-show gibt ein display:none-Attribut an, damit es nicht angezeigt wird! true wird normal angezeigt. 

<div id="app">
<p v-if="show">要显示出来!</p>
<p v-if="hide">不要显示出来!</p>
<p v-if="height > 1.55">小明的身高: {{height}}m</p>
<p v-if="height1 > 1.55">小明的身高: {{height1}}m</p>
<p v-if="3>2">打死你: {{height1}}m</p>
</div>
<script src="js/vue.js"></script>
<script>
   new Vue({
                   el: &#39;#app&#39;,
                 data: {
                           show: true,
                            hide: false,
                           height: 1.68,
                            height1: 1.50
                           }
});
</script>
Nach dem Login kopieren
4.v-else

muss zusammen mit v-if verwendet werden, es kann nicht alleine verwendet werden und es müssen andere Tags unter v-if vorhanden sein und es wird ein Fehler gemeldet

<div id="app">
　　<p v-if="height > 1.7">小明的身高是: {{height}}m</p>
　　<p v-else>小明的身高不足1.70m</p>
</div>
<script src="js/vue.js"></script>
<script>
　　new Vue({
　　　　　　　　el: &#39;#app&#39;,
　　　　　　　　data: {
　　　　　　　　height: 1.88
　　　　}
});
</script>
Nach dem Login kopieren

5. v-else -if

Das ist relativ einfach, schauen Sie sich einfach den Code an, hahaha. Geben Sie die Note ein und die entsprechende Stufe wird angezeigt. 

<div id="app">
        <p>输入的成绩对应的等级是:</p>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 75">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               score: 90  // 优秀 良好 及格 不及格
            }
        });
    </script>
Nach dem Login kopieren
6.v-for

Erstellen Sie eine Liste basierend auf Daten, ähnlich zum Durchqueren in JS. Sein Datentyp kann

Array | sein. Object

|. item stellt einen Alias ​​für das aktuell durchlaufene Element bereit (Sie können ihm einen beliebigen Namen geben). v-for hat eine höhere Priorität als andere Anweisungen wie v-if

<body>
        <div id="app">
            <!-- 遍历数组 -->
            <p v-for="(d,index) in msg">
                {{index +&#39;:&#39;+d}}
            </p>
            <!-- 遍历对象 -->
            <div v-for="(dd,index) in obj">
                {{index+&#39;:&#39;+dd}}
            </div>
            <!-- 遍历对象 也可以不要index索引 -->
            <div v-for="dd2 in obj">
                {{dd2}}
            </div>
            <!-- 遍历num和string -->
            <p v-for="gg in num2">{{gg}}</p>
            <p v-for="gg2 in string2">{{gg2}}</p>
             
        </div>
    </body>
    <script src="vue/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:&#39;#app&#39;,
            data:{
                msg:[123,98,25,63],
                obj:{name:&#39;敏敏&#39;,age:&#39;21&#39;,height:&#39;160&#39;},
                num2:&#39;1335454&#39;,  //注意这里不要写成了num2:1335154
                string2:&#39;xvzhiming&#39;
            }
        })
    </script>
Nach dem Login kopieren
　7.v-html

Doppelte geschweifte Klammern interpretieren die Daten als normalen Text statt als HTML-Code. Um echtes HTML auszugeben, müssen Sie

Beachten Sie, dass v-html mit Vorsicht verwendet werden sollte, da Sicherheitsprobleme auftreten können. Auf der offiziellen Website wird erklärt: Jeder auf Ihrer Website dynamisch gerenderte HTML-Code kann sehr gefährlich sein, da er leicht beschädigt werden kann kann zu XSS-Angriffen führen. Verwenden Sie die HTML-Interpolation nur für vertrauenswürdige Inhalte und niemals für vom Benutzer bereitgestellte Inhalte. 

<div id="app" v-html="html">
　　<p v-text="msg">哈哈哈</p>  
</div>
<script type="text/javascript">
　　new Vue({
        el:&#39;#app&#39;,
        data:{
            msg:&#39;我爱敏敏！！&#39;,
            html:&#39;<p>大海森林我都不爱！</p>&#39;
            }
    })
</script>　
Nach dem Login kopieren

8.v-text

Das Hinzufügen von V-Text zu einer Notiz überschreibt den ursprünglichen Inhalt im Tag. Wie im folgenden Beispiel wird er nicht angezeigt

Verwendung

v-html 而且给一个标签加了v-html 里面包含的标签都会被覆盖。

<div id="app">
    <p v-text="msg">哈哈哈</p>
</div>
<script type="text/javascript">
    new Vue({
        　　el:&#39;#app&#39;,
        　　data:{
        　　　　msg:&#39;我爱敏敏&#39;
            }
        })
</script>
Nach dem Login kopieren

Beispiel

<!-- 完整语法 --> 
<a v-bind:href="url">...</a> 
<!-- 缩写 --> <a :href="url">...</a>
Nach dem Login kopieren
Sie können auch Klassennamen und CSS-Stile usw. binden.

<div id="app">
     改变src alt等属性
        <img v-bind:src="imgSrc" :alt="alt">
        <img :src="imgSrc1" :alt="alt">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               imgSrc: &#39;img/img_01.jpg&#39;,
               imgSrc1: &#39;img/img_02.jpg&#39;,
               alt: &#39;我是美女&#39;
            }
        });
    </script>
Nach dem Login kopieren

Beachten Sie, dass v-blnd in der Eingabe verwendet wird und die Schreibmethode nicht mehr in { eingeschlossen ist {}};

<div id="app">
        //v-for是一个遍历                 给他一个calss 如果index===cative class名是active，如果不等就为空
        //index 是v-for的索引
        <p v-for="(college, index) in colleges" :class="index === activeIndex ? &#39;active&#39;: &#39;&#39;">
            {{college}}
        </p>
        <p :style="{color: fontColor}">今天的天气很好!</p>
    </div>
 
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               colleges: [
                   &#39;iOS学院&#39;,
                   &#39;Java学院&#39;,
                   &#39;HTML5学院&#39;,
                   &#39;UI学院&#39;,
                   &#39;VR学院&#39;
               ],
                activeIndex: 0,
                fontColor: &#39;green&#39;
            }
        });
    </script>
Nach dem Login kopieren

10.v -on

Es gibt einige Verwendungen von Bindungsereignissen, die im späteren Blog erwähnt werden

<body>
        <div id="app"> <br>　　　　　　　　　　　　　　//加粗的内容刚刚学时 很容易出错 注意不要加{{}}；
            原始值<input type="" name="" id="" <strong>:value=name</strong> />
             模板<input type="" name="" id="" <strong>:value=name.split(&#39;&#39;).reverse().join()</strong> />
            methods<input type="" name="" id="" <strong>:value=fz()</strong> />
            conputed<input type="" name="" id="" <strong>:value=fz2</strong> />
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:&#39;#app&#39;,
            data:{
                name:&#39;chenglianjie&#39;
            },
            methods:{
                fz(){
                    return this.name.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            },<br>　　　　　　　　　　　　　　//这是vue的计算属性 在我的博客vue分类里面有介绍
            computed:{
                fz2(){
                    return this.name.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            }
        })
    </script>
Nach dem Login kopieren

11.v-Modell

v-model ist ein Befehl, der auf < Wird in Eingabe>,