Vue2-收集表單數據、過濾器、內置指令與自定義指令、Vue生命周期

🥔：我徒越萬重山千帆過萬木自逢春

更多Vue知識請點擊——Vue.js

VUE2-Day4

- 收集表單數據
- - 1、不同標簽的value屬性
  - 2、v-model的三個修飾符
- 過濾器
- 內置指令與自定義指令
- - 1、內置指令
  - 2、自定義指令
  - - 定義語法
    - （1）函數式
    - （2）對象式
- Vue的生命周期
- - 1、什么是生命周期
  - 2、生命周期中的8個鉤子
  - 3、生命周期圖解（重要）
  - 4、生命周期案例

收集表單數據

1、不同標簽的value屬性

若：<input type="text"/>普通輸入框，則v-model收集的是value值，用戶輸入的就是value值。
若：<input type="radio"/>單選框，則v-model收集的是value值，且要給標簽配置value值。

若：<input type="checkbox"/>多選框

1、沒有配置input的value屬性，那么收集的就是checked（勾選 or 未勾選，是布爾值）
2、配置input的value屬性:
(1)v-model的初始值是非數組，那么收集的就是checked（勾選 or 未勾選，是布爾值）
(2)v-model的初始值是數組，那么收集的的就是value組成的數組
一句話，想正確收集，那么要寫上每個選項的value，且v-model綁定的初始值是數組。

2、v-model的三個修飾符

v-model.lazy：實現不用實時收集，輸入框失去焦點再收集
v-model.number：輸入的字符串收集為數字（Vue內部做了數據轉換），通常和type="number"一起使用
v-model.trim：收集時去掉輸入的首尾空格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>收集表單數據</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><!-- 這里form不需要action屬性，我們可以直接使用ajax --><form @submit.prevent="demo">賬號：<!-- v-model.trim去掉前后空格 --><input type="text" v-model.trim="userInfo.accout" /><br />密碼：<input type="password" v-model="userInfo.password" /><br />年齡：<!-- 前面一個number控制只能輸入數字，后面一個v-model.number把收集的信息轉成數值類型，這兩個一般搭配使用 --><input type="number" v-model.number="userInfo.age" /><br />性別： 男<inputtype="radio"name="sex"v-model="userInfo.sex"value="male"/>女<inputtype="radio"name="sex"v-model="userInfo.sex"value="female"/><br />愛好： 吃飯<inputtype="checkbox"v-model="userInfo.hobby"value="eat"/>睡覺<input type="checkbox" v-model="userInfo.hobby" value="sleep" />打豆豆<inputtype="checkbox"v-model="userInfo.hobby"value="beatbean"/><br />所屬校區：<select v-model="userInfo.city"><option value="">請選擇校區</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">廣州</option><option value="shenzhen">深圳</option></select><br />其他信息：<!-- v-model.lazy讓文本框不是實時收集，而是輸入完后失去焦點才收集 --><textarea v-model.lazy="userInfo.other" cols="30" rows="5"></textarea><br /><input type="checkbox" v-model="userInfo.agree" />閱讀并接受<a href="https://blog.csdn.net/weixin_56498069?type=lately">《用戶協議》</a><button>提交</button></form></div><script type="text/javascript">new Vue({el: "#root",data: {userInfo: {accout: "",password: "",age: "",sex: "",//   多選的勾選框要寫成數組hobby: [],city: "",other: "",agree: "",},},methods: {demo() {console.log(JSON.stringify(this.userInfo));},},});</script></body>
</html>

過濾器

定義：對要顯示的數據進行特定格式化后再顯示（適用于一些簡單邏輯的處理比如價格1999改成1,999等需求，復雜的最好用計算屬性或方法）。
語法：
1、注冊過濾器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2、使用過濾器：{{ xxx | 過濾器名}} 或 v-bind:屬性 = "xxx | 過濾器名"（第二種幾乎不用）
備注：
1、過濾器也可以接收額外參數、多個過濾器也可以串聯
2、并沒有改變原本的數據, 是產生新的對應的數據

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>過濾器</title><script src="../js/vue.js"></script><script src="../js/dayjs.min.js"></script></head><body><div id="root"><h1>當前時間是:{{time}}</h1><!-- 計算屬性實現 --><h1>當前時間是:{{formatTime}}</h1><!-- 方法實現 --><h1>當前時間是:{{getformatTime()}}</h1><!-- 過濾器實現 time傳給timeFormater，然后返回值替換整個部分--><h1>當前時間是:{{time | timeFormater}}</h1><!-- 過濾器實現(傳參)--><h1>當前時間是:{{time | timeFormater('YYYY——MM——DD')}}</h1><!-- 過濾器的串聯,一層一層往后傳，后面的接受的是前面的返回值--><h1>當前時間是:{{time | timeFormater('YYYY——MM——DD') | mySlice}}</h1><!-- 下面這個打開控制臺看元素節點就明白了 --><h3 :x="name | mySlice">DJ</h3></div><script type="text/javascript">// 全局過濾器Vue.filter("mySlice", function (val) {return val.slice(0, 4);});const vm = new Vue({el: "#root",data: {time: 1660472948789,name: "zhangziying",},computed: {formatTime: {get() {return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");},},},methods: {getformatTime() {return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");},},// 局部過濾器filters: {//第一個參數是管道符 | 前邊那玩意兒//第二個參數str來個默認值，如果傳了str就給，不傳就用默認值timeFormater(val, str = "YYYY年MM月DD日 HH:mm:ss") {// console.log(val);return dayjs(this.time).format(str);},mySlice(val) {//這里的val是上一個過濾器的返回值return val.slice(0, 4);},},});</script></body>
</html>

內置指令與自定義指令

1、內置指令

v-bind : 單向綁定解析表達式, 可簡寫為 :xxx
v-model : 雙向數據綁定
v-for : 遍歷數組/對象/字符串
v-on : 綁定事件監聽, 可簡寫為@
v-if : 條件渲染（動態控制節點是否存存在）
v-else : 條件渲染（動態控制節點是否存存在）
v-show : 條件渲染 (動態控制節點是否展示)

v-text指令：
作用：向其所在的節點中渲染文本內容。
與插值語法的區別：v-text會替換掉節點中的所有內容，插值語法{{xx}}則不會。

    <div id="root"><div>{{name}}</div><!-- 使用v-text --><!-- 只會顯示potato不會顯示你好，因為v-text會替換掉節點中的所有內容，并且不支持結構解析（不可以識別html結構） --><div v-text="name">你好，</div></div><script>new Vue({el: "#root",data: {name: "potato",},});</script>

v-html指令：
作用：向指定節點中渲染包含html結構的內容。
與插值語法的區別：
（1）v-html會替換掉節點中所有的內容，{{xx}}則不會,這點和v-text一樣。
（2）v-html可以識別html結構，這點和v-text區別，v-text不能渲染標簽。

    <div id="root"><!-- 使用v-html --><!-- v-html會替換掉節點中的所有內容，可以識別html結構 --><div v-html="str">你好，</div></div><script>new Vue({el: "#root",data: {str: "<h2>我是potato</h2>",},});</script>

注意：v-html有安全性問題！
（1）在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊。
（2）一定要在可信的內容上使用v-html，永不要用在用戶提交的內容上！

v-cloak指令（沒有值）：
（1）本質是一個特殊屬性，Vue實例創建完畢并接管容器后，會刪掉v-cloak屬性。
（2）使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題，先隱藏標簽，然后Vue渲染完了之后刪除v-cloak，那么就能顯示渲染完之后的頁面了。

/* 選中所有包含v-cloak屬性的標簽 */
[v-cloak]{display: none;}

<h2 v-cloak>{{name}}</h2>

v-once指令：
（1）v-once所在節點在初次動態渲染后，就視為靜態內容了，也就是只讀一次。
（2）以后數據的改變不會引起v-once所在結構的更新，可以用于優化性能。

    <div id="root"><div>{{name}}</div><!-- 使用v-once --><h2 v-once>初識n值為：{{n}}</h2><h2>當前n值為：{{n}}</h2><button @click="n++">點我n+1</button></div><script>new Vue({el: "#root",data: {n: 1,},});</script>

v-pre指令：
（1）跳過其所在節點的編譯過程。
（2）可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯。

    <div id="root"><!-- 使用v-pre --><h2 v-pre>Vue其實很簡單</h2><h2>當前n值為：{{n}}</h2><button @click="n++">點我n+1</button></div><script>new Vue({el: "#root",data: {n: 1,},});</script>

2、自定義指令

定義語法

①局部指令（在實例里面寫）

new Vue({							new Vue({
directives:{指令名:配置對象}   或   		directives{指令名:回調函數}
}) 									})

②全局指令

Vue.directive(指令名,配置對象) 或 Vue.directive(指令名,回調函數)

注意：

指令定義時不加v-，但使用時要加v-
指令名如果是多個單詞要用-分隔，比如使用big-number命名方式，不要用bigNumber命名
directives配置對象中所有函數的this都指向window，這個和其他的不同，尤其注意

（1）函數式

函數中有兩個參數，第一個參數是指令所在的標簽（真實DOM），第二個參數是一個存著指令值的對象，通過對象名.value就能獲取當前綁定的值。

何時調用？
1、指令與元素成功綁定時(一上來，沒放入頁面之前)
2、指令所在的模板被重新解析時

需求：定義一個v-big指令，和v-text功能類似，但會把綁定的數值放大10倍。

    <div id="root"><h2>當前的n值是:<span v-text="n">{{n}}</span></h2><h2>放大的n值是:<span v-big="n">{{n}}</span></h2><button @click="n++">點我n+1</button></div><script>new Vue({el: "#root",data: {n: 1,},directives: {big(element, binding) {element.innerText = binding.value * 10;},},});</script>

（2）對象式

配置對象中常用的3個回調：
(1).bind：指令與元素成功綁定時(一上來，沒放入頁面之前)
(2).inserted：指令所在元素被插入頁面時調用（放入頁面后）
(3).update：指令所在模板結構被重新解析時調用（有任意data中的東西被改了）。

需求2：定義一個v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素默認獲取焦點。
使用函數調用element.focus()不奏效，因為big函數執行時頁面上還沒放入input，focus必須在input插入頁面后才能有效果。所以這里我們只能用對象式

    <div id="root"><input type="text" v-fbind:value="n" /></div><script>new Vue({el: "#root",data: {n: 1,},directives: {fbind: {bind(element, binding) {element.value = binding.value;},inserted(element, binding) {element.focus();},update(element, binding) {element.value = binding.value;},},},});</script>

本質上二者差不多，你會發現函數式其實就是對象式中的bind和update的合并，如果在某些時候要實現一些特殊的效果，比如獲取焦點、操作節點父元素等需要等元素插入頁面后才能操作它的這些操作，只能用對象式，靠的就是inserted函數

Vue的生命周期

1、什么是生命周期

生命周期

又名：生命周期回調函數、生命周期函數、生命周期鉤子。
是什么：Vue在關鍵時刻幫我們調用的一些特殊名稱的函數。
生命周期函數的名字不可更改，但函數的具體內容是程序員根據需求編寫的。
生命周期函數中的this指向是vm 或組件實例對象。

2、生命周期中的8個鉤子

常用的生命周期鉤子：

mounted: 發送ajax請求、啟動定時器、綁定自定義事件、訂閱消息等【初始化操作】。
beforeDestroy: 清除定時器、解綁自定義事件、取消訂閱消息等【收尾工作】。

關于銷毀Vue實例:

銷毀后借助Vue開發者工具看不到任何信息。
銷毀后自定義事件會失效，但原生DOM事件依然有效（現在的版本好像也會失效）。（留個疑點，啥是自定義事件？啥是原生DOM事件？答：自定義事件就是定義在組件標簽上的事件，是組件通信的一種方式，原生DOM事件就是類似onclick這種的）。銷毀后所有的監視也沒了
一般不會在beforeDestroy操作數據，因為即便操作數據，也不會再觸發更新流程了。

   <!-- 準備一個容器 --><div id="hello"><h1>當前n值為：{{n}}</h1><button @click="add">點擊n+1</button></div><script>const vm = new Vue({el: '#hello',data: {n: 1},methods: {add() {this.n++;}},beforeCreate() {console.log('beforeCreate');console.log(this);// debugger;},created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeDestroy() {console.log('beforeDestroy');},destryed() {console.log('destryed');}})</script>

3、生命周期圖解（重要）

請添加圖片描述

4、生命周期案例

<!-- 準備一個容器 -->
<div id="hello"><h1 :style="{opacity: opacity}">歡迎學習Vue</h1><button @click="stop">點擊停止閃爍</button>
</div><script>const vm = new Vue({el: '#hello',data: {opacity: 1},methods: {stop() {// clearInterval(this.timer);  vm可以這么寫（類比自殺），也可以寫在beforeDestroy中（類別他殺）this.$destroy();  //vm自殺}},//掛載意思就是放在頁面上//掛載函數,Vue完成模板的解析并把*初始的(只調用一次)*真實DOM放入頁面后(完成掛載)調用mountedmounted() {this.timer = setInterval(() => {console.log('計時器調用');this.opacity -= 0.01;if (this.opacity <= 0) this.opacity = 1;  }, 16)},beforeDestroy() {console.log('vm即將被銷毀');// 為什么vm的后事需要寫在這里，是因為vm很有可能是被別人干掉的clearInterval(this.timer);},})//通過外部的定時器實現(不推薦)// setInterval(() => {//     vm.opacity -= 0.01;//     if (vm.opacity <= 0) vm.opacity = 1; // }, 16);
</script>