vue.js從入門到深入再到隨心而用————自定義指令_計算屬性_偵聽器_過濾器總結

本章爲總結的文章，主要總結了以下四個方面的內容

1.自定義指令

部分只有主要代碼

1.1自定義指令的基本用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--
			使用自定義的指令，只需在對用的元素中，加上'v-'的前綴形成類似於內部指令'v-if'，'v-text'的形式。
			-->
			<input type="text" v-focus/>
			<input type="text" />
		</div>
		
		<script type="text/javascript">
			// 注意點：
			// 1、 在自定義指令中 如果以駝峯命名的方式定義 如 Vue.directive('focusA',function(){})
			// 2、 在HTML中使用的時候 只能通過 v-focus-a 來使用
			// 註冊一個全局自定義指令 v-focus
		Vue.directive('focus',{
			// 當綁定元素插入到 DOM 中。 其中 el爲dom元素
			inserted:function(el){//el表示所綁定的元素
				el.focus();//聚焦元素
			}
		})
			
		new Vue({
			el:'#app',
			data:{

			}
		})
		</script>

	</body>
</html>

效果就是獲取焦點

1.2帶參數的自定義指令

<div id="app">
			<input type="text" v-color='msg'/>
		</div>
<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;
			}
		})
		new Vue({
			el:'#app',
			data:{
				msg:{
					color:'blue'
				}
			}
		})
		</script>

1.3局部指令用法

局部指令其實很簡單就是把指令定義在你操作的範圍內，只能在這個範圍裏面調用，不在這個範圍內的元素無法調用局部定義的指令

		<div id="app">
			<!--
			使用自定義的指令，只需在對用的元素中，加上'v-'的前綴形成類似於內部指令'v-if'，'v-text'的形式。
			-->
			<input type="text" v-focus/>
			<input type="text" v-color='msg'/>
		</div>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				msg:{
					color:'blue'
				}
			}, 
		directives: {
			color: {
			  bind: function(el, binding){
				el.style.backgroundColor = binding.value.color;
			  }
			},
			focus: {
			  inserted: function(el) {
				el.focus();
			  }
			}
		}
		})
		</script>

2.計算屬性於方法

我們直接來代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<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 example=new Vue({
				el:'#app',
				data:{
					msg:'nihao',
					num:100
				},
				methods: {
				  reverseMessage: function(){
				    console.log('methods')
				    return this.msg.split('').reverse().join('');
				  }
				},
				computed:{
					reverseString: function(){
					  console.log('computed')
					  // return this.msg.split('').reverse().join('');
					  var total = 0;
					  // 當data 中的 num 的值改變的時候 reverseString 會自動發生計算
					  for(var i=0;i<=this.num;i++){
					    total += i;
					  }
					  return total;
					}
				}
			})
		</script>
	</body>
</html>

當在控制檯通過example.num=xxx修改num的值後，可以觀察到到效果

3.偵聽器watch（是不是聽着就像高科技）

使用watch來響應數據的變化
一般用於異步或者開銷較大的操作
watch 中的屬性一定是data 中已經存在的數據
當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠
監聽到變化，此時就需要deep屬性對對象進行深度監聽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>
	<body>
		<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 example=new Vue({
				el:'#app',
				data:{
					firstName: 'Jim',
					lastName: 'Green',
				},
				computed: {
				  fullName: function(){
				    return this.firstName + ' ' + this.lastName;
				  }
				},
				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>
	</body>
</html>

4.過濾器

"Vue.js允許自定義過濾器，可被用於一些常見的文本格式化。
過濾器可以用在兩個地方：雙花括號插值和v-bind表達式。
過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示
支持級聯操作
過濾器不改變真正的 data ，而只是改變渲染的結果，並返回過濾後的版本
全局註冊時是filter，沒有s的。而局部過濾器是filters，是有s的"

4.1不帶參數的過濾器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>測試數據</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      過濾器
      1、可以用與插值表達式和屬性綁定
      2、支持級聯操作
    */
    // Vue.filter('upper', function(val) {
    //   return val.charAt(0).toUpperCase() + val.slice(1);
    // });
    Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      filters: {
        upper: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>
</body>
</html>

4.2帶參數的過濾器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      過濾器案例：格式化日期
      
    */
    // Vue.filter('format', function(value, arg) {
    //   if(arg == 'yyyy-MM-dd') {
    //     var ret = '';
    //     ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    //     return ret;
    //   }
    //   return value;
    // })
    Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
          if (typeof date === "string") {
              var mts = date.match(/(\/Date\((\d+)\)\/)/);
              if (mts && mts.length >= 3) {
                  date = parseInt(mts[2]);
              }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
              return "";
          }
          var map = {
              "M": date.getMonth() + 1, //月份 
              "d": date.getDate(), //日 
              "h": date.getHours(), //小時 
              "m": date.getMinutes(), //分 
              "s": date.getSeconds(), //秒 
              "q": Math.floor((date.getMonth() + 3) / 3), //季度 
              "S": date.getMilliseconds() //毫秒 
          };

          format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
              var v = map[t];
              if (v !== undefined) {
                  if (all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                  }
                  return v;
              } else if (t === 'y') {
                  return (date.getFullYear() + '').substr(4 - all.length);
              }
              return all;
          });
          return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: '#app',
      data: {
        date: new Date()
      }
    });
  </script>
</body>
</html>

關於js中涉及到的正則表達式的問題，歡迎大家看我的另外一篇博客
https://blog.csdn.net/qq_42147171/article/details/105146377
裏面也提到了正則的捕獲以及很多的日常正則表達式

vue.js從入門到深入再到隨心而用————自定義指令_計算屬性_偵聽器_過濾器總結

本章爲總結的文章，主要總結了以下四個方面的內容

1.自定義指令

1.1自定義指令的基本用法

1.2帶參數的自定義指令

1.3局部指令用法

2.計算屬性於方法

3.偵聽器watch（是不是聽着就像高科技）

4.過濾器

4.1不帶參數的過濾器

4.2帶參數的過濾器

推薦2款開源、美觀的WinForm UI控件庫

NET9 AspnetCore將整合OpenAPI的文檔生成功能而無需三方庫

javaEE學習筆記————HTTP協議：響應消息、Response對象、ServletContext對象

考研數據結構————第一章：緒論

XML文件解析————一起來了解一波

javaEE學習筆記————maven基礎總結！！

NoSql數據庫的學習————Redis數據庫的學習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結