vue中的methods,filter,computed,watch

methods,filter,computed,watch都是vue中特有的针对数据进行不同方面处理的属性。

methods 方法

vue的中的methods属性是函数的容器

methods:{
	//可以放置多个函数,函数与函数之间使用逗号隔开
	handle:function(){},
	//常见的还有下面的这种写法
	handle(){}	
}

filter 过滤器

vue中常用过滤器对一些数据进行格式化操作.
下面这个是定义在局部的自定义过滤器。

<body>
    <div id="app">
        {{message|captialize}}
    </div>
  //vue.js允许你自定义过滤器,被用作一些常见的文本格式化,由"管道符"指示 -->
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            message:'runoob'
        },
        // 过滤函数接受表达式的值作为第一个参数。
        // 以下实例对输入的字符串第一个字母转为大写
        filters:{
            captialize:function(value){
                if(!value) return '';
                value=value.toString();
                return value.charAt(0).toUpperCase()+value.slice(1);
            }
        }
    })
</script>
</body>

定义在全局的全局过滤器

//vue项目的router文件中导入依赖包 作用于全局
#导入包
yarn add js-num-format
# router
import {numberFormat} from 'js-num-format' 
Vue.filter('jsNumformat',numberFormat);
#作用于数据
<div>
//数据和filter函数之间使用管道符隔开	
	<center>{{ msg| jsNumformat}}</center>
</div>

computed 计算属性

我们知道在{{ }}里面也可以进行数据的计算操作,但是这样会让渲染处看起来很冗杂,也不利于数据的多重使用,所以我们常用computed属性对数据进行处理操作。
关键:计算属性并不是把方法给保存了,而是会直接执行这个函数,并把函数的返回结果给保存下来。

<body>
    <div id="app">
        <p>原始字符串:{{message}}</p>
        <p>反转后的字符串:{{reveresedMessage}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'app',
            data:{
                msg:'lhh',
                message:'hello'
            },
            // 计算属性的getter
            computed:{
       			reveresedMessage:function(){
     			//split是将字符串分割为一个一个字符,并返回一个数组
     			//reverse 是将数组进行翻转,join和split相反将数组组合为字符串。
         			 return this.message.split(''),reverse().join('');
       			},
    		})
    </script>
</body>

可以使用methods来代替computed,效果上是一样的,但是computed是基于它的依赖缓存,只有相互依赖发生变化时才会重新获取值,而使用methods,再重新渲染的时候,函数总会从新调用执行。

watch 侦听器

作用:当渲染节点中的数据发生改变时触发侦听器。

<body>
    <div id="app">
        {{name}}
        {{user.age}}
        //改变name的值
        <input type="text" v-model="name">
    </div>
    <script >
        const vm=new Vue({
            el:'#app',
            data:{
                name:'dream',
                user:{
                    username:'1',
                    age:12,
                }
         },
         watch:{
   //监听的是name数据的值,函数中的默认两个参数是name的新值和旧值。
     	   name:function(newname,oldname){
           console.log(newname); 
           console.log(oldname);
         },
   //若监听的数据是一个引用类型
      		user:{
            	deep:true,
   //这里的函数名必须是handler才行。
	            handler(newV,oldV){
	            //我们发现这两参数的值是一样的
	            console.log("新",newV);
	            console.log('旧',oldV);
           }
         }
      }
  })
    </script>
</body>

当节点数据放入侦听器中后,就会触发ob(观察者)模式,所以一旦数据发生改变,就会触发相应的侦听器。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页