目錄

? 關于Vue指令的介紹

? v-text與v-html

??v-on

??v-model

??v-show與v-if

? v-bind

??v-for

---

? 前言：在學習Vue框架過程中，大家一定要多參考官方API ！

Vue2官方網址https://v2.cn.vuejs.org/v2/guide/

? 關于Vue指令的介紹

Vue指令是Vue.js框架中用于操作DOM元素的一種機制。指令提供了一種便捷的方式，可以在DOM元素上附加自定義行為。Vue指令的基本語法是v-后跟指令名，例如v-if、v-for、v-bind等。指令可以接受一個或多個參數，并且可以包含表達式，這些表達式會在指令綁定的元素上求值。Vue指令的參數和表達式提供了靈活的數據綁定和事件處理機制，使得開發(fā)者能夠更加高效地操作DOM和響應數據變化。

---

? v-text與v-html

v-text 和v-html 都會覆蓋標簽體中的內容?(插值表達式插入變量，不會覆蓋標簽體中的內容 )

但v-text 會把內容當做文本來處理，v-html 會把內容當做html 內容處理，可以解析標簽。

		<div id="app"><p>{{ message }}Vue</p><p v-text="message">Vue</p><p v-html="message">Vue</p></div><script>var app = new Vue({el: '#app',data: {message: '<b>Hello</b>'}})</script>

---

??v-on

v-on：用于監(jiān)聽DOM事件，可以簡寫為@，用于在元素上監(jiān)聽原生事件，并在觸發(fā)時執(zhí)行一些JavaScript代碼。

		<div id="app"><input type="button" value="觸發(fā)" v-on:click="test()"/><p>{{message}}</p></div><script>var app = new Vue({el: '#app',data: {message: ''},methods:{test(){this.message="觸發(fā)";}}})</script>

---

??v-model

v-model：用于雙向數據綁定，一般用在表單輸入和應用狀態(tài)之間建立雙向綁定。

		<div id="app"><input type="text" v-model="message"/><p>{{message}}</p></div><script>var app = new Vue({el: '#app',data: {message: ''}})</script>

---

???v-show與v-if

v-if?和?v-show：用于條件渲染，根據條件決定是否顯示或隱藏元素。v-if?是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當地被銷毀和重建。

? v-show 本質是通過控制標簽的display屬性來隱藏/顯示標簽的，效率高
??v-if 本質是通過dom元素來切換，讓標簽直接從網頁刪掉，顯示時再重新創(chuàng)建標簽，效率低?

		<div id="app"><img v-show="isShow" src="img/lisa.jpg" /><img v-if="isShow" src="img/lisa.jpg" /><input type="button" @click="oper()" value="隱藏/顯示" /></div><script>var app = new Vue({el: '#app',data: {isShow: true},methods: {oper() {this.isShow = !this.isShow;}}})</script>

---

? v-bind

v-bind：用于綁定屬性，可以簡寫為:，用于動態(tài)地綁定一個或多個屬性，或一個組件 prop 到表達式。

		<div id="app"><img v-bind:src="imgsrc[index]"  /><input type="button" value="切換" @click="oper()" /></div><script>var app = new Vue({el: '#app',data: {imgsrc:["img/lisa.jpg","img/金珍妮.jpg","img/金智秀.jpg"],index:0},methods:{oper(){if(this.index==2){this.index=0;}else{this.index++;}}}})</script>

?? v-bind：屬性名 = "變量名"? ，?一旦為屬性添加v-bind，值就是一個在data中定義的變量了

?? 還可以簡寫為? ?: 屬性名

---

??v-for

v-for：用于列表渲染，可以基于源數據多次渲染一個元素或模板，通常循環(huán)遍歷數組或對象。

		<div id="app"><ul><li v-for="user in users">姓名:{{user.name}}年齡:{{user.age}}性別:{{user.gender}}</li></ul></div><script>var app = new Vue({el: '#app',data: {users:[{name:"Tom",age:16,gender:"男"},{name:"Jim",age:18,gender:"女"},{name:"Lie",age:20,gender:"女"}]}})</script>

?

---

希望這篇關于?Vue常用指令的介紹?能對大家有所幫助，歡迎大佬們留言或私信與我交流~~

學海漫浩浩,我亦苦作舟!大家一起學習,一起進步!