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!

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

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>

Salin selepas log masuk

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

Salin selepas log masuk

Ungkapan interpolasi `{{}}`Double pendakap

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

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

Salin selepas log masuk

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

Salin selepas log masuk

v-html

boleh menjadikan rentetan berteg ke dalam kandungan html sebenar
Contoh

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

v-on: juga boleh disingkatkan sebagai. @

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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 链接");
                }
            } 
        });

Salin selepas log masuk

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!