文章目錄

• • Vue常用特性
  • • 表單基本操作
    • 表單修飾符
    • 自定義指令
    • • Vue.directive 注冊全局指令
      • Vue.directive 注冊全局指令 帶參數
      • 自定義指令局部指令
    • 計算屬性 computed
    • 偵聽器 watch
    • 過濾器
    • • 過濾器中傳遞參數
    • 生命周期
    • • 常用的 鉤子函數
    • 數組變異方法
    • 替換數組
    • 動態數組響應式數據
    • 圖書列表案例
    • • 1、 提供的靜態數據
      • 2、 把提供好的數據渲染到頁面上
      • 3、 添加圖書
      • 4 修改圖書-上
      • 5 修改圖書-下
      • 6 刪除圖書
    • 常用特性應用場景
    • • 1 過濾器
      • 2 自定義指令
      • 3 計算屬性
      • 生命周期
      • 案例代碼

Vue常用特性

表單基本操作

• 獲取單選框中的值

  • 通過v-model
  <!-- 1、 兩個單選框需要同時通過v-model 雙向綁定 一個值 2、 每一個單選框必須要有value屬性 且value 值不能一樣 3、 當某一個單選框選中的時候 v-model 會將當前的 value值 改變 data 中的 數據gender 的值就是選中的值，我們只需要實時監控他的值就可以了--><input type="radio" id="male" value="1" v-model='gender'><label for="male">男</label><input type="radio" id="female" value="2" v-model='gender'><label for="female">女</label><script>new Vue({data: {// 默認會讓當前的 value 值為 2 的單選框選中gender: 2, },})</script>

• 獲取復選框中的值

  • 通過v-model
  • 和獲取單選框中的值一樣
  • 復選框 checkbox 這種的組合時 data 中的 hobby 我們要定義成數組 否則無法實現多選
  <!-- 1、 復選框需要同時通過v-model 雙向綁定 一個值 2、 每一個復選框必須要有value屬性 且value 值不能一樣 3、 當某一個單選框選中的時候 v-model 會將當前的 value值 改變 data 中的 數據hobby 的值就是選中的值，我們只需要實時監控他的值就可以了--><div><span>愛好：</span><input type="checkbox" id="ball" value="1" v-model='hobby'><label for="ball">籃球</label><input type="checkbox" id="sing" value="2" v-model='hobby'><label for="sing">唱歌</label><input type="checkbox" id="code" value="3" v-model='hobby'><label for="code">寫代碼</label></div> <script>new Vue({data: {// 默認會讓當前的 value 值為 2 和 3 的復選框選中hobby: ['2', '3'],},}) </script>

• 獲取下拉框和文本框中的值

  • 通過v-model
  <div><span>職業：</span><!--1、 需要給select 通過v-model 雙向綁定 一個值 2、 每一個option 必須要有value屬性 且value 值不能一樣 3、 當某一個option選中的時候 v-model 會將當前的 value值 改變 data 中的 數據occupation 的值就是選中的值，我們只需要實時監控他的值就可以了--><!-- multiple 多選 --><select v-model='occupation' multiple><option value="0">請選擇職業...</option><option value="1">教師</option><option value="2">軟件工程師</option><option value="3">律師</option></select><!-- textarea 是 一個雙標簽 不需要綁定value 屬性的 --><textarea v-model='desc'></textarea></div> <script>new Vue({data: {// 默認會讓當前的 value 值為 2 和 3 的下拉框選中occupation: ['2', '3'],desc: 'nihao'},}) </script>

表單修飾符

• .number 轉換為數值

  • 注意點：
  • 當開始輸入非數字的字符串時，因為Vue無法將字符串轉換成數值
  • 所以屬性值將實時更新成相同的字符串。即使后面輸入數字，也將被視作字符串。

• .trim 自動過濾用戶輸入的首尾空白字符

  • 只能去掉首尾的 不能去除中間的空格

• .lazy 將input事件切換成change事件

  • .lazy 修飾符延遲了同步更新屬性值的時機。即將原本綁定在 input 事件的同步邏輯轉變為綁定在 change 事件上

• 在失去焦點 或者 按下回車鍵時才更新

  <!-- 自動將用戶的輸入值轉為數值類型 --> <input v-model.number="age" type="number"><!--自動過濾用戶輸入的首尾空白字符 --> <input v-model.trim="msg"><!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="msg" >

自定義指令

• 內置指令不能滿足我們特殊的需求
• Vue允許我們自定義指令

Vue.directive 注冊全局指令

<!-- 使用自定義的指令，只需在對用的元素中，加上'v-'的前綴形成類似于內部指令'v-if'，'v-text'的形式。 --> <input type="text" v-focus> <script> // 注意點： // 1、 在自定義指令中 如果以駝峰命名的方式定義 如 Vue.directive('focusA',function(){}) // 2、 在HTML中使用的時候 只能通過 v-focus-a 來使用 // 注冊一個全局自定義指令 v-focus Vue.directive('focus', {// 當綁定元素插入到 DOM 中。 其中 el為dom元素inserted: function (el) {// 聚焦元素el.focus();} }); new Vue({el:'#app' }); </script>

Vue.directive 注冊全局指令 帶參數

<input type="text" v-color='msg'><script type="text/javascript">/*自定義指令-帶參數bind - 只調用一次，在指令第一次綁定到元素上時候調用*/Vue.directive('color', {// bind聲明周期, 只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置// el 為當前自定義指令的DOM元素 // binding 為自定義的函數形參 通過自定義屬性傳遞過來的值 存在 binding.value 里面bind: function(el, binding){// 根據指令的參數設置背景色// console.log(binding.value.color)el.style.backgroundColor = binding.value.color;}});var vm = new Vue({el: '#app',data: {msg: {color: 'blue'}}});</script>

自定義指令局部指令

• 局部指令，需要定義在 directives 的選項 用法和全局用法一樣
• 局部指令只能在當前組件里面使用
• 當全局指令和局部指令同名時以局部指令為準

<input type="text" v-color='msg'><input type="text" v-focus><script type="text/javascript">/*自定義指令-局部指令*/var vm = new Vue({el: '#app',data: {msg: {color: 'red'}},//局部指令，需要定義在 directives 的選項directives: {color: {bind: function(el, binding){el.style.backgroundColor = binding.value.color;}},focus: {inserted: function(el) {el.focus();}}}});</script>

計算屬性 computed

• 模板中放入太多的邏輯會讓模板過重且難以維護 使用計算屬性可以讓模板更加的簡潔
• 計算屬性是基于它們的響應式依賴進行緩存的
• computed比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化

<div id="app"><!-- 當多次調用 reverseString 的時候 只要里面的 num 值不改變 他會把第一次計算的結果直接返回直到data 中的num值改變 計算屬性才會重新發生計算--><div>{{reverseString}}</div><div>{{reverseString}}</div><!-- 調用methods中的方法的時候 他每次會重新調用 --><div>{{reverseMessage()}}</div><div>{{reverseMessage()}}</div></div><script type="text/javascript">/*計算屬性與方法的區別:計算屬性是基于依賴進行緩存的，而方法不緩存*/var vm = new Vue({el: '#app',data: {msg: 'Nihao',num: 100},methods: {reverseMessage: function(){console.log('methods')return this.msg.split('').reverse().join('');}},//computed 屬性 定義 和 data 已經 methods 平級 computed: {// reverseString 這個是我們自己定義的名字 reverseString: function(){console.log('computed')var total = 0;// 當data 中的 num 的值改變的時候 reverseString 會自動發生計算 for(var i=0;i<=this.num;i++){total += i;}// 這里一定要有return 否則 調用 reverseString 的 時候無法拿到結果 return total;}}});</script>

偵聽器 watch

• 使用watch來響應數據的變化
• 一般用于異步或者開銷較大的操作
• watch 中的屬性 一定是data 中 已經存在的數據
• 當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠監聽到變化，此時就需要deep屬性對對象進行深度監聽

<div id="app"><div><span>名：</span><span><input type="text" v-model='firstName'></span></div><div><span>姓：</span><span><input type="text" v-model='lastName'></span></div><div>{{fullName}}</div></div><script type="text/javascript">/*偵聽器*/var vm = new Vue({el: '#app',data: {firstName: 'Jim',lastName: 'Green',// fullName: 'Jim Green'},//watch 屬性 定義 和 data 已經 methods 平級 watch: {// 注意： 這里firstName 對應著data 中的 firstName // 當 firstName 值 改變的時候 會自動觸發 watchfirstName: function(val) {this.fullName = val + ' ' + this.lastName;},// 注意： 這里 lastName 對應著data 中的 lastName lastName: function(val) {this.fullName = this.firstName + ' ' + val;}}});</script>

過濾器

• Vue.js允許自定義過濾器，可被用于一些常見的文本格式化。
• 過濾器可以用在兩個地方：雙花括號插值和v-bind表達式。
• 過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示
• 支持級聯操作
• 過濾器不改變真正的data，而只是改變渲染的結果，并返回過濾后的版本
• 全局注冊時是filter，沒有s的。而局部過濾器是filters，是有s的

<div id="app"><input type="text" v-model='msg'><!-- upper 被定義為接收單個參數的過濾器函數，表達式 msg 的值將作為參數傳入到函數中 --><div>{{msg | upper}}</div><!-- 支持級聯操作upper 被定義為接收單個參數的過濾器函數，表達式msg 的值將作為參數傳入到函數中。然后繼續調用同樣被定義為接收單個參數的過濾器 lower ，將upper 的結果傳遞到lower中--><div>{{msg | upper | lower}}</div><div :abc='msg | upper'>測試數據</div></div><script type="text/javascript">// lower 為全局過濾器 Vue.filter('lower', function(val) {return val.charAt(0).toLowerCase() + val.slice(1);});var vm = new Vue({el: '#app',data: {msg: ''},//filters 屬性 定義 和 data 已經 methods 平級 // 定義filters 中的過濾器為局部過濾器 filters: {// upper 自定義的過濾器名字 // upper 被定義為接收單個參數的過濾器函數，表達式 msg 的值將作為參數傳入到函數中upper: function(val) {// 過濾器中一定要有返回值 這樣外界使用過濾器的時候才能拿到結果return val.charAt(0).toUpperCase() + val.slice(1);}}});</script>

過濾器中傳遞參數

<div id="box"><!--filterA 被定義為接收三個參數的過濾器函數。其中 message 的值作為第一個參數，普通字符串 'arg1' 作為第二個參數，表達式 arg2 的值作為第三個參數。-->{{ message | filterA('arg1', 'arg2') }}</div><script>// 在過濾器中 第一個參數 對應的是 管道符前面的數據 n 此時對應 message// 第2個參數 a 對應 實參 arg1 字符串// 第3個參數 b 對應 實參 arg2 字符串Vue.filter('filterA',function(n,a,b){if(n<10){return n+a;}else{return n+b;}});new Vue({el:"#box",data:{message: "哈哈哈"}})</script>

生命周期

• 事物從出生到死亡的過程
• Vue實例從創建 到銷毀的過程 ，這些過程中會伴隨著一些函數的自調用。我們稱這些函數為鉤子函數

常用的 鉤子函數

beforeCreate在實例初始化之后，數據觀測和事件配置之前被調用 此時data 和 methods 以及頁面的DOM結構都沒有初始化 什么都做不了

created	在實例創建完成后被立即調用此時data 和 methods已經可以使用 但是頁面還沒有渲染出來
beforeMount	在掛載開始之前被調用 此時頁面上還看不到真實數據 只是一個模板頁面而已
mounted	el被新創建的vm.$el替換，并掛載到實例上去之后調用該鉤子。 數據已經真實渲染到頁面上 在這個鉤子函數里面我們可以使用一些第三方的插件
beforeUpdate	數據更新時調用，發生在虛擬DOM打補丁之前。 頁面上數據還是舊的
updated	由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子。 頁面上數據已經替換成最新的
beforeDestroy	實例銷毀之前調用
destroyed	實例銷毀后調用

數組變異方法

• 在 Vue 中，直接修改對象屬性的值無法觸發響應式。當你直接修改了對象屬性的值，你會發現，只有數據改了，但是頁面內容并沒有改變
• 變異數組方法即保持數組方法原有功能不變的前提下對其進行功能拓展

push()往數組最后面添加一個元素，成功返回當前數組的長度

pop()	刪除數組的最后一個元素，成功返回刪除元素的值
shift()	刪除數組的第一個元素，成功返回刪除元素的值
unshift()	往數組最前面添加一個元素，成功返回當前數組的長度
splice()	有三個參數，第一個是想要刪除的元素的下標（必選），第二個是想要刪除的個數（必選），第三個是刪除 后想要在原位置替換的值
sort()	sort() 使數組按照字符編碼默認從小到大排序,成功返回排序后的數組
reverse()	reverse() 將數組倒序，成功返回倒序后的數組

替換數組

• 不會改變原始數組，但總是返回一個新數組

filterfilter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

concat	concat() 方法用于連接兩個或多個數組。該方法不會改變現有的數組
slice	slice() 方法可從已有的數組中返回選定的元素。該方法并不會修改數組，而是返回一個子數組

動態數組響應式數據

• Vue.set(a,b,c) 讓 觸發視圖重新更新一遍，數據動態起來
• a是要更改的數據 、 b是數據的第幾項、 c是更改后的數據

圖書列表案例

• 靜態列表效果
• 基于數據實現模板效果
• 處理每行的操作按鈕

1、 提供的靜態數據

• 數據存放在vue 中 data 屬性中

var vm = new Vue({el: '#app',data: {books: [{id: 1,name: '三國演義',date: ''},{id: 2,name: '水滸傳',date: ''},{id: 3,name: '紅樓夢',date: ''},{id: 4,name: '西游記',date: ''}]}}); var vm = new Vue({el: '#app',data: {books: [{id: 1,name: '三國演義',date: ''},{id: 2,name: '水滸傳',date: ''},{id: 3,name: '紅樓夢',date: ''},{id: 4,name: '西游記',date: ''}]}});

2、 把提供好的數據渲染到頁面上

• 利用 v-for循環 遍歷 books 將每一項數據渲染到對應的數據中

<tbody><tr :key='item.id' v-for='item in books'><!-- 對應的id 渲染到頁面上 --><td>{{item.id}}</td><!-- 對應的name 渲染到頁面上 --><td>{{item.name}}</td><td>{{item.date}}</td><td><!-- 阻止 a 標簽的默認跳轉 --><a href="" @click.prevent>修改</a><span>|</span><a href="" @click.prevent>刪除</a></td></tr> </tbody>

3、 添加圖書

• 通過雙向綁定獲取到輸入框中的輸入內容
• 給按鈕添加點擊事件
• 把輸入框中的數據存儲到 data 中的 books 里面

<div><h1>圖書管理</h1><div class="book"><div><label for="id">編號：</label><!-- 3.1、通過雙向綁定獲取到輸入框中的輸入的 id --><input type="text" id="id" v-model='id'><label for="name">名稱：</label><!-- 3.2、通過雙向綁定獲取到輸入框中的輸入的 name --><input type="text" id="name" v-model='name'><!-- 3.3、給按鈕添加點擊事件 --><button @click='handle'>提交</button></div></div> </div><script type="text/javascript">/*圖書管理-添加圖書*/var vm = new Vue({el: '#app',data: {id: '',name: '',books: [{id: 1,name: '三國演義',date: ''},{id: 2,name: '水滸傳',date: ''},{id: 3,name: '紅樓夢',date: ''},{id: 4,name: '西游記',date: ''}]},methods: {handle: function(){// 3.4 定義一個新的對象book 存儲 獲取到輸入框中 書 的id和名字 var book = {};book.id = this.id;book.name = this.name;book.date = '';// 3.5 把book 通過數組的變異方法 push 放到 books 里面this.books.push(book);//3.6 清空輸入框this.id = '';this.name = '';}}});</script>

4 修改圖書-上

• 點擊修改按鈕的時候 獲取到要修改的書籍名單
  • 4.1 給修改按鈕添加點擊事件， 需要把當前的圖書的id 傳遞過去 這樣才知道需要修改的是哪一本書籍
• 把需要修改的書籍名單填充到表單里面
  • 4.2 根據傳遞過來的id 查出books 中 對應書籍的詳細信息
  • 4.3 把獲取到的信息填充到表單

<div id="app"><div class="grid"><div><h1>圖書管理</h1><div class="book"><div><label for="id">編號：</label><input type="text" id="id" v-model='id' :disabled="flag"><label for="name">名稱：</label><input type="text" id="name" v-model='name'><button @click='handle'>提交</button></div></div></div><table><thead><tr><th>編號</th><th>名稱</th><th>時間</th><th>操作</th></tr></thead><tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><!--- 4.1 給修改按鈕添加點擊事件， 需要把當前的圖書的id 傳遞過去 這樣才知道需要修改的是哪一本書籍---> <a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent>刪除</a></td></tr></tbody></table></div></div><script type="text/javascript">/*圖書管理-添加圖書*/var vm = new Vue({el: '#app',data: {flag: false,id: '',name: '',books: [{id: 1,name: '三國演義',date: ''},{id: 2,name: '水滸傳',date: ''},{id: 3,name: '紅樓夢',date: ''},{id: 4,name: '西游記',date: ''}]},methods: {handle: function(){// 3.4 定義一個新的對象book 存儲 獲取到輸入框中 書 的id和名字 var book = {};book.id = this.id;book.name = this.name;book.date = '';// 3.5 把book 通過數組的變異方法 push 放到 books 里面this.books.push(book);//3.6 清空輸入框this.id = '';this.name = '';},toEdit: function(id){console.log(id)//4.2 根據傳遞過來的id 查出books 中 對應書籍的詳細信息var book = this.books.filter(function(item){return item.id == id;});console.log(book)//4.3 把獲取到的信息填充到表單// this.id 和 this.name 通過雙向綁定 綁定到了表單中 一旦數據改變視圖自動更新this.id = book[0].id;this.name = book[0].name;}}});</script>

5 修改圖書-下

• 5.1 定義一個標識符， 主要是控制 編輯狀態下當前編輯書籍的id 不能被修改 即 處于編輯狀態下 當前控制書籍編號的輸入框禁用
• 5.2 通過屬性綁定給書籍編號的 綁定 disabled 的屬性 flag 為 true 即為禁用
• 5.3 flag 默認值為false 處于編輯狀態 要把 flag 改為true 即當前表單為禁用
• 5.4 復用添加方法 用戶點擊提交的時候依然執行 handle 中的邏輯如果 flag為true 即 表單處于不可輸入狀態 此時執行的用戶編輯數據數據

<div id="app"><div class="grid"><div><h1>圖書管理</h1><div class="book"><div><label for="id">編號：</label><!-- 5.2 通過屬性綁定 綁定 disabled 的屬性 flag 為 true 即為禁用 --><input type="text" id="id" v-model='id' :disabled="flag"><label for="name">名稱：</label><input type="text" id="name" v-model='name'><button @click='handle'>提交</button></div></div></div><table><thead><tr><th>編號</th><th>名稱</th><th>時間</th><th>操作</th></tr></thead><tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent>刪除</a></td></tr></tbody></table></div></div> <script type="text/javascript">/*圖書管理-添加圖書*/var vm = new Vue({el: '#app',data: {// 5.1 定義一個標識符， 主要是控制 編輯狀態下當前編輯書籍的id 不能被修改 // 即 處于編輯狀態下 當前控制書籍編號的輸入框禁用 flag: false,id: '',name: '',},methods: {handle: function() {/*5.4 復用添加方法 用戶點擊提交的時候依然執行 handle 中的邏輯如果 flag為true 即 表單處于不可輸入狀態 此時執行的用戶編輯數據數據 */ if (this.flag) {// 編輯圖書// 5.5 根據當前的ID去更新數組中對應的數據 this.books.some((item) => {if (item.id == this.id) {// 箭頭函數中 this 指向父級作用域的this item.name = this.name;// 完成更新操作之后，需要終止循環return true;}});// 5.6 編輯完數據后表單要處以可以輸入的狀態this.flag = false;// 5.7 如果 flag為false 表單處于輸入狀態 此時執行的用戶添加數據 } else { var book = {};book.id = this.id;book.name = this.name;book.date = '';this.books.push(book);// 清空表單this.id = '';this.name = '';}// 清空表單this.id = '';this.name = '';},toEdit: function(id) {/*5.3 flag 默認值為false 處于編輯狀態 要把 flag 改為true 即當前表單為禁 用 */ this.flag = true;console.log(id)var book = this.books.filter(function(item) {return item.id == id;});console.log(book)this.id = book[0].id;this.name = book[0].name;}}});</script>

6 刪除圖書

• 6.1 給刪除按鈕添加事件 把當前需要刪除的書籍id 傳遞過來
• 6.2 根據id從數組中查找元素的索引
• 6.3 根據索引刪除數組元素

<tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><!-- 6.1 給刪除按鈕添加事件 把當前需要刪除的書籍id 傳遞過來 --> <a href="" @click.prevent='deleteBook(item.id)'>刪除</a></td></tr> </tbody><script type="text/javascript">/*圖書管理-添加圖書*/var vm = new Vue({methods: {deleteBook: function(id){// 刪除圖書#// 6.2 根據id從數組中查找元素的索引// var index = this.books.findIndex(function(item){// return item.id == id;// });#// 6.3 根據索引刪除數組元素// this.books.splice(index, 1);// -------------------------#// 方法二：通過filter方法進行刪除# 6.4 根據filter 方法 過濾出來id 不是要刪除書籍的id # 因為 filter 是替換數組不會修改原始數據 所以需要 把 不是要刪除書籍的id 賦值給 books this.books = this.books.filter(function(item){return item.id != id;});}}});</script>

常用特性應用場景

1 過濾器

• Vue.filter 定義一個全局過濾器

<tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><!-- 1.3 調用過濾器 --><td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent='deleteBook(item.id)'>刪除</a></td> </tr><script>#1.1 Vue.filter 定義一個全局過濾器Vue.filter('format', function(value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小時 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);}) #1.2 提供的數據 包含一個時間戳 為毫秒數[{id: 1,name: '三國演義',date: 2525609975000},{id: 2,name: '水滸傳',date: 2525609975000},{id: 3,name: '紅樓夢',date: 2525609975000},{id: 4,name: '西游記',date: 2525609975000}]; </script>

2 自定義指令

• 讓表單自動獲取焦點
• 通過Vue.directive 自定義指定

<!-- 2.2 通過v-自定義屬性名 調用自定義指令 --> <input type="text" id="id" v-model='id' :disabled="flag" v-focus><script># 2.1 通過Vue.directive 自定義指定Vue.directive('focus', {inserted: function (el) {el.focus();}});</script>

3 計算屬性

• 通過計算屬性計算圖書的總數
  • 圖書的總數就是計算數組的長度

<div class="total"><span>圖書總數：</span><!-- 3.2 在頁面上 展示出來 --><span>{{total}}</span> </div><script type="text/javascript">/*計算屬性與方法的區別:計算屬性是基于依賴進行緩存的，而方法不緩存*/var vm = new Vue({data: {flag: false,submitFlag: false,id: '',name: '',books: []},computed: {total: function(){// 3.1 計算圖書的總數return this.books.length;}},});</script>

生命周期

案例代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.grid {margin: auto;width: 530px;text-align: center;}.grid table {border-top: 1px solid #C2D89A;width: 100%;border-collapse: collapse;}.grid th,td {padding: 10;border: 1px dashed #F3DCAB;height: 35px;line-height: 35px;}.grid th {background-color: #F3DCAB;}.grid .book {padding-bottom: 10px;padding-top: 5px;background-color: #F3DCAB;}.grid .total {height: 30px;line-height: 30px;background-color: #F3DCAB;border-top: 1px solid #C2D89A;}</style> </head><body><div id="app"><div class="grid"><div><h1>圖書管理</h1><div class="book"><div><label for="id">編號：</label><input type="text" id="id" v-model='id' :disabled="flag" v-focus><label for="name">名稱：</label><input type="text" id="name" v-model='name'><button @click='handle' :disabled="submitFlag">提交</button></div></div></div><div class="total"><span>圖書總數：</span><span>{{total}}</span></div><table><thead><tr><th>編號</th><th>名稱</th><th>時間</th><th>操作</th></tr></thead><tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent='deleteBook(item.id)'>刪除</a></td></tr></tbody></table></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*圖書管理-添加圖書*/Vue.directive('focus', {inserted: function (el) {el.focus();}});Vue.filter('format', function (value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小時 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };format = format.replace(/([yMdhmsqS])+/g, function (all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);})var vm = new Vue({el: '#app',data: {flag: false,submitFlag: false,id: '',name: '',books: []},methods: {handle: function () {if (this.flag) {// 編輯圖書// 就是根據當前的ID去更新數組中對應的數據this.books.some((item) => {if (item.id == this.id) {item.name = this.name;// 完成更新操作之后，需要終止循環return true;}});this.flag = false;} else {// 添加圖書var book = {};book.id = this.id;book.name = this.name;book.date = 2525609975000;this.books.push(book);// 清空表單this.id = '';this.name = '';}// 清空表單this.id = '';this.name = '';},toEdit: function (id) {// 禁止修改IDthis.flag = true;console.log(id)// 根據ID查詢出要編輯的數據var book = this.books.filter(function (item) {return item.id == id;});console.log(book)// 把獲取到的信息填充到表單this.id = book[0].id;this.name = book[0].name;},deleteBook: function (id) {// 刪除圖書// 根據id從數組中查找元素的索引// var index = this.books.findIndex(function(item){// return item.id == id;// });// 根據索引刪除數組元素// this.books.splice(index, 1);// -------------------------// 方法二：通過filter方法進行刪除this.books = this.books.filter(function (item) {return item.id != id;});}},computed: {total: function () {// 計算圖書的總數return this.books.length;}},watch: {name: function (val) {// 驗證圖書名稱是否已經存在var flag = this.books.some(function (item) {return item.name == val;});if (flag) {// 圖書名稱存在this.submitFlag = true;} else {// 圖書名稱不存在this.submitFlag = false;}}},mounted: function () {// 該生命周期鉤子函數被觸發的時候，模板已經可以使用// 一般此時用于獲取后臺數據，然后把數據填充到模板var data = [{id: 1,name: '三國演義',date: 2525609975000}, {id: 2,name: '水滸傳',date: 2525609975000}, {id: 3,name: '紅樓夢',date: 2525609975000}, {id: 4,name: '西游記',date: 2525609975000}];this.books = data;}});</script> </body></html>

總結

以上是生活随笔為你收集整理的vue-day02-vue常用特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。