表單操作
表單基本操作
獲取單選框中的值：通過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：轉化爲數值
- trim：去掉開始和結尾的空格
- lazy : 將input事件切換爲change事件
<!-- number轉化爲數值() 、輸入框中的值是字符串-->
<input type="text" v-model.number='age'>
<!-- trim去除兩端空格() -->
<input type="text" v-model.trim='info'>
<!--改變v-model默認input事件爲change事件(失去焦點才觸發) -->
<input type="text" v-model='msg'>
自定義指令
內置指令不滿足需求
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中、讓模板更加的簡潔
計算屬性是基於它們的響應式依賴進行緩存的（數據不變、緩存不變）- 計算屬性的值是通過返回值決定的、基於data數據做處理
<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中的數據才能夠監聽到變化，此時就需要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 值 改變的時候 會自動觸發 watch
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
// 注意： 這裏 lastName 對應着data 中的 lastName
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
需要返回一個新的結果使用 計算屬性(computed)、
只需要監聽數據的變化使用偵聽器(watch)
過濾器
- 自定義過濾器，可被用於一些常見的文本格式化。
- 過濾器可以用在兩個地方：
雙花括號插值和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把原生的數值API處理爲響應式、這樣的化只要操作數組數據、頁面模板就會跟着改變
| 數組方法 | 描述 |
|---|---|
| push() | 往數組最後面添加一個元素，成功返回當前數組的長度 |
| pop() | 刪除數組的最後一個元素，成功返回刪除元素的值 |
| shift() | 刪除數組的第一個元素，成功返回刪除元素的值 |
| unshift() | 往數組最前面添加一個元素，成功返回當前數組的長度 |
| splice() | 有三個參數，第一個是想要刪除的元素的下標（必選），第二個是想要刪除的個數（必選），第三個是刪除 後想要在原位置替換的值 |
| sort() | sort() 使數組按照字符編碼默認從小到大排序,成功返回排序後的數組 |
| reverse() | reverse() 將數組倒序，成功返回倒序後的數組 |
替換數組
- 不會改變原始數組，但總是返回一個新數組
| 數組方法 | 描述 |
|---|---|
| filter | filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。 |
| concat | concat() 方法用於連接兩個或多個數組。該方法不會改變現有的數組 |
| slice | slice() 方法可從已有的數組中返回選定的元素。該方法並不會修改數組，而是返回一個子數組 |
響應式數據處理
- Vue.set(a,b,c)
- a是要更改的數據 、 b是數據的第索引、 c是要更改爲什麼值
//(不具備響應式)
// vm.info.gender='male';
//vm.list[0]='lemon';
//數據響應式處理
// 以下兩種方式既可以處理數組索引、也可以處理對應屬性
1、Vue.set(vm.list, 2, 'lemon');
2、vm.$set(vm.info,'gender','female')
