Vue 2.0内部指令
这次给大家带来Vue 2.0内部指令，使用Vue 2.0内部指令的注意事项有哪些，下面就是实战案例，一起来看一下。
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>
<p id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script>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>
<p id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script>页面会显示5个li，插值的效果是li会显示与数组b一 一对应的元素，v-for有点类似于for in循环
2-3 v-text v-html 文本（html字符串）指令
<body>
<p id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>可以联想到jquery的text()、html()。到现在，你会发现前面都是利用插值操作，即{{}}，这种做法会在一定程度上影响性能。
2-4 v-on 绑定事件监听器
实例如下：
<body>
<p id="app">
<button v-on:click="Hi()">Button</button>
</p>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script>同理，类比jquery的on()方法，绑定事件用的，实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作，如mouseout、mouseover等等。
2-5 v-bind指令
实例如下：
<body>
<p id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</p>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>效果为a标签显示红色，且其src属性为vm.message。v-bind指令主要用于设置html标签的属性，其简写形式为 v-bind：——>：
2-6 v-model 数据双向绑定指令
实例如下：
<body>
<p id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</p>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>当input输入的值发生变化时，p标签包含的内容也会随之变化，且与前者保持一致。
2-7 v-pre 指令
实例如下：
<body>
<p id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</p>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>第一个p标签输出“前端工程师”，而第二个p标签则会跳过vue编译，输出原始值，即{{message}}。
2-8 v-cloak指令
v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行，且其须要与css一起使用
2-9 v-once指令
v-once指令的作用是只有当DOM树第一次渲染时起作用。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Vue 2.0内部指令. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
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
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
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
计算机能直接执行的指令包括哪两个部分
Dec 09, 2020 am 09:15 AM
计算机能直接执行的指令包括操作码和操作数两个部分。操作码是指计算机程序中所规定的要执行操作的那一部分指令或字段，其实就是指令序列号，用来告诉CPU需要执行哪一条指令。
Apakah arahan untuk mengelakkan kejadian menggelegak?
Nov 21, 2023 pm 04:14 PM
Arahan untuk mengelakkan peristiwa menggelegak termasuk stopPropagation(), cancelBubble attribute, event.stopPropagation(), event.cancelBubble attribute, event.stopImmediatePropagation(), dsb. Pengenalan terperinci: 1. stopPropagation() ialah salah satu arahan yang paling biasa digunakan, digunakan untuk menghentikan penyebaran peristiwa. Apabila peristiwa dicetuskan, memanggil kaedah ini boleh menghalang acara daripada berterusan, dsb.
Prompt tidak lagi diperlukan Anda boleh memainkan sistem dialog berbilang modal hanya dengan iChat ada di sini!
May 15, 2023 pm 05:55 PM
Xi Xiaoyao Technology berkata bahawa pengarang asal |. Kerja InternChat menekankan kemesraan pengguna dengan berinteraksi dengan chatbot dengan cara yang melampaui bahasa (kursor dan gerak isyarat) untuk tugasan pelbagai mod. Nama InternChat juga menarik, mewakili interaksi, bukan lisan dan chatbots, dan boleh dirujuk sebagai iChat. Tidak seperti sistem interaktif sedia ada yang bergantung pada bahasa tulen, iChat meningkatkan kecekapan komunikasi antara pengguna dan chatbots dengan menambahkan arahan menunjuk. Selain itu, penulis juga
指令是控制计算机执行的命令，它由什么和地址码组成
Jan 11, 2021 am 11:43 AM
指令是控制计算机执行的命令，它由操作码和地址码组成。通常一条指令包括两方面的内容：操作码和操作数（地址码），操作码决定要完成的操作，操作数指参加运算的数据及其所在的单元地址。
Selesaikan ralat Vue: Tidak dapat menggunakan arahan v-bind dengan betul untuk mengikat sifat
Aug 25, 2023 pm 02:35 PM
Selesaikan ralat Vue: Tidak dapat menggunakan arahan v-bind dengan betul untuk mengikat sifat Semasa pembangunan menggunakan Vue, kita sering menghadapi ralat apabila menggunakan arahan v-bind untuk mengikat sifat. Ralat seperti ini boleh menyebabkan aplikasi kami tidak berjalan dengan betul atau tidak dipaparkan dengan betul, jadi sangat penting untuk kami menyelesaikannya dengan cepat. Di bawah, kami akan membincangkan beberapa kemungkinan punca ralat ini dan cara membetulkannya. Ralat: Sifat objek terikat menggunakan arahan v-bind tidak wujud Apabila menggunakan v-bind untuk mengikat sifat,
