Un article expliquant en détail la directive vue et ses filtres (avec des exemples de code)

Cet article vous apporte des connaissances pertinentes sur la vue frontale. Parlons de ce que sont les instructions de rendu de contenu et les instructions de liaison d'attributs. Amis intéressés, jetons-y un coup d'œil. J'espère que cela sera utile à ceux qui en ont besoin. aide!

Commandes et filtres vue

Commande de rendu de contenu

La commande de rendu de contenu est utilisée pour aider les développeurs à restituer le contenu textuel des éléments DOM. Il existe trois instructions de rendu de contenu couramment utilisées.

v-text

Exemple

<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: '男'
    }
});

Expression d'interpolation {{}}Les doubles accolades{{}}双大括号

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

<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种修饰符如下：

sont souvent utilisées dans le développement réel et n'écraseront pas le rendu d'origine
Exemple

<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

peut restituer les chaînes balisées en contenu HTML réel
Exemple

rrreeerrreee

Instructions de liaison d'attribut

Remarque : Interpolation les expressions ne peuvent être utilisées que dans les nœuds de contenu d'élément, pas dans les nœuds d'attribut des éléments

Lier dynamiquement la valeur d'attribut v-bind

Ajouter l'instruction d'attribut v-bind : avant l'attribut pour lier dynamiquement la valeur de l'élément. Vue stipule que v-bind peut être abrégé en :, exemple. 🎜rrreee

Utiliser une expression javascript🎜🎜Dans la syntaxe de rendu de modèle fournie par vue, en plus de prendre en chargela liaison de valeurs de données simples De plus, il prend également en charge le fonctionnement des expressions javascript, telles que 🎜rrreee🎜 Notez que lors de la liaison de l'attribut v-bind de l'abréviation, si le contenu de la liaison doit être épissé dynamiquement, la chaîne doit être placée entre guillemets simples, tels que 🎜 rrreee

Event Binding Command🎜

v-on Binding Event🎜🎜V-on Binding Event Command, aide les programmeurs à lier les événements d'écoute aux éléments DOM, le format est le suivant🎜 rrreeerrreee🎜v-on : Il peut également être abrégé en @🎜rrreee🎜Remarque : les objets DOM natifs incluent onclick, oninput, onkeydown Après avoir remplacé les événements natifs par la liaison d'événement de vue formulaire, ils sont : v-on:click, v-on:input, v-on:keydown🎜

Event object🎜🎜vue fournit Il existe une variable fixe intégrée $ event, qui est l'objet événement natif du DOM e🎜rrreeerrreee

Event modifier🎜🎜Appelez event dans la fonction de traitement d'événements .preventDefault() ou event.stopPROpagation() sont des exigences très courantes. Par conséquent, vue fournit le concept de modification d'événements pour aider les programmeurs à contrôler plus facilement le déclenchement des événements. Les cinq modificateurs couramment utilisés sont les suivants : 🎜

🎜

Modificateur d'événement	Description
.prevent🎜	Empêcher le comportement par défaut (par exemple : empêcher un lien de sauter, empêcher la soumission d'un formulaire, etc.) 🎜🎜
.stop🎜	Arrêter le bouillonnement de l'événement🎜🎜
.capture🎜	Déclencher le courant événement en mode capture Fonction de gestion des événements 🎜🎜
.once🎜	L'événement lié n'est déclenché qu'une seule fois🎜🎜
.self code>🎜<td>Le gestionnaire d'événements n'est déclenché que lorsque <code>event.target est l'élément actuel lui-même🎜🎜🎜🎜🎜Exemple 1 : 🎜rrreeerrreee🎜Apprentissage recommandé : "🎜Tutoriel vidéo vue.js🎜 "🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!