寫在前面的話：
文章是個人學習過程中的總結，為方便以后回頭在學習。
文章中會參考官方文檔和其他的一些文章，示例均為親自編寫和實踐，若有寫的不對的地方歡迎大家和我一起交流。
VUE基礎系列目錄
一.v-model
v-model是作用於input/textarea等表單控件的雙向數據綁定指令，當我們修改表單元素的內容，會自動的更新vue中的數據
#示例
<!DOCTYPE html> <html> <head> <title>vue中的指令(中)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id='box'> <input v-model='msg' type='text'/> <br> 這里是msg的值：{{msg}} </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { msg: 'hello' } }); </script> </body> </html>
#結果
我們可以清楚的看到，當我們改變了input輸入框的內容時，數據自動的更新到了msg中，相應的輸入框下方的的值也發生了變化，這就是v-model的特性。
二.v-show
v-show稱為vue中的條件渲染，它可以控制元素的隱藏和顯示：通過元素的display屬性值去控制。用法也比較簡單，我們直接看示例。
#示例
<!DOCTYPE html> <html> <head> <title>vue中的指令(中)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id='box'> <h1 v-show='hideValue'>我是一段文本，會被隱藏</h1> <h1 v-show='showValue'>我是一段文本，會正常顯示</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { showValue: true, hideValue: false } }); </script> </body> </html>
#結果
可以看到，當v-show中的表達式的值為真時，文本會正常顯示；為假時，元素會添加一個內聯元素：display:none;
注意：在javascript中，表達式的條件為真不只是它的值為true，為假的也不一定是false。
三.v-if / v-else /v-else-if
v-if也是屬於vue中的條件渲染指令，作用同v-show一樣用於控制元素的顯示和隱藏，不一樣的是v-if的javascript表達式為假時，元素不會存在於DOM文檔中的。
#示例
<!DOCTYPE html> <html> <head> <title>vue中的指令(中)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <h1 v-if='isDisplay'>isDisplay為真</h1> <h1 v-if='hideValue'>hideValue為假,該元素不會顯示在界面上,也不會出現在DOM文檔中</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { isDisplay: true, hideValue: false } }) </script> </body> </html>
#結果
可以看到hideValue為假，所以對應的h1元素並沒有存在於DOM文檔中。
四.v-for
v-for指令用於循環渲染一組數據（數組或者對象）。下面我們使用v-for指令輸入一下數組和對象的值。
#v-for循環數組
<!DOCTYPE html> <html> <head> <title>vue中的指令(中)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <ul> <li v-for='item in arr'> {{item}} </li> </ul> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { arr: ['今天','起床','很早','心情','不錯'] } }) </script> </body> </html>
v-for除了循環出每一個數組元素item之外，還支持第二個參數作為數組的下標。
<!DOCTYPE html> <html> <head> <title>vue中的指令(中)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <ul> <li v-for='(item,index) in arr'>下標為{{index}}的數據為：{{item}}</li> </ul> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { arr: ['今天','起床','很早','心情','不錯'] } }) </script> </body> </html>
#v-for循環對象
<!DOCTYPE html> <html> <head> <title>vue中的指令(中)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <!-- 循環對象：第一種 --> <ul> <li v-for='item in obj'>{{item}}</li> </ul> <!-- 循環對象：第二種 --> <ul> <li v-for='(item,key) in obj'>{{key}}:{{item}}</li> </ul> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { arr: ['今天','起床','很早','心情','不錯'], obj:{ name: 'test', age: 20, desc: '堅持就是苦逼' } } }) </script> </body> </html>
五.v-on
v-on指令用於監聽元素的事件，在事件觸發時，可以執行一個javascript表達式或者執行一個javascript函數。
#基本的語法
<el on:click="javascript表達式或者javascript函數"> </el>
或者
<el @click="javascript表達式或者javascript函數"> </el>
#示例
<!DOCTYPE html> <html> <head> <title>vue中的指令(中)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="box"> <button v-on:click="clickMe">點擊我,我會調用一個函數</button> <hr> <button v-on:click="counter++">點擊我,count就會加1</button> <p>counter = {{counter}}</p> <hr> v-on:的另外一種寫法@click <button @click="counter++">點擊我,count就會加1</button> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { counter: 0 }, methods: { clickMe: function(){ // 事件對象 console.log(event); // 事件綁定的元素 console.log(event.target); } } }) </script> </body> </html>
六.總結
- v-model指令作用於表單控件，有雙向數據綁定的效果
- v-show為條件渲染指令用於控制元素的隱藏和顯示：通過元素的display屬性值去控制
- v-if/v-else/v-else-if為條件渲染指令用於控制元素的隱藏和顯示：v-if的javascript表達式為假時，元素不會存在於DOM文檔中
- v-on指令用於監聽元素的事件