suchen

Heim  >  Artikel  >  Web-Frontend  >  Was sind die am häufigsten verwendeten Anweisungen in Vue?

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

青灯夜游
青灯夜游Original
2020-11-25 11:32:2036740Durchsuche

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;
        }
    });

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>
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>

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>
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>
　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>　

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>

Beispiel

<!-- 完整语法 --> 
<a v-bind:href="url">...</a> 
<!-- 缩写 --> <a :href="url">...</a>
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>

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>

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>

11.v-Modell

v-model ist ein Befehl, der auf 04092a60f95750b1a8974723f4f82f9e, 221f08282418e2996498697df914ce4e, 4750256ae76b6b9d804861d8f69e79d3 und Komponenten für bidirektionale Bindungsoperationen von Daten beschränkt ist.

Verwandte Empfehlungen:

Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten)

Vue-Tutorial-Empfehlung: 2020 neueste 5 vue.js-Video-Tutorial-Auswahl

Weitere programmierbezogene Kenntnisse finden Sie unter: Einführung in die Programmierung ! !

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten Anweisungen in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：So verwenden Sie vue.js in PycharmNächster Artikel：So verwenden Sie vue.js in Pycharm

In Verbindung stehende Artikel

Mehr sehen