Artikel yang menerangkan arahan vue dan penapisnya secara terperinci (dengan contoh kod)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue bahagian hadapan. Mari kita bincangkan tentang arahan pemaparan kandungan dan arahan pengikat atribut Rakan yang berminat, mari kita lihat di bawah Membantu!

perintah dan penapis vue

Perintah pemaparan kandungan

Perintah pemaparan kandungan digunakan untuk membantu pembangun dalam memberikan kandungan teks elemen DOM . Terdapat tiga arahan pemaparan kandungan yang biasa digunakan.

v-text

Contoh

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

Ungkapan interpolasi {{}}Double pendakap

selalunya digunakan dalam pembangunan sebenar , tidak akan tulis ganti pemaparan asal
Contoh

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

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

v-html

boleh menjadikan rentetan berteg ke dalam kandungan html sebenar
Contoh

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

Arahan pengikatan atribut

Nota: Ungkapan interpolasi hanya boleh digunakan dalam nod kandungan elemen, bukan dalam nod atribut elemen

Nilai atribut pengikatan dinamik v-bind

Tambah arahan atribut v-bind: sebelum atribut untuk mengikat nilai elemen secara dinamik Vue menetapkan bahawa v-bind boleh disingkatkan sebagai :, contoh

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

Gunakan ungkapan javascript.

Dalam sintaks pemaparan templat yang disediakan oleh vue, selain daripada menyokong nilai data ringkas yang mengikat, ia juga menyokong Operasi ungkapan javascript, seperti

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

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

Ambil perhatian bahawa semasa pengikatan atribut v-bind singkatan, jika kandungan pengikatan perlu disambung secara dinamik, rentetan itu hendaklah dibalut dengan petikan tunggal, seperti

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

Perintah mengikat acara

v- pada acara mengikat

perintah acara mengikat v-on membantu pengaturcara dalam mengikat acara mendengar untuk elemen DOM Formatnya adalah seperti berikut

<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: juga boleh disingkatkan sebagai. @

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

Nota: Objek DOM asli mempunyai peristiwa asli seperti onclick, oninput, onkeydown, dsb., yang harus digantikan dengan ikatan acara vue Selepas menentukan borang, mereka ialah: v-on:click, v-on:input, v-on:keydown

Event object

vue menyediakan pembolehubah tetap terbina dalam$event, yang Ia adalah DOM asli objek acara 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 = '';
                    }
                }
              
            }
          
        });

pengubah acara

Ia adalah keperluan yang sangat biasa untuk memanggil event.preventDefault() atau event.stopPROpagation() dalam fungsi pemprosesan acara. Oleh itu, vue menyediakan konsep pengubahsuaian acara untuk membantu pengaturcara mengawal pencetus peristiwa dengan lebih mudah. Lima pengubah suai yang biasa digunakan adalah seperti berikut:

.capture

Pengubah suai acara

Penerangan

.prevent

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

Halang tingkah laku lalai

(contohnya: menghalang pautan daripada melompat, menghalang penyerahan borang, dsb. .) td>

.stop

Cegah acara menggelegak

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

Cetus pengendali acara semasa dalam mod tangkap

.sekali code>

Acara terikat hanya dicetuskan sekali

.self

Hanya dalam acara. Pengendali acara dicetuskan apabila sasaran ialah elemen semasa itu sendiri

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

Contoh 1:

Pembelajaran yang disyorkan : "tutorial video vue.js"

Atas ialah kandungan terperinci Artikel yang menerangkan arahan vue dan penapisnya secara terperinci (dengan contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!