本章將繼續和大家分享Vue的一些基礎知識，話不多說，下面我們直接上代碼：
本文內容大部分摘自Vue的官網：https://v2.cn.vuejs.org/v2/guide/
一、計算屬性
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的計算屬性</title> <script src="/lib/vue.js"></script> </head> <body> <div id="app"> <div desc="計算屬性"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> </div> <script> var vm = new Vue({ el: '#app', //掛載點 data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實體 return this.message.split('').reverse().join(''); } }, methods: { // 普通方法 reversedMessageMethod: function () { /* 1、我們可以將同一函式定義為一個方法而不是一個計算屬性，兩種方式的最終結果確實是完全相同的， 然而，不同的是計算屬性是基于它們的回應式依賴進行快取的，只在相關回應式依賴發生改變時它們才會重新求值， 這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即回傳之前的計算結果，而不必再次執行函式， 2、相比之下，每當觸發重新渲染時，呼叫方法將總會再次執行函式， 3、我們為什么需要快取？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的陣列并做大量的計算， 然后我們可能有其他的計算屬性依賴于 A，如果沒有快取，我們將不可避免的多次執行 A 的 getter！如果你不希望有快取，請用方法來替代， */ return this.message.split('').reverse().join(''); } } }); </script> </body> </html>
結果：
Original message: "Hello"
Computed reversed message: "olleH"
計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
你可以像系結普通 property 一樣在模板中系結計算屬性，Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當 vm.message 發生改變時，所有依賴 vm.reversedMessage 的系結也會更新，而且最妙的是我們已經以宣告的方式創建了這種依賴關系：計算屬性的 getter 函式是沒有副作用 (side effect) 的，這使它更易于測驗和理解，
計算屬性快取 vs 方法：我們可以將同一函式定義為一個方法而不是一個計算屬性，兩種方式的最終結果確實是完全相同的，然而，不同的是計算屬性是基于它們的回應式依賴進行快取的，只在相關回應式依賴發生改變時它們才會重新求值，這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即回傳之前的計算結果，而不必再次執行函式，
我們為什么需要快取？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的陣列并做大量的計算，然后我們可能有其他的計算屬性依賴于 A，如果沒有快取，我們將不可避免的多次執行 A 的 getter！如果你不希望有快取，請用方法來替代，
二、偵聽屬性
Vue 提供了一種更通用的方式來觀察和回應 Vue 實體上的資料變動：偵聽屬性，
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來回應資料的變化，當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的，
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的偵聽器</title> <script src="/lib/vue.js"></script> <script src="/lib/axios.js"></script> <script src="/lib/lodash.js"></script> </head> <body> <div id="app"> <div desc="偵聽屬性"> <p> 請輸入您的問題: <input v-model="question"> </p> <p>{{ answer }}</p> </div> </div> <script> var vm = new Vue({ el: '#app', //掛載點 data: { question: '', answer: '在您提出問題之前，我不能給您答案!' }, watch: { // 如果 `question` 發生改變，這個函式就會運行 question: function (newQuestion, oldQuestion) { var _this = this; _this.answer = '正在等待您停止輸入...' _this.debouncedGetAnswer(); } }, created: function () { // `_.debounce` 是一個通過 Lodash 限制操作頻率的函式， // 在這個例子中，我們希望限制訪問 介面 的頻率 // AJAX 請求直到用戶輸入完畢才會發出，想要了解更多關于 // `_.debounce` 函式 (及其近親 `_.throttle`) 的知識， // 請參考：https://lodash.com/docs#debounce var _this = this; _this.debouncedGetAnswer = _.debounce(_this.getAnswer, 1500); //debouncedGetAnswer 方法名可自定義 }, methods: { getAnswer: function () { var _this = this; if (_this.question.indexOf('?') === -1) { _this.answer = '問題通常包含問號!'; return; } _this.answer = '資料獲取中...'; axios.get('https://autumnfish.cn/api/joke') .then(function (response) { _this.answer = response.data; }) .catch(function (error) { _this.answer = '請求介面例外：' + error; }); } } }); </script> </body> </html>
在這個示例中，使用 watch 選項允許我們執行異步操作 (訪問一個 API)，限制我們執行該操作的頻率，并在我們得到最終結果前，設定中間狀態，這些都是計算屬性無法做到的，
Lodash下載地址：https://github.com/lodash/lodash/tree/4.17.21
三、Class 與 Style 系結
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Class與Style系結</title> <script src="/lib/vue.js"></script> </head> <body> <div id="app"> <div desc="物件語法"> <!-- active 這個 class 存在與否將取決于資料 property isActive 的 真值， --> <!-- 你可以在物件中傳入更多欄位來動態切換多個 class，此外，v-bind:class 指令也可以與普通的 class attribute 共存， --> <!-- 當 isActive 或者 hasError 變化時，class 串列將相應地更新，例如，如果 hasError 的值為 true，class 串列將變為 "static active text-danger"， --> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> <!-- 系結的資料物件不必行內定義在模板里 --> <div v-bind:class="classObject"></div> <!-- 我們也可以在這里系結一個回傳物件的計算屬性 --> <div v-bind:class="classObjectComputed"></div> </div> <div desc="陣列語法"> <!-- 我們可以把一個陣列傳給 v-bind:class，以應用一個 class 串列 --> <div v-bind:class="[activeClass, errorClass]"></div> <!-- 如果你也想根據條件切換串列中的 class，可以用三元運算式 --> <!-- 這樣寫將始終添加 errorClass，但是只有在 isActive 是 真 時才添加 activeClass， --> <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> <!-- 不過，當有多個條件 class 時這樣寫有些繁瑣，所以在陣列語法中也可以使用物件語法 --> <div v-bind:class="[{ active: isActive }, errorClass]"></div> </div> <div desc="系結行內樣式"> <!-- v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件，--> <!-- CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名 --> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <!-- 直接系結到一個樣式物件通常更好，這會讓模板更清晰 --> <!-- 同樣的，物件語法常常結合回傳物件的計算屬性使用 --> <div v-bind:style="styleObject"></div> <!-- v-bind:style 的陣列語法可以將多個樣式物件應用到同一個元素上： --> <div v-bind:style="[baseStyles, overridingStyles]"></div> </div> </div> <script> var vm = new Vue({ el: '#app', //掛載點 data: { isActive: true, hasError: false, classObject: { active: true, 'text-danger': false }, activeClass: 'active', errorClass: 'text-danger', activeColor: 'red', fontSize: 30, styleObject: { color: 'red', fontSize: '13px' }, baseStyles: { color: 'black', fontSize: '13px' }, overridingStyles: { 'text-align': 'center' } }, computed: { classObjectComputed: function () { return { active: this.isActive && !this.hasError, 'text-danger': this.hasError } } } }); </script> </body> </html>
渲染的結果如下：
<div id="app"> <div desc="物件語法"> <div class="static active"></div> <div class="active"></div> <div class="active"></div> </div> <div desc="陣列語法"> <div class="active text-danger"></div> <div class="active text-danger"></div> <div class="active text-danger"></div> </div> <div desc="系結行內樣式"> <div style="color: red; font-size: 30px;"></div> <div style="color: red; font-size: 13px;"></div> <div style="color: black; font-size: 13px; text-align: center;"></div> </div> </div>
四、條件渲染
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的條件渲染</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <div desc="條件渲染"> <!-- v-if 指令用于條件性地渲染一塊內容，這塊內容只會在指令的運算式回傳 true 值的時候被渲染， --> <!-- 可以把一個 <template> 元素當做不可見的包裹元素，并在上面使用 v-if，最終的渲染結果將不包含 <template> 元素， --> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else-if="loginType === 'telephone'"> <label>Telephone</label> <input placeholder="Enter your telephone" key="telephone-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> <!-- v-show 只是簡單地切換元素的 CSS property display， --> <h1 v-show="isShow">Hello!</h1> </div> </div> <script> //一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷， //因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好， var vm = new Vue({ el: '#app', //掛載點 data: { loginType: 'telephone', isShow: true } }); </script> </body> </html>
渲染的結果如下：
<div id="app"> <div desc="條件渲染"> <label>Telephone</label> <input placeholder="Enter your telephone"> <h1>Hello!</h1> </div> </div>
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷，因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好，
五、串列渲染
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的串列渲染</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <div desc="串列渲染"> <ul id="example-1"> <!-- 我們可以用 v-for 指令基于一個陣列來渲染一個串列， --> <!-- v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的陣列元素的別名， --> <!-- 在 v-for 塊中，我們可以訪問所有父作用域的 property，v-for 還支持一個可選的第二個引數，即當前項的索引， --> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> <ul id="example-2"> <!-- 你也可以用 of 替代 in 作為分隔符，因為它更接近 JavaScript 迭代器的語法 --> <li v-for="(item, index) of items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> <!-- 你也可以用 v-for 來遍歷一個物件的 property， --> <div id="example-3"> <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div> </div> <ul id="example-4"> <!-- 為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute --> <!-- 建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升， --> <li v-for="(item, index) in stus" :key="item.id"> {{ index }} - {{ item.name }} </li> </ul> <ul id="example-5"> <!-- 有時，我們想要顯示一個陣列經過過濾或排序后的版本，而不實際變更或重置原始資料， --> <!-- 在這種情況下，可以創建一個計算屬性，來回傳過濾或排序后的陣列， --> <li v-for="n in evenNumbers">{{ n }}</li> </ul> <div id="example-6"> <ul v-for="set in sets"> <!-- 在計算屬性不適用的情況下 (例如，在嵌套 v-for 回圈中) 你可以使用一個方法 --> <li v-for="n in even(set)">{{ n }}</li> </ul> </div> <div id="example-7"> <!-- v-for 也可以接受整數，在這種情況下，它會把模板重復對應次數， --> <span v-for="n in 10">{{ n }} </span> </div> <ul id="example-8"> <!-- 類似于 v-if，你也可以利用帶有 v-for 的 <template> 來回圈渲染一段包含多個元素的內容， --> <template v-for="item in items"> <li>{{ item.message }}</li> <li class="divider" role="presentation"></li> </template> </ul> <ul id="example-9"> <!-- 當它們處于同一節點，v-for 的優先級比 v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 回圈中， --> <!-- 當你只想為部分項渲染節點時，這種優先級的機制會十分有用 --> <li v-for="stu in stus" v-if="stu.id==2" :key="stu.id"> {{ stu.name }} </li> </ul> </div> </div> <script> var vm = new Vue({ el: '#app', //掛載點 data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ], object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' }, stus: [ { id: 1, name: '張三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' } ], numbers: [1, 2, 3, 4, 5], sets: [ [1, 2, 3, 4, 5], [6, 7, 8, 9, 10] ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } }); </script> </body> </html>
渲染的結果如下：
<div id="app"> <div desc="串列渲染"> <ul id="example-1"> <li> Parent - 0 - Foo </li> <li> Parent - 1 - Bar </li> </ul> <ul id="example-2"> <li> Parent - 0 - Foo </li> <li> Parent - 1 - Bar </li> </ul> <div id="example-3"> <div> 0. title: How to do lists in Vue </div> <div> 1. author: Jane Doe </div> <div> 2. publishedAt: 2016-04-10 </div> </div> <ul id="example-4"> <li> 0 - 張三 </li> <li> 1 - 李四 </li> <li> 2 - 王五 </li> </ul> <ul id="example-5"> <li>2</li> <li>4</li> </ul> <div id="example-6"> <ul> <li>2</li> <li>4</li> </ul> <ul> <li>6</li> <li>8</li> <li>10</li> </ul> </div> <div id="example-7"> <span>1 </span> <span>2 </span> <span>3 </span> <span>4 </span> <span>5 </span> <span>6 </span> <span>7 </span> <span>8 </span> <span>9 </span> <span>10 </span> </div> <ul id="example-8"> <li>Foo</li> <li role="presentation" class="divider"></li> <li>Bar</li> <li role="presentation" class="divider"></li> </ul> <ul id="example-9"> <li> 李四 </li> </ul> </div> </div>
六、事件處理
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的事件處理</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <div desc="事件處理"> <!-- 有時也需要在行內陳述句處理器中訪問原始的 DOM 事件，可以用特殊變數 $event 把它傳入方法， --> <input type="button" value="提交" @click="warn('Form cannot be submitted yet.', $event)" /> <!-- 事件修飾符是由點開頭的指令后綴來表示的， --> <div desc="事件修飾符"> <!-- 點擊事件將只會觸發一次 --> <a @click.once="doThis">doThis</a> <!-- 阻止單擊事件繼續傳播 --> <a @click.stop="doThis">doThis</a> <!-- 提交事件不再多載頁面 --> <form @submit.prevent="doThis"></form> <!-- 修飾符可以串聯 --> <a @click.stop.prevent="doThis">doThis</a> </div> <!-- 你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符， --> <div desc="按鍵修飾符"> <!-- 只有在 `key` 是 `Enter` 時呼叫 `vm.submit()` --> <input v-model="inputVal" @keyup.enter="submit"> <!-- 處理函式只會在 $event.key 等于 PageDown 時被呼叫 --> <input v-model="inputVal" @keyup.page-down="submit"> <!-- 為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數常用的按鍵碼的別名： .enter .tab .delete (捕獲“洗掉”和“退格”鍵) .esc .space .up .down .left .right --> </div> </div> </div> <script> var vm = new Vue({ el: '#app', //掛載點 data: { inputVal: '' }, methods: { warn: function (message, event) { // 現在我們可以訪問原生事件物件 if (event) { event.preventDefault(); //阻止元素發生默認的行為 } alert(message); }, doThis: function () { console.log('TODO'); }, submit: function () { console.log(this.inputVal); } } }); </script> </body> </html>
更多事件處理可參考Vue的官網，
七、表單輸入系結
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的表單輸入系結</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <!-- 你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向資料系結， --> <!-- 它會根據控制元件型別自動選取正確的方法來更新元素，盡管有些神奇，但 v-model 本質上不過是語法糖， --> <div desc="表單輸入系結"> <div desc="文本"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div> <div desc="多行文本"> <textarea v-model="message" placeholder="add multiple lines"></textarea> <p>Message is: {{ message }}</p> </div> <div desc="復選框"> <!-- 單個復選框，系結到布林值 --> <div desc="單個復選框"> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </div> <!-- 單個復選框，系結到自定義值 --> <div desc="單個復選框-寫法2"> <input type="checkbox" id="toggle" v-model="toggle" true-value="yes" false-value="no"> <label for="toggle">{{ toggle }}</label> <!-- // 當選中時 vm.toggle === 'yes' // 當沒有選中時 vm.toggle === 'no' --> </div> <!-- 多個復選框，系結到同一個陣列 --> <div desc="多個復選框"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> </div> <div desc="單選按鈕"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <!-- 如果 v-model 運算式的初始值未能匹配任何選項，<select> 元素將被渲染為“未選中”狀態， --> <!-- 在 iOS 中，這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS 不會觸發 change 事件， --> <!-- 因此，更推薦像上面這樣提供一個值為空的禁用選項， --> <div desc="選擇框"> <div desc="單選時"> <select v-model="selected"> <option disabled value="">請選擇</option> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <!-- 多選時 (系結到一個陣列) --> <div desc="多選時"> <select v-model="selectedMultiple" multiple style="width: 50px;"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <br> <span>selectedMultiple: {{ selectedMultiple }}</span> </div> </div> <div desc="值系結"> <div desc="單選按鈕"> <input type="radio" v-model="pickRadio" :value="radioVal"> <br> <span>pickRadio: {{ pickRadio }}</span> <!-- // 當選中時 vm.pickRadio === vm.radioVal --> </div> <div desc="選擇框的選項"> <select v-model="selectedObj"> <!-- 行內物件字面量 --> <option :value="{ number: 123 }">123</option> </select> <br> <span>selectedObj.number: {{ selectedObj.number }}</span> <!-- // 當選中時 typeof vm.selectedObj // => 'object' vm.selectedObj.number // => 123 --> </div> </div> <div desc="修飾符"> <!-- 如果想自動將用戶的輸入值轉為數值型別，可以給 v-model 添加 number 修飾符 --> <!-- 這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會回傳字串， --> <!-- 如果這個值無法被 parseFloat() 決議，則會回傳原始的值， --> <input type="text" v-model.number="age"> <!-- 如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符 --> <input type="text" v-model.trim="message"> <!-- 在“change”時而非“input”時更新 --> <!-- 在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與資料進行同步 (除了上述輸入法組合文字時)， --> <!-- 你可以添加 lazy 修飾符，從而轉為在 change 事件之后進行同步 --> <input type="text" v-model.lazy="message"> </div> </div> </div> <script> var vm = new Vue({ el: '#app', //掛載點 data: { message: '', checked: false, checkedNames: [], picked: '', selected: '', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ], selectedMultiple: [], toggle: 'yes', pickRadio: '', radioVal: 'aaa', selectedObj: {}, age: 18 } }); </script> </body> </html>
Demo原始碼：
鏈接：https://pan.baidu.com/s/15wMq3LOPz0f0IEnm-xC_tw
提取碼：uel4
此文由博主精心撰寫轉載請保留此原文鏈接：https://www.cnblogs.com/xyh9039/p/16989759.html
著作權宣告：如有雷同純屬巧合，如有侵權請及時聯系本人修改，謝謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540319.html
標籤：其他