Mari bercakap secara mendalam tentang beberapa arahan biasa dalam Vue

Artikel ini akan memberi anda perbincangan mendalam tentang beberapa arahan biasa dalam Vue, saya harap ia akan membantu anda.

Mula-mula mari kita bincangkan tentang rangka kerja Vue Vue ialah rangka kerja JavaScript yang progresif untuk membina antara muka pengguna kepada pemula. Dom maya dan pengikatan data dua hala Vue membolehkan pembangun bermula dengan cepat, saya secara peribadi merasakan arahan Vue sangat mudah digunakan. Dalam artikel ini, mari bercakap tentang Vue arahan!

v-for

Apabila kita mula-mula mempelajari mana-mana bahasa, kita mempunyai lebih kurang bersentuhan dengan untuk

for (let i = 0; i < arr.length; i++) {

}

Vue’s v - for masih sama dengan konsep paling asas dalam js kami, iaitu dua perkataan gelung

v-for dalam kurungan di belakang item dan indeks bersamaan dengan arr[i] dan i dalam gelung for, iaitu sepadan dengan setiap elemen dan subskrip, diikuti dengan in arr ialah :key="item.id" yang terakhir daripada tatasusunan yang ingin kami gelung jika tiada ini: Kunci Vue Kami akan melaporkan ralat, jadi mengapa terdapat Kunci Apakah parameter untuk Kunci? Parameter Key adalah unik, iaitu, tidak kira berapa kali kita gelung, kunci setiap gelung tidak boleh diulang. Kami tidak mengesyorkan menggunakan indeks sebagai Kunci anda di sini apabila mengemas kini komponen Adakah mereka sama. Jika ia sama, gunakan semula jika ia tidak sama, padamkan yang lama dan buat yang baharu. Apabila memberikan komponen tanpa kewarganegaraan mudah, jika anda tidak menambah komponen utama, ia akan digunakan semula di tempatnya secara lalai Nod yang ditambahkan tidak akan dipadamkan, tetapi nilai teks dalam item senarai akan diubah adalah sangat intensif prestasi. Selepas menambah kunci, apabila kandungan perbandingan tidak konsisten, ia akan dianggap sebagai dua nod, nod lama akan dipadamkan dahulu, dan kemudian nod baharu akan ditambah.

v-show

<li v-for="(item,index) in arr" :key="item.id">
     {{ item.name }}
</li>

v-show

dipaparkan berdasarkan nilai Boolean, true dipaparkan pada halaman, false tidak dipaparkan pada halaman Prinsipnya sebenarnya untuk mengawal gaya css untuk membuat paparan komponen atau kotak kami yang sepadan, menyembunyikan dan memaparkan dispaly:"none"dispaly:"block"

v-. if

<div v-show="true"> 我 dispaly:"block" 拉 </div>

<div v-show="false"> 我 dispaly:"none" 拉 </div> //假装我隐藏了 你看不见我

v-if

juga dipaparkan berdasarkan nilai Boolean, yang serupa dengan v-show true dipaparkan pada halaman , dan false Ia tidak akan dipaparkan pada halaman tetapi v-if malas Jika nilai awal false, komponen tidak akan dipaparkan sehingga. kali pertama parameternya menjadi benar akan dipaparkan, tetapi apabila keadaannya menjadi palsu, subkomponen akan dimusnahkan dan dibina semula dengan sewajarnya jika anda perlu menukar dengan kerap, gunakan v- show adalah lebih baik; jika keadaan jarang berubah semasa runtime, v-if adalah lebih baik.

v-else

<div v-if="true">  </div>

<div v-if="false"> 我被销毁了呜呜呜 </div> //假装我隐藏了 你看不见我

menyebut

v-if

dan juga bercakap tentang v-else dalam v-ifApabila syarat tidak dipenuhi, ia akan pergi terus ke v-else Ingat bahawa v-else tidak boleh diikuti dengan tanda sama, dan komponen mesti didahului dengan <. 🎜>v-if v-else-if

<div v-if="false"> 你看不到我啊  </div> //因为我条件不成立

<div v-else> 你能看到我 </div>

Sebut

v-if

dan

v-else dan anda juga akan memikirkan v-else-if Apabila syarat v-if tidak benar, ia akan pergi terus ke v-else-if untuk melihat sama ada syarat itu benar atau tidak. Jika syarat itu benar, maka Untuk menjadikan komponen, komponen mesti didahului dengan v-jikav-sekali

<p v-if="score>=90">厉害</p>

<p v-else-if="score>=60">差不多</p>

v-sekali

Fungsinya adalah untuk mentakrifkannya Elemen atau komponen hanya akan dipaparkan sekali kandungan statik

v-text

<template>
    <div v-once>{{count}}</div>
    <button v-on:click="addCount"> 你点我count也不加 </button>
</template>



<script>
    export default {
        data() {
            return { count: 10 } 
        },
        methods: { 
        addCount: function () {
            this.count += 1;
            console.log(&#39;this.count:&#39;+this.count); 
            } 
        }
    }
</script>

v-text

Masukkan data dalam bentuk teks, yang digunakan untuk mengendalikan teks biasa pada elemen itu sendiri. Jika data dikemas kini, percubaan juga akan berubah

v-html

<p v-text="data"> 你好你好 </p>

v-html

v-html digunakan untuk mengeluarkan html. Perbezaan antara ia dan teks-v ialah teks-v mengeluarkan teks biasa Pelayar Ia tidak akan dihuraikan dengan html, tetapi v-html akan menghuraikannya sebagai teg html dan mengeluarkannya

<🎜. >v-on

<p v-html="data">厉害</p>


页面显示：<p>
            <h1>你好啊<h1>
        </p> // 外层还是会有p标签来包裹



data:<h1>你好啊<h1>

v-on

Ya Cara mudah untuk menulisnya ialah "

@

" Ringkasnya, v-on ialah acara yang mengikat. Anda boleh mengikat berbilang acara kepada satu teg, v-on :Yang pertama ialah acara dan acara itu diikuti dengan kaedah tersuai

 <button v-on:mouseenter=&#39;onenter&#39; @click=&#39;leave&#39;>click me</button>

v-bind

v-bind 也有一个简便的写法就是" : " 简单来说v-on就是用于绑定数据和元素属性 ， 最常用的方法就是用于动态绑定class

 <ul  :class="classObject"></ul>

v-model

v-model是Vue双向绑定指令 ， 它可以在页面是输入的状态同时改变绑定data属性 ， 也会在data属性发生改变的时候也更新页面的状态 ， 我们经常在input上面能发现他的存在 ， 他的本质上其实是绑定了<input :value="test" @input="test = $event.target.value"> ， v-model后面可以跟修饰符比如 .lazy 、.trim 和 .number 这些修饰符一起使用

.lazy 将input的实时更新改为一个change事件 ， 只有失焦的时候input才会触发事件

.trim 去除字符串首尾的空格

.number 将数据转化为值类型

<input v-model="test">

<input v-model.lazy="msg" >

<input v-model.trim="msg">

<input v-model.number="age" type="number">

【相关推荐：vue.js教程】

Atas ialah kandungan terperinci Mari bercakap secara mendalam tentang beberapa arahan biasa dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!