Rumah hujung hadapan web tutorial js Vue 2.0中内部指令是什么

Vue 2.0中内部指令是什么

Oct 16, 2017 am 09:49 AM
dalaman arahan apa yang

1.Vue.js介绍

        当前前端三大主流框架:Angular、React、Vue。React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升。另外,Vue友好的API文档更是一大特色。Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库。Vue.js具有响应式编程和组件化的特点。响应式编程,即保持状态和视图的同步,状态也可以说是数据吧;而其组件化的理念与React则一样,即“一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势。

2.内部指令

2-1.v-if v-else v-show:前两者一般配合使用,v-show的效果类似于v-if。

实例如下:


<body>
    <div id="app">
       <p v-if="flag">if</p>
       <p v-else>else</p>
       <p v-show="flag">show</p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
            flag:true
        }
    });
</script>
Salin selepas log masuk

DOM结构中,三个p标签中的内容是否显示在页面中取决于flag的布尔值属性。当flag为true时,if和show都会显示,else也不会存在于DOM结构中。v-if和v-show的不同体现在:v-if是根据条件的值判断是否加载,可以减轻服务器的压力,但是缺点是当改变条件的值,页面又要加载一次;v-show则无论条件的值是否为true,都会加载(若条件为true,则display属性设置为其默认属性,反之,设置为none)

2-2.v-for 循环指令

实例如下:


<body>
    <div id="app">
     <ol>
         <li v-for="b in b">{{b}}</li>
     </ol>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          b:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,1,2]
        }
    });
</script>
Salin selepas log masuk

页面会显示5个li,插值的效果是li会显示与数组b一 一对应的元素,v-for有点类似于for in循环

2-3 v-text v-html 文本(html字符串)指令


<body>
    <div id="app">
     <p v-text="msgText"></p>
     <p v-html="msgHtml"></p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          msgText:"China",
          msgHtml:"<span>中国</span>"
        }
    });
</script>
Salin selepas log masuk

可以联想到jquery的text()、html()。到现在,你会发现前面都是利用插值操作,即{{}},这种做法会在一定程度上影响性能。

2-4 v-on 绑定事件监听器

实例如下:


<body>
    <div id="app">
     <button v-on:click="Hi()">Button</button>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        methods:{
            Hi:function(){
                alert("Hello World!")
            }
        }
    });
</script>
Salin selepas log masuk

同理,类比jquery的on()方法,绑定事件用的,实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作,如mouseout、mouseover等等。

2-5 v-bind指令

实例如下:


<body>
    <div id="app">
        <a v-bind:style="{color:&#39;red&#39;}" :src="message">{{message}}</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>
Salin selepas log masuk

效果为a标签显示红色,且其src属性为vm.message。v-bind指令主要用于设置html标签的属性,其简写形式为 v-bind:——>:

2-6 v-model 数据双向绑定指令

实例如下:

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>
Salin selepas log masuk
Salin selepas log masuk

当input输入的值发生变化时,p标签包含的内容也会随之变化,且与前者保持一致。

2-7 v-pre 指令

实例如下:

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>
Salin selepas log masuk
Salin selepas log masuk

第一个p标签输出“前端工程师”,而第二个p标签则会跳过vue编译,输出原始值,即{{message}}。

2-8 v-cloak指令

     v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行,且其须要与css一起使用

2-9 v-once指令

    v-once指令的作用是只有当DOM树第一次渲染时起作用。


Atas ialah kandungan terperinci Vue 2.0中内部指令是什么 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah jenis proses ccsvchst.exe? Apakah jenis proses ccsvchst.exe? Feb 19, 2024 pm 11:33 PM

ccsvchst.exe ialah fail proses biasa yang merupakan sebahagian daripada perisian Symantec Endpoint Protection (SEP), dan SEP ialah penyelesaian perlindungan titik akhir yang dibangunkan oleh syarikat keselamatan rangkaian terkenal Symantec. Sebagai sebahagian daripada perisian, ccsvchst.exe bertanggungjawab untuk mengurus dan memantau proses berkaitan SEP. Pertama, mari kita lihat SymantecEndpointProtection(

Bagaimana untuk mendapatkan item menggunakan arahan dalam Terraria? -Bagaimana untuk mengumpul barang di Terraria? Bagaimana untuk mendapatkan item menggunakan arahan dalam Terraria? -Bagaimana untuk mengumpul barang di Terraria? Mar 19, 2024 am 08:13 AM

Bagaimana untuk mendapatkan item menggunakan arahan dalam Terraria? 1. Apakah arahan untuk memberikan item dalam Terraria Dalam permainan Terraria, memberi arahan kepada item adalah fungsi yang sangat praktikal. Melalui arahan ini, pemain boleh terus mendapatkan barangan yang mereka perlukan tanpa perlu melawan raksasa atau teleport ke lokasi tertentu. Ini boleh menjimatkan masa dengan banyak, meningkatkan kecekapan permainan dan membolehkan pemain memberi lebih tumpuan kepada meneroka dan membina dunia. Secara keseluruhan, ciri ini menjadikan pengalaman permainan lebih lancar dan menyeronokkan. 2. Cara menggunakan Terraria untuk memberikan arahan item 1. Buka permainan dan masukkan antara muka permainan. 2. Tekan kekunci "Enter" pada papan kekunci untuk membuka tetingkap sembang. 3. Masukkan format arahan dalam tetingkap sembang: "/berikan [nama pemain][ID item][kuantiti item]".

Permulaan pantas VUE3: menggunakan arahan Vue.js untuk menukar tab Permulaan pantas VUE3: menggunakan arahan Vue.js untuk menukar tab Jun 15, 2023 pm 11:45 PM

Artikel ini bertujuan untuk membantu pemula memulakan dengan cepat dengan Vue.js3 dan mencapai kesan penukaran tab yang mudah. Vue.js ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina komponen boleh guna semula, mengurus keadaan aplikasi anda dengan mudah dan mengendalikan interaksi antara muka pengguna. Vue.js3 ialah versi terkini rangka kerja Berbanding dengan versi sebelumnya, ia telah mengalami perubahan besar, tetapi prinsip asas tidak berubah. Dalam artikel ini, kami akan menggunakan arahan Vue.js untuk melaksanakan kesan penukaran tab, dengan tujuan membiasakan pembaca dengan Vue.js

Apakah pelayar dwi-teras? Apakah pelayar dwi-teras? Feb 20, 2024 am 08:22 AM

Pelayar dwi-teras ialah perisian penyemak imbas yang menyepadukan dua teras penyemak imbas yang berbeza. Kernel adalah bahagian teras penyemak imbas, bertanggungjawab untuk memaparkan kandungan web dan melaksanakan skrip web dan fungsi lain. Pelayar tradisional biasanya hanya menggunakan satu kernel, seperti pelayar IE menggunakan kernel Trident, pelayar Chrome menggunakan kernel WebKit/Blink, pelayar Firefox menggunakan kernel Gecko, dsb. Pelayar dwi-teras menyepadukan dua teras berbeza ke dalam satu penyemak imbas, dan pengguna boleh bertukar-tukar antaranya secara bebas mengikut keperluan. Kemunculan pelayar dwi-teras

Apakah CPU? Apakah CPU? Feb 22, 2024 pm 05:55 PM

cpu ialah unit pemprosesan pusat. Analisis 1 Unit pemprosesan pusat [CPU, Unit Pemprosesan Pusat] ialah litar bersepadu berskala besar, yang merupakan teras pengkomputeran dan teras kawalan komputer. Fungsi utamanya adalah untuk mentafsir arahan komputer dan memproses maklumat data dalam perisian komputer. Tambahan: Apakah yang termasuk dalam CPU? 1 CPU merangkumi komponen pemikiran pengiraan, komponen daftar dan komponen kawalan Komponen pemikiran pengiraan boleh melakukan operasi aritmetik alamat atau titik terapung, operasi anjakan dan operasi pemikiran, dan juga boleh melakukan pengiraan alamat dan. penukaran. Ringkasan/Nota CPU terutamanya menerangkan arahan komputer dan memproses maklumat data dalam perisian komputer.

Terokai kemungkinan tak terhingga kaedah input dengan arahan MC terbina dalam (alat inovatif untuk mencipta pengalaman permainan yang sempurna - kaedah input dengan arahan MC terbina dalam) Terokai kemungkinan tak terhingga kaedah input dengan arahan MC terbina dalam (alat inovatif untuk mencipta pengalaman permainan yang sempurna - kaedah input dengan arahan MC terbina dalam) May 02, 2024 pm 03:01 PM

Peranti mudah alih telah menjadi bahagian penting dalam kehidupan manusia dalam masyarakat moden. Permainan juga telah menjadi salah satu bentuk hiburan utama di masa lapang orang ramai. Terdapat orang yang sentiasa berusaha membangunkan alatan dan teknologi baharu untuk mengoptimumkan permainan dan meningkatkan pengalaman permainan. Kaedah input dengan arahan MC sendiri adalah salah satu inovasi yang menarik perhatian. Dan bagaimana ia boleh membawa pengalaman permainan yang lebih baik kepada pemain Artikel ini akan menyelidiki kemungkinan tak terhingga kaedah input arahan MC terbina dalam. Pengenalan kepada kaedah input arahan MC terbina dalam Kaedah input arahan MC terbina dalam adalah alat inovatif yang menggabungkan fungsi arahan MC dan kaedah input pintar. Ini membolehkan lebih banyak operasi dan fungsi Dengan memasang kaedah input ini pada peranti mudah alih, pemain boleh menggunakan pelbagai arahan dengan mudah dalam permainan. Masukkan arahan dengan pantas untuk meningkatkan kecekapan permainan

Apakah syiling ALICE? Apakah syiling ALICE? Feb 23, 2024 am 09:28 AM

Apakah syiling ALICE? Syiling ALICE ialah mata wang kripto digital yang diilhamkan oleh perkataan Inggeris "ALICE", yang melambangkan kreativiti dan imaginasi unik pencipta. Sebagai mata wang maya berdasarkan teknologi blockchain, mata wang ALICE bertujuan untuk menyediakan pengguna dengan persekitaran transaksi yang selamat, mudah dan dilindungi privasi. Aplikasi Teknologi Blockchain Untuk mencapai rakaman dan pengesahan transaksi, mata wang ALICE menggunakan teknologi blockchain. Blockchain ialah pangkalan data teragih yang menghubungkan maklumat transaksi bersama-sama dalam susunan kronologi untuk membentuk rantaian yang tidak berubah. Teknologi ini sangat meningkatkan keselamatan maklumat transaksi, di samping menghapuskan keperluan untuk mempercayai institusi pihak ketiga dan mengurangkan kos transaksi. Disebabkan sifat blockchain yang tidak berpusat, peserta transaksi boleh

Apakah itu WEB coin Webchain? Apakah itu WEB coin Webchain? Feb 21, 2024 pm 06:28 PM

Apakah Webcoin dan Webchain? Webcoin dan Webchain ialah dua projek mata wang kripto yang berkait rapat yang bertujuan untuk menyediakan pengguna global pengalaman perdagangan mata wang digital yang selamat dan tanpa nama. Webcoin ialah mata wang kripto berasaskan teknologi blockchain, dan Webchain ialah platform blockchain asas yang menyokong operasi Webcoin. Gabungan kedua-dua projek ini membolehkan pengguna menjalankan urus niaga mata wang digital yang cekap dan selamat dengan jaminan tanpa nama. WebcoinWebcoin ialah mata wang digital terdesentralisasi menggunakan teknologi blockchain, bertujuan untuk menyediakan persekitaran dagangan yang selamat dan cekap untuk pengguna global. Reka bentuk sumber terbukanya menjadikan rakaman dan pengesahan transaksi lebih telus dan boleh dipercayai. W

See all articles