vue.js基礎知識篇(3):計算屬性、表單控件綁定
阿新 • • 發佈：2017-06-22
multi option || list text 知識 基礎 unset select標簽 
第四章:計算屬性
為了避免過多的邏輯造成模板的臃腫不堪，可使用計算屬性來簡化邏輯。
1.什麽是計算屬性
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example">
<input type="text" v-model="didi"/>
<inputtype="text" v-model="family"/>
<br/>
didi={{didi}},family={{family}},didiFamily={{didiFamily}}
</div> <script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#example",
data:{
didi:"didi",
family:"family"
},
computed:{
//一個計算屬性的getter
didiFamily:{
get:function(){
//this 指向vm實例
returnthis.didi+this.family;
}
} }
})
</script>
</body>
</html>
當vm.didi和vm.family的值發生變化時，vm.didiFamily的值會自動更新，當然也會同步到DOM元素上。
2.計算屬性的性能分析
第五章:表單控件綁定
1.v-model更新表單控件的基本例子
這些基本例子，直接使用value屬性，綁定的都是字符串或者checkbox的布爾值。接下來分別介紹。
(1)文本框的使用
當用戶操作文本框時，vm.name會自動更新為用戶輸入的值，同時span也會改變。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="demo"> <span>Welcom,{{name}}!join DDFE</span> <br/> <input type="text" v-model="name" placeholder="join DDFE"/> </div> <script src="js/vue.js"></script> <script> var vm=new Vue({ el:"#demo" }) </script></body></html>textInput使用v-model
(2)復選框checkbox的使用
單個復選框的使用和文本框類似，多個復選框，也就是復選框組，被選入的值會放入一個數組。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>復選框組</title></head><body><div id="demo"> <input type="checkbox" id="flash" value="flash" v-model="bizLines"/> <label for="flash"> 快車 </label> <br/> <input type="checkbox" id="premium" value="premium" v-model="bizLines"/> <label for="premium"> 專車 </label> <br/><input type="checkbox" id="bus" value="bus" v-model="bizLines"/> <label for="flash"> 巴士 </label> <br/></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo", data:{ bizLines:[] } })</script></body></html>復選框組通過v-model被選中的值會放入數組中
(3)單選按鈕radio的使用
當單選按鈕被選中時，v-model的變量值會被賦值為對應的value值。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>單選按鈕radio</title></head><body><div id="demo"> <input type="radio" id="flash" value="flash" v-model="bizLines"/> <label for="flash"> 快車 </label> <br/> <input type="radio" id="premium" value="premium" v-model="bizLines"/> <label for="premium"> 專車 </label> <br/> <input type="radio" id="bus" value="bus" v-model="bizLines"/> <label for="flash"> 巴士 </label> <br/> <span>Picked:{{bizLines}}</span></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo" })</script></body></html>單選按鈕使用v-model
(4)select控件使用v-model分為兩種情況。
一種是單選select控件，第二種是多選select控件。v-model指令都用於select標簽。動態的生成option可以借助v-for指令等。
單選時vm.selected為對應的option的value值。多選會被放入一個數組中，多選是selectr有multiple屬性，瀏覽器窗口想要多選可以借助ctrl和shift快捷鍵。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜單的選擇</title></head><body><div id="demo"> <select v-model="bizLine"> <option selected value="flash">快車</option> <option value="premium">專車</option> <option value="bus">巴士</option> </select> <span>selected:{{bizLine}}</span> <br/> <select v-model="bizLine2" multiple> <option selected value="flash">快車</option> <option value="premium">專車</option> <option value="bus">巴士</option> </select> <span>selected:{{bizLine2|json}}</span></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo" })</script></body></html>
2.動態的值綁定
通過v-bind代替直接使用value屬性，那麽除了字符串，還可以是數值、對象、數組等非字符串的值。
(1)checkbox
3.v-model指令的修飾詞及其源碼分析
(1)lazy
默認情況下，v-model在input事件中同步輸入框的值與數據，而添加了lazy特性後，在change事件中去掉同步性。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="demo"> <span>Welcom,{{name}}!join DDFE</span> <br/> <input type="text" v-model="name" placeholder="join DDFE" /></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo" })</script></body></html></body></html>lazy修飾詞
同樣是之前的代碼，只是添加了lazy屬性，那麽name變量就不會同步了。
<!--源碼目錄:src/directives/public/model/text.js-->
var lazy = this.params.lazy //獲取到參數的lazy的布爾值//...if (!isRange && !lazy) { //如果element的type值不是range，而且lazy為false this.on(‘focus‘, function () { self.focused = true }) this.on(‘blur‘, function () { self.focused = false // do not sync value after fragment removal (#2017) if (!self._frag || self._frag.inserted) { self.rawListener() } }) }//...if (this.hasjQuery) { const method = jQuery.fn.on ? ‘on‘ : ‘bind‘ jQuery(el)[method](‘change‘, this.rawListener) if (!lazy) { jQuery(el)[method](‘input‘, this.listener) } } else { this.on(‘change‘, this.rawListener) if (!lazy) { this.on(‘input‘, this.listener) } }
(2)debounce
<!--源碼目錄:src/directives/public/model/text.js-->
if (debounce) { this.listener = _debounce(this.listener, debounce) } // Support jQuery events, since jQuery.trigger() doesn‘t // trigger native events in some cases and some plugins // rely on $.trigger() // // We want to make sure if a listener is attached using // jQuery, it is also removed with jQuery, that‘s why // we do the check for each directive instance and // store that check result on itself. This also allows // easier test coverage control by unsetting the global // jQuery variable in tests. this.hasjQuery = typeof jQuery === ‘function‘ if (this.hasjQuery) { const method = jQuery.fn.on ? ‘on‘ : ‘bind‘ jQuery(el)[method](‘change‘, this.rawListener) if (!lazy) { jQuery(el)[method](‘input‘, this.listener) } } else { this.on(‘change‘, this.rawListener) if (!lazy) { this.on(‘input‘, this.listener) } }
(3)number
<!--源碼目錄:src/directives/public/model/text.js-->
var number = this.params.number//****this.listener = this.rawListener = function () { if (composing || !self._bound) { return } var val = number || isRange ? toNumber(el.value) : el.value self.set(val) // force update on next tick to avoid lock & same value // also only update when user is not typing nextTick(function () { if (self._bound && !self.focused) { self.update(self._watcher.value) } }) }//****
<!--源碼目錄:src/util/lang.js-->
export function toNumber (value) { if (typeof value !== ‘string‘) { return value } else { var parsed = Number(value) return isNaN(parsed) ? value : parsed }}
vue.js基礎知識篇(3):計算屬性、表單控件綁定