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
里面也提到了正则的捕获以及很多的日常正则表达式

My-Belief

原创文章 73 获赞 64 访问量 2725

关注私信

vue.js从入门到深入再到随心而用————自定义指令_计算属性_侦听器_过滤器总结

本章为总结的文章，主要总结了以下四个方面的内容

1.自定义指令

1.1自定义指令的基本用法

1.2带参数的自定义指令

1.3局部指令用法

2.计算属性于方法

3.侦听器watch（是不是听着就像高科技）

4.过滤器

4.1不带参数的过滤器

4.2带参数的过滤器

猜你喜欢