Bermula dengan arahan Vue: Mari kita bincangkan tentang enam arahan terbina dalam yang biasa digunakan

Artikel ini akan membawa anda melalui perintah Vue dan memperkenalkan enam arahan terbina dalam yang biasa digunakan saya harap ia akan membantu semua orang.

Klasifikasi Arahan

Arahan ialah sintaks templat yang disediakan oleh vue untuk pembangun untuk membantu pembangun dalam memaparkan halaman. (Belajar perkongsian video: tutorial video vuejs) Data yang digunakan oleh

ditakrifkan dalam data contoh dan acara ditakrifkan dalam kaedah contoh.

• Arahan pemaparan kandungan: Bantu pembangun dalam memberikan kandungan teks elemen DOM
• Arahan pengikatan atribut : Bantu pembangun sebagai atribut Elemen mengikat nilai atribut secara dinamik
• Arahan mengikat acara: Bantu pembangun untuk mengikat acara kepada elemen
• Dua hala arahan mengikat: Bantu pembangun mendapatkan data borang dengan cepat tanpa mengendalikan DOM (perubahan dalam sumber data akan disegerakkan ke halaman dan perubahan pada halaman juga akan disegerakkan ke sumber data)
• Arahan pemaparan bersyarat : Membantu pembangun mengawal paparan dan penyembunyian DOM seperti yang diperlukan
• Arahan pemaparan senarai : Membantu pembangun membuat gelung membuat struktur senarai berdasarkan tatasusunan

1 Arahan pemaparan kandungan

v-text

boleh sahaja. memaparkan kandungan teks biasa, Akan menulis ganti kandungan asal di dalam teg

<p v-text="gender">性别</p>

{{ }} Ungkapan interpolasi

hanya boleh memaparkan kandungan teks biasa , tidak akan menimpa kandungan asal di dalam teg

<p>性别：{{ gender }}</p>

v-html< . 🎜>

v-bind: atau:

<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->

ialah atribut unsur dinamik

nilai atribut mengikat

Nota: Ungkapan interpolasi dan

v-bind

juga menyokong operasi ungkapan javascript

<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->

3 . Arahan mengikat acara

v-on: atau @

{{ 1 + 2 }}  //一元运算
{{ ok ? 'YES' : 'NO'}}  //三元运算
{{ message.split('').reverse().join('') }}  //字符串的反转

<div :id="&#39;list-&#39; + id"></div>  <!--字符串和变量的拼接-->

mengikat acara kepada elemen

parameter lulus

Jika tiada parameter diluluskan: akan ada parameter rasmi lalai

, iaitu objek dan atribut sasaran di dalam menghala ke elemen DOM daripada peristiwa terikat semasa

<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{
            add(){
                this.count ++; //相当于vm.count ++;
            }
        }
    })
</script>

Lepasi satu Parameter: acara akan ditimpa Untuk menggunakan parameter yang diluluskan oleh anda sendiri dan mengekalkan acara tersebut, anda boleh menghantar parameter sebenar yang lain secara manual, dan parameter rasmi ialah. pilihan

Pengubah suai acara
• event
boleh digunakan selagi ia adalah acara Berikut adalah 5 yang biasa digunakan
• $event

<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{                    
            add(n,event){
                //修改
                this.count +=n;

                //判断
                if(this.count % 2 === 0)
                    event.target.style.color = &#39;red&#39;;
                else
                    event.target.style.color = &#39;&#39;;
            }                    
        }
    })
</script>

pengubah suai kunci

Pengubah suai yang hanya boleh digunakan apabila peristiwa papan kekunci dicetuskan Berikut ialah dua yang biasa digunakan

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

.

<!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>

4. Arahan pengikatan dua hala

v-model

按键修饰符	说明
.esc	按键盘esc键时
.enter	按键盘enter键时

<!--举个例子-->
<!--keyup是事件名称     .esc是按键修饰符     clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">

Dapatkan data borang dengan cepat (hanya digunakan untuk elemen borang , seperti: input, textarea, pilih)

Pengubah suai eksklusifPengubah suai yang hanya boleh digunakan untuk model v

<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

五、条件渲染指令

v-show

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

<p v-show="flag">这是被 v-show 控制的元素</p>

v-if

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

<p v-if="flag">这是被 v-if 控制的元素</p>

v-else-if

配合 v-if 指令一起使用，否则将不会被识别

<div v-if="type === &#39;A&#39;">优秀</div>
<div v-else-if="type === &#39;B&#39;">良好</div>
<div v-else-if="type === &#39;C&#39;">一般</div>
<div v-else>差</div>

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

• item是 被循环的每一项 ，名字随意
• items是 待循环的数组 ，名字随意

<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>

    <tbody>
        <!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
        <!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
        <tr v-for="(item,index) in list">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
       </tr>
    </tbody>
</table>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:&#39;张三&#39;, gender:&#39;男&#39; },
                { id: 2, name:&#39;李四&#39;, gender:&#39;女&#39; },
                { id: 3, name:&#39;王五&#39;, gender:&#39;男&#39; }
            ]
        }
    })
</script>

注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

• key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）
• key 的属性值只能是 字符串/数字 类型，否则报错
• key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系）

<tr v-for="(item,index) in list" :key="item.id">

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Bermula dengan arahan Vue: Mari kita bincangkan tentang enam arahan terbina dalam yang biasa digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!