Rumah > Artikel > hujung hadapan web > 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 pemaparan kandungan digunakan untuk membantu pembangun dalam memberikan kandungan teks elemen DOM . Terdapat tiga arahan pemaparan kandungan yang biasa digunakan.
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: '男' } });
{{}}
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: '男', } });
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>' } });
Nota: Ungkapan interpolasi hanya boleh digunakan dalam nod kandungan elemen, bukan dalam nod atribut elemen
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;">
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="'list-' + 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="'box' + index">!!!!!</div>
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
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 = ''; } } } });
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:
Pengubah suai acara | Penerangan | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
.prevent |
(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!