做一名在校大學生，我的夢想是做一名獨立的開發者，具備全棧思維額能力的一名開發者，我的技術棧是 SpringBoot + Vue 學習記錄來自
一、學習概覽
- 表單操作
- 自定義指令
- 計算屬性
- 監聽器
- 濾器器
- 生命週期
二、表單操作
2.1 基於 Vue 的表單操作概覽
- input 單行文本
- textarea 多行文本
- select 下拉多選
- radio 單選框
- checkbox 複選框
2.2 input 處理
我們點擊 form 表單，默認需要點擊 submit 按鈕就會提交，然後 action 就會跳轉到相對的頁面，但是我們要禁用 action 跳轉，就得使用 js 來處理點擊事件，後臺調用 ajax 來請求後端的數據。
但是在 vue 中，可以使用 v-model 來綁定我們存儲的數據，然後使用 @click 來解決點擊事件
<div id="app">
<form action="">
<span>姓名：</span>
<input type="text" v-model="uname" />
<!-- 禁止，默認提交事件 -->
<!-- 阻止默認事件, 把提交 methods 中的方法來處理 -->
<input type="submit" value="提交" @click.prevent="handleClick">
</form>
</div>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 表單操作
var app = new Vue({
el: "#app",
data: {
uname: "abc"
},methods:{
handleClick:function() {
// 使用 ajax 調用後臺的方法
console.log(this.uname);
}
}
})
</script>
2.3 radio 單選框處理
單選框也是通過 v-model 顯示指定數據
<div id="app">
<span>性別：</span>
<span>
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender"/>
<labe for="female">女</label>
</span>
<input type="submit" value="提交" @click.prevent="handleClick">
</div>
<script type="text/javascript">
// 表單操作
var app = new Vue({
el: "#app",
data: {
gender:1 // 指定默認的 radio 的值
},methods:{
handleClick:function() {
// 使用 ajax 調用後臺的方法
console.log(this.gender);
}
}
})
</script>
2.4 checkbox 處理
checkbox 可以一次選擇多個值，所以 checkbox 的值使用 數組來保存，數據綁定同樣是使用 v-model 來完成
<div id="app">
<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>
<input type="submit" value="提交" @click.prevent="handleClick">
</div>
<script type="text/javascript">
// 表單操作
var app = new Vue({
el: "#app",
data: {
hobby:['2','3'] // 默認選中的值
},methods:{
handleClick:function() {
// 使用 ajax 調用後臺的方法
console.log(this.hobby);
}
}
})
</script>
2.5 select 下拉框處理
2.5.1 選擇一條數據
下拉框選擇一條值的時候和單選框的情況是一樣的，一樣使用 v-model 來綁定
<div id="app">
<span>專業：</span>
<select v-model="project">
<option value="0">請選擇專業..</option>
<option value="1">計算機</option>
<option value="2">軟件工程</option>
<option value="3">通信工程</option>
<option value="4">物聯網工程</option>
</select>
<input type="submit" value="提交" @click.prevent="handleClick">
</div>
<script type="text/javascript">
// 表單操作
var app = new Vue({
el: "#app",
data: {
project:3 // 選擇單個內容
},
methods: {
handleClick: function() {
// 使用 ajax 調用後臺的方法
console.log(this.project);
}
}
})
</script>
2.5.2 select 選擇多條數據
我們在 select 中加一條屬性， multiple ，然後就和 多選框的情況是一樣的啦，下面就會默認選中 2 和 4的 option
<div>
<span>專業：</span>
<select v-model="project" multiple="multiple">
<option value="0">請選擇專業..</option>
<option value="1">計算機</option>
<option value="2">軟件工程</option>
<option value="3">通信工程</option>
<option value="4">物聯網工程</option>
</select>
</div>
<script type="text/javascript">
// 表單操作
var app = new Vue({
el: "#app",
data: {
project:['2','4']
},
methods: {
handleClick: function() {
// 使用 ajax 調用後臺的方法
console.log(this.project);
}
}
})
</script>
2.6 textarea 文本框處理
使用的方法和 input 是一樣的，但是要注意，在 vue 中不能在 textarea 中加入內容，如果該標籤被 v-model 處理，他得知最終會顯示爲 data 中的數據
<div id="app">
<span>介紹：</span>
<textarea v-model="desc"></textarea>
</div>
<script type="text/javascript">
// 表單操作
var app = new Vue({
el: "#app",
data: {
desc:"haha"
},
methods: {
handleClick: function() {
// 使用 ajax 調用後臺的方法
console.log(this.project);
}
}
})
</script>
2.7 表單域修飾符
- number 轉換爲數值
- trim：去掉開始和結尾的空格
- lazy：將 input 事件轉換爲 change 事件
2.7.1 number 類型
一般情況在 JavaScript 中計算的都是 字符串拼接，如果我們要進行數值類型計算，就要使用類型轉換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單修飾符</title>
</head>
<body>
<div id="app">
<div>
<h3>number</h3>
<input type="text" v-model="num"/>
<button @click="calc">計算</button>
</div>
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num: ''
},methods:{
calc: function() {
console.log(this.num + 12)
}
}
})
</script>
</body>
</html>
要計算整數，我們只需要這麼做：<input type="text" v-model.number="num"/> ，將 v-model 加上 .number 屬性就好了
2.7.2 trim 去除兩邊空格
2.7.3 lazy 事件
默認 v-model 使用的是 input 事件，我們可以在輸入的內容加一個插值表達式，發現數值是和我們輸入的內容一起變化的。但是我們加上 lazy 事件之後，就會變成 change 事件，簡而言之，就是變成了失去焦點事件，當失去焦點了纔會觸發
這個 lazy 事件非常適合用於驗證賬戶是否符合條件，這裏集合 ajax 就會很簡單
三、自定義命令
前面用過的 v-xxx 都是vue 中的內置指令，但是內置指令不滿足某些場景的使用功能，所以我們可以使用自定義組件，接下來編寫一個簡單的自動聚焦的方法
3.1 不帶參數的自定義指令
3.2 帶參數的自定義指令
根據自定義指令，改變顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定義指令</title>
</head>
<body>
<div id="app">
<!-- 設置自定義顏色 -->
<input type="text" v-color="msg" />
</div>
<script src="../vue.js"></script>
<script>
// 自定義指令 帶參數
Vue.directive('color',{
bind: function(el, binding) {
// 根據指令的參數設置背景色
console.log(binding.value.color);
el.style.backgroundColor = binding.value.color;
}
});
var app = new Vue({
el:"#app",
data:{
msg: {
color: 'orange'
}
},
})
</script>
</body>
</html>
3.3 局部自定義命令
前面定義過的樣子就相當於一個全局的自定義命令。因此有全局的定義，就有對應的局部自定義命令的定義。
我們直接在 一個 vue 實例當中定義 directives 屬性即可。
因此我定義了兩個方法，分別是聚焦，和顏色改變的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定義指令</title>
</head>
<body>
<div id="app1">
<input type="text" v-color="msg" />
<input type="text" v-focus />
</div>
<script src="../vue.js"></script>
<script>
// 局部指令 兩者的作用是一樣的。
var app1 = new Vue({
el: "#app1",
data: {
msg: {
color: 'rgba(0,0,0,0.3)'
}
},
// 設置局部指令
directives: {
color: {
bind: function(el, binding) {
// 根據指令的參數設置背景色
console.log(binding.value.color);
el.style.backgroundColor = binding.value.color;
}
},
// 自動聚焦的功能
focus: {
inserted: function(el) {
el.focus();
}
}
}
})
</script>
</body>
</html>
四、計算屬性 （computed）
4.1 計算屬性功能
首先計算屬性和方法的使用基本差不多，但是計算屬性也有它獨有的特點
- 對應比較複雜的運算邏輯，使用計算屬性可以提高運行效率 （因爲它還提供了緩存機制）
- 計算屬性是依賴於 data 當中的數據
- 計算屬性第一次計算會將結果緩存起來，第二次在運算的時候會將計算的記過直接取出來
4.2 計算屬性的基本使用
下面以一個反轉字符串爲例，我們來看下綜合運行的情況。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定義指令</title>
</head>
<body>
<div id="app">
<div>原生字符串：{{msg}}</div>
<div>反轉字符串：{{msg.split('').reverse().join('')}}</div>
<h2>計算屬性測試</h2>
<div>計算屬性方法實現：{{reverseMessage}}</div>
<div>計算屬性方法實現：{{reverseMessage}}</div>
<div>計算屬性方法實現：{{reverseMessage}}</div>
<h2>方法測試</h2>
<div>方法實現反轉字符串：{{reverseMsg()}}</div>
<div>方法實現反轉字符串：{{reverseMsg()}}</div>
<div>方法實現反轉字符串：{{reverseMsg()}}</div>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Hello World"
},
// 計算屬性使用，基於 data 中的數據變化的。抽取複雜的數據，使用計算屬性是模板內更簡單
// 計算屬性和 method 的區別：計算屬性有緩存的，效率更高
// 計算屬性是基於他們的依賴的，依賴 data 中的數據。
// 計算屬性第一次計算之後就會把結果保存起來，第二次計算時，會直接訪問結果，而不會進行運算
methods: {
reverseMsg: function() {
console.log("方法執行了")
return this.msg.split('').reverse().join('')
}
},
computed: {
reverseMessage: function() {
console.log("計算屬性執行了");
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
4.3 演示效果
我們看下兩個方法分別打印了幾次
計算屬性只打印了一次，只有第一次調用的時候纔會打印。這也證明了計算屬性在某方面確實性能比方法搞很多
五、偵聽器 （watch）
偵聽器簡單的來說就是數據有變化就通知監聽器所綁定的方法。
偵聽器主要用來偵聽屬性
偵聽器的關鍵字是 watch，使用起來和 計算屬性差不多
5.1 偵聽器的基本使用
接下來我們以一個用戶姓 與 名 的拼接的小案例來演示偵聽器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偵聽器</title>
</head>
<body>
<div id="app">
<div>名：</div>
<span>
<input type="text" v-model="firstName" />
</span>
<div>姓：</div>
<span>
<input type="text" v-model="lastName" />
</span>
<div>
{{fullname}}
</div>
<div>
計算屬性：{{fullName}}
</div>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
firstName: 'Gorit',
lastName: 'Smith',
fullname: 'Gorit Smith'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
// 屬性監聽，和 data 裏的屬性一一對應
firstName: function(val) {
this.fullname = val + ' ' + this.lastName;
},
lastName: function(val) {
this.fullname = this.firstName + ' ' + val;
}
}
})
</script>
</body>
</html>
5.2 偵聽器小實例，用戶驗證小 demo
偵聽器的使用情景一般在 ajax 驗證用的比較多，接下來我們就以一個簡單的用戶驗證爲例演示 watch 的使用場景。
驗證基本流程
- 我們使用 v-modal 實現用戶的雙向綁定
- 監聽器用來監聽用戶輸入的用戶名的變化
- 用戶輸入完畢，調用後臺 接口 實現驗證，這裏簡化操作，使用 定時器模擬 ‘驗證’ 的操作。
- 再將驗證的結果返回給前臺。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>賬戶驗證</title>
</head>
<body>
<div id="app">
<div>
<span>用戶名：</span>
<span>
<input type="text" v-model="username">
</span>
<span v-html="tip"></span>
</div>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
username: '',
tip: ''
},
methods: {
checkName: function(username) {
let that = this;
// 接口調用，但是可以使用定時任務的模仿是模擬接口調用
setTimeout(function() {
// 模擬接口調用, 要使用 this 獲得 tip的值，但是 setTimeout 的 this 是 windows，所以需要在外面緩存一個 this
if (username === 'admin') {
that.tip = '<font color="red">賬戶名已經存在，請更換一個</font>'
} else {
that.tip = '<font color="green">用戶名可以使用</font>'
}
},2000);
}
},
watch: {
// 監聽的屬性，使用函數處理
username: function(val) {
// 調用後臺接口驗證用戶名的合法性
this.checkName(val);
// 修改提示信息
this.tip = '正在驗證...';
}
}
})
</script>
</body>
</html>
六、過濾器（filters）
6.1 過濾器的基本使用
首先，我們需要自定義一個過濾規則，然後在插值表達式中，加上過濾規則，就完成了過濾器的基本使用，我們將會在下面介紹過濾器的基本定義
使用場景：
- 插值表達式
- 屬性綁定
過濾器的使用基本有三種方式
<div>
普通過濾{{msg | upper}}
</div>
<div>
級聯操作：{{msg | lower | upper}}
</div>
<h3> 全局屬性：屬性綁定 </h3>
<div :abc="msg | upper">
測試數據
</div>
豎槓右邊的就是我們定義的過濾規則
6.2 全局過濾器
我們以首字母大小轉換的爲例，通過過濾器，將首字母變換大寫，和小寫來演示全局過濾器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>過濾器</title>
</head>
<body>
<div id="app">
<!-- 過濾器的使用 -->
<input type="text" v-model="msg" />
<h2>全局數據</h2>
<div>
首字母大寫 {{msg | upper}}
</div>
<div>
首字母小寫： {{msg | lower}}
</div>
<div>
級聯操作：{{msg | lower | upper}}
</div>
<h3> 全局屬性：屬性綁定 </h3>
<div :abc="msg | upper">
測試數據
</div>
</div>
<script src="../vue.js"></script>
<script>
// 1. 自定義過濾器
Vue.filter('upper', (val) => {
// 過濾器首字母大寫業務, 原生 js API 處理
return val.charAt(0).toUpperCase() + val.slice(1);
})
Vue.filter('lower', (val) => {
// 過濾器首字母小寫業務, 原生 js API 處理
return val.charAt(0).toLowerCase() + val.slice(1);
})
var app = new Vue({
el:"#app",
data:{
msg: ''
}
})
</script>
</body>
</html>
級聯操作：解釋一下，級聯操作，會以最終的爲準，我這裏是首字母先轉換爲小寫，在轉換爲大寫，所以看到的是大寫的效果。
全局屬性綁定：
6.3 局部過濾器
局部過濾器使用的對象是 filters，同其他的對象一樣，都需要將結果返回
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>過濾器</title>
</head>
<body>
<div id="app">
<h3>局部指令：反轉字符串</h3>
<div>
{{msg | reversed}}
</div>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
msg: ''
},
// 局部過濾器指令
filters: {
reversed: function(val) {
return val.split('').reverse('').join('');
}
}
})
</script>
</body>
</html>
6.4 攜參過濾 （小案例，時間格式化）
我們以時間格式化的案例來講解過濾器攜帶參數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>過濾器</title>
</head>
<body>
<div id="app">
<div>
帶參數的過濾器：{{date | format('yyyy-MM-dd')}}
</div>
</div>
<script src="../vue.js"></script>
<script>
Vue.filter('format', (value, arg1) => {
// value 就是過濾器傳過來的 date，arg1 是我們自己要傳入的參數（格式）
if (arg1 == 'yyyy-MM-dd') {
var ret = '';
ret = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
return ret;
}
return value;
})
var app = new Vue({
el:"#app",
data:{
date: new Date()
},
})
</script>
</body>
</html>
當然網上有比較好的方案，這裏只是演示基本使用
七、Vue 生命週期講解
7.1 生命週期階段
- 掛載（初始化相關屬性）
- beforeCreate
- created
- beforeMount
- mounted
- 更新 （元素或組件的變更操作）
- beforeUpdate
- updated
- 銷燬 （銷燬相關屬性）
- beforeDestory
- destroyed
7.2 使用場景
① beforeCreate 在實例初始化之後,數據觀測和事件配置之前被調用。
② created 在實例創建完成後被立即調用。
③ beforeMount 在掛載開始之前被調用。
④ mountgd e|被新創建的vm.$el替換,並掛載到實例上去之後調用該鉤子。
⑤ beforeUpdate 數據更新時調用,發生在虛擬DOM打補丁之前。
⑥ updated 由於數據更改導致的虛擬DOM重新渲染和打補丁,在這之後會調用該鉤子。
⑦ beforeDestroy 實例銷燬之前調用。
⑧ destroyed 實例銷燬後調用。銷燬的時候使用 this.$destory()
7.3 真實案例
我們在開發 Vue 項目的時候，比如要加載列表數據，一般會在 created 方法裏調用這個獲取數據列表的方法。