Vue：基礎語法
v-bind
我們已經成功創建了第一個 Vue 應用！看起來這跟渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作。現在數據和 DOM 已經被建立了關聯，所有東西都是響應式的。我們在控制台操作對象屬性，界面可以實時更新！
我們還可以使用v-bind來綁定元素特性!
上代碼：
<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>狂神說Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <span v-bind:title="message"> 鼠標懸停幾秒鍾查看此處動態綁定的提示信息！ </span> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: '頁面加載於 ' + new Date().toLocaleString() } }) </script> </body> </html>你看到的 v-bind 等被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這里，該指令的意思是：“將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致”。
如果你再次打開瀏覽器的 JavaScript 控制台，輸入 app.message = '新消息'，就會再一次看到這個綁定了 title 特性的 HTML 已經進行了更新。
v-if,v-else
什么是條件判斷語句，就不需要我說明了吧（￣▽￣）,以下兩個屬性！
v-ifv-else
上代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>狂神說Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="vue"> <h1 v-if="ok">YES</h1> <h1 v-else>NO</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { ok: true } }); </script> </body> </html>測試：
- 在瀏覽器上運行，打開控制台！
- 在控制台輸入
vm.ok = false，然后 回車，你會發現瀏覽器中顯示的內容會直接變成 NO
注：使用 v-* 屬性綁定數據是不需要 雙花括號 包裹的
v-else-if
- v-if
- v-else-if
- v-else
注：=== 三個等號在 JS 中表示絕對等於（就是數據與類型都要相等）
上代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>狂神說Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="vue"> <h1 v-if="type === 'A'">A</h1> <h1 v-else-if="type === 'B'">B</h1> <h1 v-else-if="type === 'C'">C</h1> <h1 v-else>who</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { type: 'A' } }); </script> </body> </html>測試：觀察在控制台輸入 vm.type = 'B'、'C'、'D' 的變化
v-for
- v-for
格式說明：
<div id="vue"> <li v-for="item in items"> {{ item.message }} </li> </div>注：items 是數組，item是數組元素迭代的別名。我們之后學習的Thymeleaf模板引擎的語法和這個十分的相似！
上代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>狂神說Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="vue"> <li v-for="item in items"> {{ item.message }} </li> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { //items數組 items: [ {message: '狂神說Java'}, {message: '狂神說前端'} ] } }); </script> </body> </html>測試 ：在控制台輸入 vm.items.push({message: '狂神說運維'}) ，嘗試追加一條數據，你會發現瀏覽器中顯示的內容會增加一條 狂神說運維.
v-on
v-on 監聽事件
事件有Vue的事件、和前端頁面本身的一些事件！我們這里的click是vue的事件，可以綁定到Vue中的methods中的方法事件！
上代碼：
<!DOCTYPE html> <html xmlns:v-on=""> <head> <meta charset="UTF-8"> <title>狂神說Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="vue"> <!--在這里我們使用了 v-on 綁定了 click 事件，並指定了名為 sayHi 的方法--> <button v-on:click="sayHi">點我</button> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { message: 'Hello World' }, // 方法必須定義在 Vue 實例的 methods 對象中 methods: { sayHi: function (event) { // `this` 在方法里指向當前 Vue 實例 alert(this.message); } } }); </script> </body> </html>點擊測試
Vue還有一些基本的使用方式，大家有需要的可以再跟着官方文檔看看，因為這些基本的指令幾乎我們都見過了，一通百通！掌握學習的方式！