vue-day02-vue常用特性
                                                            生活随笔
收集整理的這篇文章主要介紹了
                                vue-day02-vue常用特性
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.                        
                                文章目錄
- Vue常用特性
- 表單基本操作
- 表單修飾符
- 自定義指令
- Vue.directive 注冊全局指令
- Vue.directive 注冊全局指令 帶參數(shù)
- 自定義指令局部指令
 
- 計算屬性 computed
- 偵聽器 watch
- 過濾器
- 過濾器中傳遞參數(shù)
 
- 生命周期
- 常用的 鉤子函數(shù)
 
- 數(shù)組變異方法
- 替換數(shù)組
- 動態(tài)數(shù)組響應(yīng)式數(shù)據(jù)
- 圖書列表案例
- 1、 提供的靜態(tài)數(shù)據(jù)
- 2、 把提供好的數(shù)據(jù)渲染到頁面上
- 3、 添加圖書
- 4 修改圖書-上
- 5 修改圖書-下
- 6 刪除圖書
 
- 常用特性應(yīng)用場景
- 1 過濾器
- 2 自定義指令
- 3 計算屬性
- 生命周期
- 案例代碼
 
 
 
Vue常用特性
表單基本操作
-  獲取單選框中的值 - 通過v-model
 
-  獲取復(fù)選框中的值 - 通過v-model
- 和獲取單選框中的值一樣
- 復(fù)選框 checkbox 這種的組合時 data 中的 hobby 我們要定義成數(shù)組 否則無法實現(xiàn)多選
 
-  獲取下拉框和文本框中的值 - 通過v-model
 
表單修飾符
-  .number 轉(zhuǎn)換為數(shù)值 - 注意點:
- 當(dāng)開始輸入非數(shù)字的字符串時,因為Vue無法將字符串轉(zhuǎn)換成數(shù)值
- 所以屬性值將實時更新成相同的字符串。即使后面輸入數(shù)字,也將被視作字符串。
 
-  .trim 自動過濾用戶輸入的首尾空白字符 - 只能去掉首尾的 不能去除中間的空格
 
-  .lazy 將input事件切換成change事件 - .lazy 修飾符延遲了同步更新屬性值的時機。即將原本綁定在 input 事件的同步邏輯轉(zhuǎn)變?yōu)榻壎ㄔ?change 事件上
 
-  在失去焦點 或者 按下回車鍵時才更新 <!-- 自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型 --> <input v-model.number="age" type="number"><!--自動過濾用戶輸入的首尾空白字符 --> <input v-model.trim="msg"><!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="msg" >
自定義指令
- 內(nèi)置指令不能滿足我們特殊的需求
- Vue允許我們自定義指令
Vue.directive 注冊全局指令
<!-- 使用自定義的指令,只需在對用的元素中,加上'v-'的前綴形成類似于內(nèi)部指令'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', {// 當(dāng)綁定元素插入到 DOM 中。 其中 el為dom元素inserted: function (el) {// 聚焦元素el.focus();} }); new Vue({el:'#app' }); </script>Vue.directive 注冊全局指令 帶參數(shù)
<input type="text" v-color='msg'><script type="text/javascript">/*自定義指令-帶參數(shù)bind - 只調(diào)用一次,在指令第一次綁定到元素上時候調(diào)用*/Vue.directive('color', {// bind聲明周期, 只調(diào)用一次,指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置// el 為當(dāng)前自定義指令的DOM元素 // binding 為自定義的函數(shù)形參 通過自定義屬性傳遞過來的值 存在 binding.value 里面bind: function(el, binding){// 根據(jù)指令的參數(shù)設(shè)置背景色// console.log(binding.value.color)el.style.backgroundColor = binding.value.color;}});var vm = new Vue({el: '#app',data: {msg: {color: 'blue'}}});</script>自定義指令局部指令
- 局部指令,需要定義在 directives 的選項 用法和全局用法一樣
- 局部指令只能在當(dāng)前組件里面使用
- 當(dāng)全局指令和局部指令同名時以局部指令為準(zhǔn)
計算屬性 computed
- 模板中放入太多的邏輯會讓模板過重且難以維護 使用計算屬性可以讓模板更加的簡潔
- 計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的
- computed比較適合對多個變量或者對象進(jìn)行處理后返回一個結(jié)果值,也就是數(shù)多個變量中的某一個值發(fā)生了變化則我們監(jiān)控的這個值也就會發(fā)生變化
偵聽器 watch
- 使用watch來響應(yīng)數(shù)據(jù)的變化
- 一般用于異步或者開銷較大的操作
- watch 中的屬性 一定是data 中 已經(jīng)存在的數(shù)據(jù)
- 當(dāng)需要監(jiān)聽一個對象的改變時,普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變,只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化,此時就需要deep屬性對對象進(jìn)行深度監(jiān)聽
過濾器
- Vue.js允許自定義過濾器,可被用于一些常見的文本格式化。
- 過濾器可以用在兩個地方:雙花括號插值和v-bind表達(dá)式。
- 過濾器應(yīng)該被添加在JavaScript表達(dá)式的尾部,由“管道”符號指示
- 支持級聯(lián)操作
- 過濾器不改變真正的data,而只是改變渲染的結(jié)果,并返回過濾后的版本
- 全局注冊時是filter,沒有s的。而局部過濾器是filters,是有s的
過濾器中傳遞參數(shù)
<div id="box"><!--filterA 被定義為接收三個參數(shù)的過濾器函數(shù)。其中 message 的值作為第一個參數(shù),普通字符串 'arg1' 作為第二個參數(shù),表達(dá)式 arg2 的值作為第三個參數(shù)。-->{{ message | filterA('arg1', 'arg2') }}</div><script>// 在過濾器中 第一個參數(shù) 對應(yīng)的是 管道符前面的數(shù)據(jù) n 此時對應(yīng) message// 第2個參數(shù) a 對應(yīng) 實參 arg1 字符串// 第3個參數(shù) b 對應(yīng) 實參 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實例從創(chuàng)建 到銷毀的過程 ,這些過程中會伴隨著一些函數(shù)的自調(diào)用。我們稱這些函數(shù)為鉤子函數(shù)
常用的 鉤子函數(shù)
| created | 在實例創(chuàng)建完成后被立即調(diào)用此時data 和 methods已經(jīng)可以使用 但是頁面還沒有渲染出來 | 
| beforeMount | 在掛載開始之前被調(diào)用 此時頁面上還看不到真實數(shù)據(jù) 只是一個模板頁面而已 | 
| mounted | el被新創(chuàng)建的vm.$el替換,并掛載到實例上去之后調(diào)用該鉤子。 數(shù)據(jù)已經(jīng)真實渲染到頁面上 在這個鉤子函數(shù)里面我們可以使用一些第三方的插件 | 
| beforeUpdate | 數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬DOM打補丁之前。 頁面上數(shù)據(jù)還是舊的 | 
| updated | 由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁,在這之后會調(diào)用該鉤子。 頁面上數(shù)據(jù)已經(jīng)替換成最新的 | 
| beforeDestroy | 實例銷毀之前調(diào)用 | 
| destroyed | 實例銷毀后調(diào)用 | 
數(shù)組變異方法
- 在 Vue 中,直接修改對象屬性的值無法觸發(fā)響應(yīng)式。當(dāng)你直接修改了對象屬性的值,你會發(fā)現(xiàn),只有數(shù)據(jù)改了,但是頁面內(nèi)容并沒有改變
- 變異數(shù)組方法即保持?jǐn)?shù)組方法原有功能不變的前提下對其進(jìn)行功能拓展
| pop() | 刪除數(shù)組的最后一個元素,成功返回刪除元素的值 | 
| shift() | 刪除數(shù)組的第一個元素,成功返回刪除元素的值 | 
| unshift() | 往數(shù)組最前面添加一個元素,成功返回當(dāng)前數(shù)組的長度 | 
| splice() | 有三個參數(shù),第一個是想要刪除的元素的下標(biāo)(必選),第二個是想要刪除的個數(shù)(必選),第三個是刪除 后想要在原位置替換的值 | 
| sort() | sort() 使數(shù)組按照字符編碼默認(rèn)從小到大排序,成功返回排序后的數(shù)組 | 
| reverse() | reverse() 將數(shù)組倒序,成功返回倒序后的數(shù)組 | 
替換數(shù)組
- 不會改變原始數(shù)組,但總是返回一個新數(shù)組
| concat | concat() 方法用于連接兩個或多個數(shù)組。該方法不會改變現(xiàn)有的數(shù)組 | 
| slice | slice() 方法可從已有的數(shù)組中返回選定的元素。該方法并不會修改數(shù)組,而是返回一個子數(shù)組 | 
動態(tài)數(shù)組響應(yīng)式數(shù)據(jù)
- Vue.set(a,b,c) 讓 觸發(fā)視圖重新更新一遍,數(shù)據(jù)動態(tài)起來
- a是要更改的數(shù)據(jù) 、 b是數(shù)據(jù)的第幾項、 c是更改后的數(shù)據(jù)
圖書列表案例
- 靜態(tài)列表效果
- 基于數(shù)據(jù)實現(xiàn)模板效果
- 處理每行的操作按鈕
1、 提供的靜態(tài)數(shù)據(jù)
- 數(shù)據(jù)存放在vue 中 data 屬性中
2、 把提供好的數(shù)據(jù)渲染到頁面上
- 利用 v-for循環(huán) 遍歷 books 將每一項數(shù)據(jù)渲染到對應(yīng)的數(shù)據(jù)中
3、 添加圖書
- 通過雙向綁定獲取到輸入框中的輸入內(nèi)容
- 給按鈕添加點擊事件
- 把輸入框中的數(shù)據(jù)存儲到 data 中的 books 里面
4 修改圖書-上
- 點擊修改按鈕的時候 獲取到要修改的書籍名單 - 4.1 給修改按鈕添加點擊事件, 需要把當(dāng)前的圖書的id 傳遞過去 這樣才知道需要修改的是哪一本書籍
 
- 把需要修改的書籍名單填充到表單里面 - 4.2 根據(jù)傳遞過來的id 查出books 中 對應(yīng)書籍的詳細(xì)信息
- 4.3 把獲取到的信息填充到表單
 
5 修改圖書-下
- 5.1 定義一個標(biāo)識符, 主要是控制 編輯狀態(tài)下當(dāng)前編輯書籍的id 不能被修改 即 處于編輯狀態(tài)下 當(dāng)前控制書籍編號的輸入框禁用
- 5.2 通過屬性綁定給書籍編號的 綁定 disabled 的屬性 flag 為 true 即為禁用
- 5.3 flag 默認(rèn)值為false 處于編輯狀態(tài) 要把 flag 改為true 即當(dāng)前表單為禁用
- 5.4 復(fù)用添加方法 用戶點擊提交的時候依然執(zhí)行 handle 中的邏輯如果 flag為true 即 表單處于不可輸入狀態(tài) 此時執(zhí)行的用戶編輯數(shù)據(jù)數(shù)據(jù)
6 刪除圖書
- 6.1 給刪除按鈕添加事件 把當(dāng)前需要刪除的書籍id 傳遞過來
- 6.2 根據(jù)id從數(shù)組中查找元素的索引
- 6.3 根據(jù)索引刪除數(shù)組元素
常用特性應(yīng)用場景
1 過濾器
- Vue.filter 定義一個全局過濾器
2 自定義指令
- 讓表單自動獲取焦點
- 通過Vue.directive 自定義指定
3 計算屬性
- 通過計算屬性計算圖書的總數(shù) - 圖書的總數(shù)就是計算數(shù)組的長度
 
生命周期
案例代碼
<!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>圖書總數(shù):</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) {// 編輯圖書// 就是根據(jù)當(dāng)前的ID去更新數(shù)組中對應(yīng)的數(shù)據(jù)this.books.some((item) => {if (item.id == this.id) {item.name = this.name;// 完成更新操作之后,需要終止循環(huán)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)// 根據(jù)ID查詢出要編輯的數(shù)據(jù)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) {// 刪除圖書// 根據(jù)id從數(shù)組中查找元素的索引// var index = this.books.findIndex(function(item){// return item.id == id;// });// 根據(jù)索引刪除數(shù)組元素// this.books.splice(index, 1);// -------------------------// 方法二:通過filter方法進(jìn)行刪除this.books = this.books.filter(function (item) {return item.id != id;});}},computed: {total: function () {// 計算圖書的總數(shù)return this.books.length;}},watch: {name: function (val) {// 驗證圖書名稱是否已經(jīng)存在var flag = this.books.some(function (item) {return item.name == val;});if (flag) {// 圖書名稱存在this.submitFlag = true;} else {// 圖書名稱不存在this.submitFlag = false;}}},mounted: function () {// 該生命周期鉤子函數(shù)被觸發(fā)的時候,模板已經(jīng)可以使用// 一般此時用于獲取后臺數(shù)據(jù),然后把數(shù)據(jù)填充到模板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>總結(jié)
以上是生活随笔為你收集整理的vue-day02-vue常用特性的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: git-从入门到熟悉
- 下一篇: C语言中float,double类型,在
