Vue 表单修饰符、自定义指令、计算属性、监听器、过滤器、生命周期学习笔记

Vue 表单修饰符、自定义指令、计算属性、监听器、过滤器、生命周期学习笔记

表单修饰符

.number 转换为数值

• 注意点：
• 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
• 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

.trim 自动过滤用户输入的首尾空白字符

• 只能去掉首尾的 不能去除中间的空格

.lazy 将input事件切换成change事件

• .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上

 
 <input v-model.number="age" type="number">
 
 
 <input v-model.trim="msg">
 
 
 <input v-model.lazy="msg" >

自定义指令Vue.directive

• 内置指令不能满足我们特殊的需求
• Vue允许我们自定义指令
• 使用：
  • 使用自定义的指令，只需在对用的元素中，加上’v-‘的前缀形成类似于内部指令’v-if’，'v-text’的形式。
• 注意点：
  • 1、 在自定义指令中 如果以驼峰命名的方式定义 如 Vue.directive(‘focusA’,function(){})
  • 2、 在HTML中使用的时候 只能通过 v-focus-a 来使用

钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

Vue.directive 注册全局指令

• 不带参数

  <input type="text" v-focus>
  <script>
  // 注册一个全局自定义指令 v-focus
  Vue.directive('focus', {
          
    	// 当绑定元素插入到 DOM 中。 其中 el为dom元素
    	inserted: function (el) {
          
      		// 聚焦元素
      		el.focus();
   	}
  });
  new Vue({
          
  　　el:'#app'
  });
  script>
  

• 带参数

   <input type="text" v-color='msg'>
   <script type="text/javascript">
      Vue.directive('color', {
          
        // 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 的选项 用法和全局用法一样
• 局部指令只能在当前组件里面使用
• 当全局指令和局部指令同名时以局部指令为准

计算属性 computed

• 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
• 计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存

 <div id="app">
     
    <div>{
    {reverseString}}div>
    <div>{
    {reverseString}}div>
     
    <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 中 已经存在的数据
• 当需要监听一个对象的改变时，普通的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>

过滤器

• Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
• 过滤器可以用在两个地方：双花括号插值和v-bind表达式。
• 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
• 支持级联操作
• 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
• 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

过滤器中不传递参数

  <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">
   //  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">
        
        {
    { 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>

日期时间过滤器

<script type="text/javascript">
		//时间过滤器
        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);
        })
script>

生命周期

• 事物从出生到死亡的过程
• Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

####常用的 钩子函数

beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

数组变异方法

• 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
• 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()	往数组最后面添加一个元素，成功返回当前数组的长度
pop()	删除数组的最后一个元素，成功返回删除元素的值
shift()	删除数组的第一个元素，成功返回删除元素的值
unshift()	往数组最前面添加一个元素，成功返回当前数组的长度
splice()	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
sort()	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()	reverse() 将数组倒序，成功返回倒序后的数组

替换数组

• 不会改变原始数组，但总是返回一个新数组

filter	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat	concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice	slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

动态数组响应式数据

• Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
• a是要更改的数据 、 b是数据的第几项、 c是更改后的数据