Eine detaillierte Einführung in die gängige Vorlagensyntax in Vue.js

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der allgemeinen Vorlagensyntax der Vue.js-Studiennotizen vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Kommen Sie und schauen Sie sich den Editor an

Dieser Artikel stellt die allgemeine Vorlagensyntax von Vue.js vor und teilt sie mit allen. Die Details sind wie folgt:

1 . Textrendering

Vue unterstützt das dynamische Rendern von Text, d. h. das Rendern von Textinhalten in Echtzeit bei gleichzeitiger Änderung von Attributen. Gleichzeitig wird zur Verbesserung der Rendereffizienz auch das einmalige Rendern unterstützt, d. h. nach dem ersten Rendern des Textes ändert sich der Textinhalt nicht mehr mit der Änderung des Attributwerts.

Echtzeit-Rendering

 <p class="row">
  <h2>文本 - 实时渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </p>

Die V-Modell-Direktive bindet den Wert des Eingabe-Tags dynamisch zum Attribut msg , das auf der Seite durch den Ausdruck {{ msg }} angezeigt wird. Wenn der Inhalt des Textfelds geändert wird, ändert sich der Inhalt der nachfolgenden Seiten in Echtzeit und bleibt mit dem Inhalt des Textfelds konsistent.

Einmal rendern

 <p class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </p>

Attribute zum VM-Objekt hinzufügen

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       msg_once: "once..."
     }
   });
 });

Wenn die Seite zum ersten Mal geladen wird, wird die Seite einmal angezeigt..., wenn das Span-Tag mit der v-once-Anweisung hinzugefügt wird, egal wie Der Inhalt des Textfelds wird geändert, der Seiteninhalt ändert sich nichts.

HTML-Code-Rendering

In einigen Fällen muss die Seite dynamisch einen Teil des HTML-Codes einfügen.

Attribute zum VM-Objekt hinzufügen Der Attributwert ist ein Stück HTML-Code

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       html: "<span>This is a html tag.</span>"
     }
   });
 });

Nach dem Hinzufügen der v-html -Direktive zum Seitenelement wird das entsprechende Element

 <p class="row">
  <h2>文本 - HTML</h2>
  <p v-html="html"></p>
 </p>

2 >Wie oben bereits vorgestellt Es ist ein einfacher Ausdruck. Darüber hinaus gibt es einige häufig verwendete Ausdrücke.

Operationsausdruck {{ msg }}

Sie können Operatoren in den oben genannten einfachen Ausdrücken verwenden, und Vue rendert das Ergebnis nach der Operation auf der Seite

 <p>
  <h4>运算表达式</h4>
  <span v-pre>{{ Number(number)+ }}：</span>
  <input v-model="number" type="text" />
  <span>运算结果：{{ Number(number)+ }}</span>
 </p>

Geben Sie eine Zahl in das Textfeld ein, und Vue berechnet das Ergebnis in Echtzeit mithilfe der Operatoren im Ausdruck und zeigt es an. Da der Inhalt des Textfelds eine Zeichenfolge ist, muss das Zahlenattribut im Ausdruck typkonvertiert in eine Zahl umgewandelt werden.

Ausdruck für ternäre Operatoren

Vue unterstützt die Verwendung von ternären Operatoren innerhalb von Ausdrücken

 <p>
  <h4>三元运算表达式</h4>
  <span v-pre>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}：</span><span>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}</span>
 </p>

Javascript-Methode

Grundlegende Methoden, die von Javascript unterstützt werden, können auch in Ausdrücken verwendet werden, und Vue führt die Methode dynamisch aus und zeigt das Endergebnis an

 <p>
  <h4>Javascript方法</h4>
  <span v-pre>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}：</span><span>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</span>
</p>

In diesem Beispiel werden die Zeichen des msg_once-Attributwerts in umgekehrter Reihenfolge neu kombiniert.

3. Filter

Filter werden häufig zum Formatieren und Anzeigen von Inhalten verwendet. Vue unterstützt benutzerdefinierte Filter Fügen Sie zunächst Filtermethoden im

-Objekt hinzu

vm

Alle Filtermethoden müssen im
definiert werden Attribut ist der erste Parameterwert der Methode der ursprünglich übergebene Inhalt, der verarbeitet werden muss, und der Rückgabewert der Methode ist der neue Inhalt, der verarbeitet wurde.

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       filter_msg: 'base'
     },
     filters: {
       filter: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter1';
       },
       filter2: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter2';
       },
       filter_arg: function (value, arg1, arg2) {
         if (!value) {
           return '';
         }
 
         return value + ' ' + arg1 + ' ' + arg2;
       }
     }
   });
 });

Der benutzerdefinierte Filter wird wie folgt verwendet

filters

<p>
  <h4>单一过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
 </p>

Im obigen Beispiel durchläuft der Filter die Pipeline Das Symbol „|“ ist mit dem zu verarbeitenden Inhalt verbunden, und der Attributwert

wird durch den Filter geleitet und der Inhalt wird angehängt und angezeigt.

Gleichzeitig unterstützt Vue auch die Verbindung mehrerer Filter filter_msg filter1

 <p>
  <h4>串联过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>
 </p>

In diesem Beispiel durch die Das Pipe-Symbol „|“ kann mehrere Filter verbinden und die Ausgabe jedes vorherigen Filters wird als Eingabe des nächsten Filters verwendet, bis das Endergebnis angezeigt wird.

Wenn der Filter mehrere Parameter hat, unterstützt Vue auch den Aufruf mit Parametern

 四、常用指令

指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。

常用的指令如下：

• v-bind

• v-on

• v-for

• v-if

• v-else-if

• v-else

• v-show

v-bind

该指令用来给元素绑定一个或多个特性

 <p>
  <h>v-bind（属性绑定）</h>
  <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/>
  <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/>
  <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button>
 </p>

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       btn_enabled: true
     }
   });
 });

在上面的例子里，给 vm 对象增加一个名称为 btn_enabled 的布尔属性，在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值

页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。

v-on

该指令绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用在普通元素上时，只能监听原生 DOM 事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性。

在 vm 对象的 methods 属性里添加自定义方法

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     methods: {
       btn_click: function () {
         console.log("button click!");
       },
       btn_clickWithEvent: function($event){
         console.log($event);
       },
       btn_clickWithMsg: function (msg) {
         console.log("Message is:" + msg);
       }
     }
   });
 });

通过属性 v-on:click="btn_click" 在按钮上添加 click 事件

 <p>
  <h4>v-on（事件绑定）</h4>
  <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/>
  <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/>
  <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)")：</span><button v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)" type="button">点我！</button><br/>
  <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button>
 </p>

页面效果如下

v-on指令也支持缩写，用@符号代替，比如： @click="btn_click" 。

v-for

该指令用来基于源数据多次渲染元素或模板块。

在 vm 对象里添加一个数组类型的属性 books

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       books: ["深入浅出node", "C#本质论", "编程珠玑"]
     }
   });
 });

通过 v-for 指令实现一个简单列表

 <p>
  <h4>v-for（循环）</h4>
  <ul>
    <li v-for="item in books">
     {{ item }}
    </li>
  </ul>
 </p>

页面效果如下

 v-for 属性值是一个 item in expression 结构的表达式，其中 item 代表 expression 运算结果的每一项。最终的HTML代码如下

v-if、v-else-if、v-else

条件渲染指令，通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用，而 v-else-if 、 v-else 必须和 v-if 一起使用。

下面是一个简单用法的例子

 <p>
  <h4>v-if、v-else-if、v-else（分支）</h4>
  <span>分支示例：</span>
  <input type="text" v-model="number" />
  <span v-if="number>10">大于10</span>
  <span v-else-if="number==10">等于10</span>
  <span v-else>小于10</span><br/>
 </p>

页面显示如下

当文本框里输入小于10的数字时，右侧只显示“小于10”的文本内容。

查看源码发现，只有“小于10”的内容的 span 标签存在，另外两个标签被插入到页面中。

同样，在输入大于10的数字时，右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。

v-show

该指令也是条件渲染指令，但是与上述的 v-if 有不同。这可以通过一个例子来说明。

 <p>
  <h4>v-show（条件渲染）</h4>
  <span>v-show示例：</span>
 <input type="text" v-model="number" />
  <span v-show="number>10">大于10</span>
  <span v-show="number==10">等于10</span>
  <span v-show="number<10">小于10</span><br/>
 </p>

将上面例子里的指令都换成 v-show ，页面显示如下

从页面显示的结果上看，没有任何区别。但是查看源码会发现，符合表达式结果判断的元素内容将被显示，不符合结果判断的元素将被隐藏，即被加上 display: none; 的样式。

Wie aus dem Vergleich der beiden obigen Beispiele ersichtlich ist

1. v-if: Elemente dynamisch einfügen oder löschen

2. v-show: Elemente dynamisch ein- oder ausblenden

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die gängige Vorlagensyntax in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!