![JS 部份可能長這樣:
function search() {
var params = {
id: $('#form-id').val(),
name: $('#form-name').val()
}; // 或 new FormData($('form')[0]);
$.post(url, params, function (response) {
var html = '';
response.forEach(function (item) {
html += '<tr>';
html += '<td>' + item.id + '</td>';
html += '<td>' + item.name + '</td>';
html += '<td>' + item.quantity + '</td>';
html += '</tr>';
});
$('tbody').html(html);
});
}](https://image.slidesharecdn.com/vue-intro-170220033514/85/jQuery-Vue-js-5-320.jpg)
![用 this 存取 Vue 實例 data
data: {
form: {
id: '',
name: ''
},
+ results: []
},
methods: {
search: function () {
+ var vm = this; // 因 callback 內 this 指向不同
+ $.post('http://api/', vm.form, function (res) {
+ vm.results = JSON.parse(res);
+ });
}](https://image.slidesharecdn.com/vue-intro-170220033514/85/jQuery-Vue-js-35-320.jpg)
![依賴 data 的寫在 computed
data: {
form: {
id: '',
name: ''
},
results: []
},
+ computed: {
+ isFormValid: function () {
+ return this.form.name !== '';
+ }
+ }
computed 在依賴的data 或computed 屬性更新時，
會自動重新計算](https://image.slidesharecdn.com/vue-intro-170220033514/85/jQuery-Vue-js-42-320.jpg)
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
- 2. PM 跟你說要加新頁面：
- 3. 寫 jQuery 時會先想到什麼？ 1. 從<form> 撈輸入值回來 2. AJAX 請求 3. 串接HTML 字串，塞進<table>
- 4. HTML 先刻一刻: <form onsubmit="return search()" action="#"> <div> <label>編號: </label> <input id="form-id"> </div> <div> <label>零件名: </label> <input id="form-name"> </div> <div> <input type="submit" value="查詢"> </div> </form> <table> <tbody> </tbody> </table>
- 5. JS 部份可能長這樣: function search() { var params = { id: $('#form-id').val(), name: $('#form-name').val() }; // 或 new FormData($('form')[0]); $.post(url, params, function (response) { var html = ''; response.forEach(function (item) { html += '<tr>'; html += '<td>' + item.id + '</td>'; html += '<td>' + item.name + '</td>'; html += '<td>' + item.quantity + '</td>'; html += '</tr>'; }); $('tbody').html(html); }); }
- 6. 問題在哪？
- 7. 畫面不能一目了然 <tbody> <!-- 這裡到底在幹嘛！？！？！？--> </tbody> 必須跨越HTML 和JS 才能找出對應部份 // 跋山涉水過後發現.... response.forEach(function (item) { html += '<tr>'; html += '<td>' + item.id + '</td>'; html += '<td>' + item.name + '</td>'; html += '<td>' + item.quantity + '</td>'; html += '</tr>'; }); $('tbody').html(html);
- 10. 業務邏輯跟細節操作混淆 隨著程式規模變大，很難看出實際的業務邏輯 寫和讀的時間全浪費在差不多但又得重寫的細節 response.forEach(function (item) { html += '<tr>'; html += '<td>' + item.id + '</td>'; html += '<td>' + item.name + '</td>'; html += '<td>' + item.quantity + '</td>'; html += '</tr>'; }); $('tbody').html(html);
- 11. 為了解決上述問題 如果可以...
- 12. 讓 <input> 值同步到 JS 物件 <label>編號: </label> - <input id="form-id"> + <input 把值同步到="JS物件的編號"> <label>零件名: </label> - <input id="form-name"> + <input 把值同步到="JS物件的零件名"> - var params = { - id: $('#form-id').val(), - name: $('#form-name').val() - } - $.post(url, params, function (res) { + $.post(url, JS物件, function (res) {
- 13. 讓事件綁定集中在 HTML - <form onsubmit="return search()" action="#"> + <form 呼叫這個元件的="某個函數"> - $('form').on('submit', search); 另外還要能避免汙染全域變數
- 14. 自動依 JS 物件產生畫面 <table> <tbody> + <tr 自動依這個產生一連串元素="JS的查詢結果陣列"> + <td>陣列元素.編號</td> + <td>陣列元素.零件名</td> + <td>陣列元素.數量</td> + </tr> </tbody> </table> - // 前略 for 迴圈 - html += '</tr>'; - }); - $('tbody').html(html);
- 20. 「漸進式」 前端框架 Vue.js 入門門檻低，學習曲線平順 官方文件好懂不複雜 能屈能伸彈性大 不怕被"JavaScript fatigue" 打倒 圖: Vue 2.0——渐进式前端解决方案 ( www.infoq.com/cn/articles/vue-2-progressive-front-end-solution )
- 21. 從 <script> 開始的 Vue.js 「漸進式」就是不用從一開始就被鎖死在 Node.js、webpack、....等完整建置環境 跟開始用jQuery 一樣簡單！ 介绍- vue.js 用JSFiddle 或JSBin 等環境即時練習 開始使用：把官方文件給的script tag 複製貼上！ <script src="https://unpkg.com/vue/dist/vue.js"></script>
- 22. 宣告式渲染起手式： {{ }} 樣板 <div id="app"> <div>Hello {{ name }}!</div> </div> var app = new Vue({ // 產生一個新的 Vue 實例 el: '#app', // 讓這個實例管控哪個 DOM 節點 data: { // JS 中對應到畫面上的狀態物件 name: 'world' } }); // 試試看改動 name 會發生什麼事情... setTimeout(function () { app.name = 'John'; // 畫面上顯示的 name 也跟著自動被改變了！！ }, 2000);
- 23. 加上 v‐model 數據綁定試試！ <div id="app"> <input type="text" v-model="name"> <div>Hello {{ name }}!</div> </div> var app = new Vue({ el: '#app', data: { name: 'world' } }); 操作看看 <input>，發生了什麼事情？
- 24. 怎麼理解？MVVM 架構 圖: Overview - vue.js ( https://v1.vuejs.org/guide/overview.html )
- 26. 案例中的需求： 1. 從<form> 撈輸入值回來 2. 用<form> 的輸入值執行AJAX 請求 3. 把AJAX 請求的結果陣列轉成<tr> 塞進<table>
- 28. 一樣可以先刻畫面 - <div> + <div id="app"> <form onsubmit="return search()" action="#"> <div> <label>編號: </label> - <input id="form-id"> + <input v-model="form.id"> + <!-- 跟 Vue 實例中的 data + 的 form.id 做雙向同步 --> </div> <div> <label>零件名: </label> - <input id="form-name"> + <input v-model="form.name"> </div>
- 29. 在 JS 裡面用 Vue 把資料接好 - // 先把原本的 code 全部刪掉 var app = new Vue({ el: '#app', // 讓這個 Vue 實例管理 #app 這個 DOM 節點 data: { // data 裏面的屬性可以在 v- 或 {{ }} 等地方取用 form: { id: '', name: '' } } });
- 30. 案例中的需求： 1. 從<form> 撈輸入值回來 2. 用<form> 的輸入值執行AJAX 請求 3. 把AJAX 請求的結果陣列轉成<tr> 塞進<table>
- 31. v‐on: 掛上 submit 事件處理器 <div id="app"> - <form onsubmit="return search()" action="#"> + <form v-on:submit.prevent="search()"> <div> <label>編號: </label> <input v-model="form.id"> </div> v-on: 可直接縮寫成「@」 可加上.prevent 達到event.preventDefault(); 的效果
- 32. 在 methods 寫入對應的處理器 var app = new Vue({ el: '#app', data: { form: { id: '', name: '' } }, + // 使用 methods 定義事件處理器之類的 function + methods: { + search: function () { + // 一樣處理 AJAX 等等 + } + } });
- 33. 案例中的需求： 1. 從<form> 撈輸入值回來 2. 用<form> 的輸入值執行AJAX 請求 3. 把AJAX 請求的結果陣列轉成<tr> 塞進<table>
- 35. 用 this 存取 Vue 實例 data data: { form: { id: '', name: '' }, + results: [] }, methods: { search: function () { + var vm = this; // 因 callback 內 this 指向不同 + $.post('http://api/', vm.form, function (res) { + vm.results = JSON.parse(res); + }); }
- 36. v‐for 自動依陣列產生 <tr> <input type="submit" value="查詢"> </div> </form> <table> <tbody> + <tr v-for="item in results"> + <td> {{ item.id }} </td> + <td> {{ item.name }} </td> + <td> {{ item.quantity }} </td> + </tr> </tbody> </table>
- 37. 案例中的需求： 1. 從<form> 撈輸入值回來 2. 用<form> 的輸入值執行AJAX 請求 3. 把AJAX 請求的結果陣列轉成<tr> 塞進<table>
- 40. 讓 class 按照 true/false 開關 <div> <label>零件名: </label> - <input v-model="form.name"> + <input + v-model="form.name" + v-bind:class="{ + invalid: !isFormValid + }" + > </div> 當!isFormValid 為true 時，class 添加"invalid" 一項 為false 時則自動移除 v-bind: 可直接縮寫成「:」
- 41. 其他屬性如 disabled 也可以 <div> - <input type="submit" value="查詢"> + <input + type="submit" + value="查詢" + :disabled="!isFormValid" + > </div> 當!isFormValid 為true 時， 自動新增disabled 屬性，反之自動移除 另外v-bind 也可以用在綁定一般屬性的字串值， 例如name、id、value ...等
- 42. 依賴 data 的寫在 computed data: { form: { id: '', name: '' }, results: [] }, + computed: { + isFormValid: function () { + return this.form.name !== ''; + } + } computed 在依賴的data 或computed 屬性更新時， 會自動重新計算
- 43. 上面這串的運作邏輯是？ 使用者在<input> 內打字時， 自動更新data 中的name name 被更新時自動重新計算isFormValid !isFormValid 為true 時 <input> 自動加上"invalid" class <button> 自動加上"disabled" 屬性 !isFormValid 為false 時 <input> 自動移除"invalid" class <button> 自動移除"disabled" 屬性
- 45. 一趟範例下來你學會了： 把jQuery 命令式編程改寫成Vue.js 宣告式渲染 初始化Vue 實例new Vue() 和存取data 從Vue 實例中取值的樣板{{ }} 數據綁定v-model 事件綁定v-on: 和它的縮寫@ 用computed 處理有相依性的屬性 元素屬性綁定v-bind: 和它的縮寫: 以及:class="" 專用的語法