Ein Artikel, der die Vue-Direktive und ihre Filter im Detail erklärt (mit Codebeispielen)

Dieser Artikel bringt Ihnen relevantes Wissen über Front-End-Vue. Lassen Sie uns darüber sprechen, was Anweisungen zum Rendern von Inhalten und Anweisungen zum Binden von Attributen sind. Ich hoffe, dass es für diejenigen hilfreich ist, die es benötigen. helfen!

vue-Befehle und -Filter

Befehl zum Rendern von Inhalten

Der Befehl zum Rendern von Inhalten wird verwendet, um Entwickler beim Rendern des Textinhalts von DOM-Elementen zu unterstützen. Es gibt drei häufig verwendete Anweisungen zum Rendern von Inhalten.

v-text

Beispiel

<div id="app">
    <!-- 把 username 对应的值，渲染到第一个 p 标签中 -->
    <p v-text="username"></p>
    <!-- 把 gender 对应的值，渲染到第二个 p 标签中 -->
    <!-- 注意：第二个 p 标签中，默认文本会被gender值覆盖 -->
    <p v-text="gender">性别</p>
</div>
<!-- 导入 vue 的库文件 -->
    <script src="./lib/vue.js v2.7.13.js"></script>

//创建vue 的实例对象
const vm = new Vue({
    //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
    el: '#app',
    // data 对象就是要渲染到页面上的数据
    data: {
        username: 'zs',
        gender: '男'
    }
});

Interpolationsausdruck {{}}Doppelte geschweifte Klammern{{}}双大括号

在实际开发中应用较多，不会覆盖原有渲染
示例

<div id="app">
    <p>姓名：{{username}}</p>
</div>

const vm = new Vue({
    //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
    el: '#app',
    // data 对象就是要渲染到页面上的数据
    data: {
        username: 'zs',
        gender: '男',
    }
});

v-html

可以把带标签的的字符串，渲染成真正的html 内容
示例

<div id="app">
    <div v-html="info"></div>
</div>

const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                info: '<h4 style="color: red; font-weight: bold;"> 欢迎学习 vuejs</h4>'
            }
        });

属性绑定指令

注意：插值表达式只能用在元素内容节点中，不能用在元素的属性节点

动态绑定属性值 v-bind

在属性前加属性指令 v-bind: 为元素动态绑定值，vue 规定 v-bind 可以简写成: ,示例

<input type="text" v-bind:placeholder="tips">
<img :src="photo" style="width: 150px;">

使用 javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 javascript 表达式的运算，例如

{{ number + 1 }};
{{ ok ? 'YES' : 'NO'}};
{{ message.split('').reverse().join('')}};

<div v-bind:id="&#39;list-&#39; + id"></div>

注意在简写 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串外应包裹单引号，例如

<div :title="&#39;box&#39; + index">!!!!!</div>

事件绑定指令

v-on 绑定事件

v-on 绑定事件指令，辅助程序员为DOM元素绑定监听事件，格式如下

<p>count的值是: {{count}}</p>
        <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
        <button v-on:click="addCount">+1</button>

 const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{
                count: 0,
            },
            // 定义事件的处理函数
            methods:{
                add: function () {
                    // console.log(vm);
                    // vm.count += 1; 
		    // this === vm 
                    this.count += 1;
                }
		// 也可简写成
                add () {
                    // console.log(vm);
                    this.count += 1;
                }
            }
        });

v-on: 也可以简写为 @

<button @click="sub">-1</button>

注意：原生 DOM 对象有 onclick、oninput、onkeydown 等原生事件，替换成 vue 的事件绑定形式后，分别为： v-on:click 、v-on:input、v-on:keydown

事件对象

vue 提供了内置固定的变量 $event ，它就是原生 DOM 的事件对象 e

<!-- 如果 count 为偶数，则按钮背景变为蓝色，否则，取消背景 -->
<!-- vue 提供了内置固定的变量 $event ，它就是原生 DOM 的事件对象 e-->
        <button @click="add(1, $event)">+n</button>

const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{
                count: 0,
            },
            // 定义事件的处理函数
            methods:{
                add (n, e) {
                    this.count += 1;
                    // 判断 this.count 的值是否为偶数
                    if (this.count%2 === 0) {
                        //偶数
                        e.target.style.backgroundColor = 'blue';
                        console.log(e);
                    } else {
                        // 奇数
                        e.target.style.backgroundColor = '';
                    }
                }
              
            }
          
        });

事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPROpagation() 是非常常见的需求。因此， vue 提供了事件修饰的概念，辅助程序员更方便的**对事件的触发进行控制。常用5种修饰符如下：

werden häufig in der tatsächlichen Entwicklung verwendet und überschreiben nicht die ursprüngliche Darstellung
Beispiel

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{},
            // 定义事件的处理函数
            methods:{
                show () {
		    // e.preventDefault();
                    console.log("点击了 a 链接");
                }
            } 
        });

v-html

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止 a 链接跳转、阻止表单提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定事件只触发一次
.self	只有在 event.target

kann getaggte Zeichenfolgen in echten HTML-Inhalt rendern
Beispiel

rrreeerrreee

Attributbindungsanweisung

Hinweis: Interpolation Ausdrücke können nur in Elementinhaltsknoten verwendet werden, nicht in Attributknoten von Elementen

Den Attributwert v-bind dynamisch binden

Fügen Sie die Attributanweisung hinzu v-bind: vor dem Attribut zum dynamischen Binden des Werts des Elements legt Vue fest, dass v-bind beispielsweise als : abgekürzt werden kann 🎜rrreee

Javascript-Ausdruck verwenden🎜🎜In der von Vue bereitgestellten Vorlagen-Rendering-Syntax wird zusätzlich zur Unterstützungdas Binden einfacher Datenwerte darüber hinaus auch unterstützt Betrieb von Javascript-Ausdrücken, wie z. B. 🎜rrreee🎜 Beachten Sie, dass während der Bindung des abgekürzten v-bind-Attributs die Zeichenfolge in einfache Anführungszeichen gesetzt werden sollte, wenn der Bindungsinhalt dynamisch gespleißt werden muss, z. B. 🎜 rrreee

Ereignisbindungsbefehl🎜

v-on-Bindungsereignis🎜🎜v-on-Bindungsereignisbefehl zur Unterstützung von Programmierern Binden Sie Überwachungsereignisse an DOM-Elemente. Das Format ist wie folgt 🎜 rrreeerrreee🎜v-on: Es kann auch als @🎜rrreee🎜 abgekürzt werdenHinweis: Native DOM-Objekte umfassen onclick, oninput, onkeydown Nach dem Ersetzen der nativen Ereignisse durch die Ereignisbindung von vue In der Form sind dies: v-on:click, v-on:input, v-on:keydown🎜

Event object🎜🎜vue bietet eine integrierte feste Variable $ event, das ist das native DOM-Ereignisobjekt e🎜rrreeerrreee

Event modifier🎜🎜Rufen Sie event in der Ereignisverarbeitungsfunktion .preventDefault() oder event.stopPROpagation() sind sehr häufige Anforderungen. Daher bietet Vue das Konzept der Ereignismodifikation, um Programmierern dabei zu helfen, das Auslösen von Ereignissen bequemer zu steuern. Die fünf häufig verwendeten Modifikatoren lauten wie folgt: 🎜

🎜

Event modifier	Description
.prevent🎜	Standardverhalten verhindern (z. B. verhindern, dass ein Link springt, Formularübermittlung verhindern usw.) 🎜🎜
.stop🎜	Stoppt das Sprudeln von Ereignissen🎜🎜
.capture🎜	Lösst den Strom aus Ereignis im Erfassungsmodus Der Ereignishandler 🎜🎜
.once🎜	Das gebundene Ereignis wird nur einmal ausgelöst 🎜🎜
.self code>🎜<td>Der Ereignishandler wird nur ausgelöst, wenn <code>event.target das aktuelle Element selbst ist🎜🎜🎜🎜🎜Beispiel 1: 🎜rrreeerrreee🎜Empfohlenes Lernen: „🎜vue.js Video-Tutorial🎜 „🎜

Das obige ist der detaillierte Inhalt vonEin Artikel, der die Vue-Direktive und ihre Filter im Detail erklärt (mit Codebeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!