前端筆記Vue項目day2(二）

表單修飾符
.number 轉換爲數值
注意點：
當開始輸入非數字的字符串時，因爲Vue無法將字符串轉換成數值
所以屬性值將實時更新成相同的字符串。即使後面輸入數字，也將被視作字符串。

.trim 自動過濾用戶輸入的首尾空白字符
只能去掉首尾的 不能去除中間的空格

.lazy 將input事件切換成change事件
.lazy 修飾符延遲了同步更新屬性值的時機。即將原本綁定在 input 事件的同步邏輯轉變爲綁定在 change 事件上

在失去焦點 或者 按下回車鍵時才更新
[mw_shl_code=applescript,true]<!-- 自動將用戶的輸入值轉爲數值類型 -->
<input v-model.number="age" type="number">

<!--自動過濾用戶輸入的首尾空白字符 -->
<input v-model.trim="msg">

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >[/mw_shl_code]
自定義指令
內置指令不能滿足我們特殊的需求
Vue允許我們自定義指令

Vue.directive 註冊全局指令
[mw_shl_code=applescript,true]<!--
使用自定義的指令，只需在對用的元素中，加上'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>[/mw_shl_code]
Vue.directive 註冊全局指令 帶參數
[mw_shl_code=applescript,true]<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>[/mw_shl_code]