欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue中计算属性、侦听、过滤、自定义指令、ref的操作

程序员文章站 2022-05-29 12:42:40
1.计算属性 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值;多次调用,计算属性会立即返回之前的计算结果,而不必再次执行函数。 2.使用侦听器 我们发现,与计算属性相比, ......

1.计算属性

<div id="app">
    <input type="text" v-model="x">
    <input type="text" v-model="y">
    {{get}}
</div>
<script>
         var app=new vue({
                el:"#app",
                data:{
                       x:"",
                       y:""                
                },
                computed:{
                      get:function(){
                       return this.x+this.y;
                  }
                 }
               });
</script>

     我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值;多次调用,计算属性会立即返回之前的计算结果,而不必再次执行函数。

2.使用侦听器

<body>
        <div id="app">
            <input type="text" v-model="msg">
            {{msg}}
        </div>
    </body>
    <script>
     var app=new vue({
         el:"#app",
         data:{
             msg:"",
         },
         watch: {
           msg:function(newval,oldval){
                if(newval=="admin"){
                    this.msg=oldval;
                }else{
                    this.msg=newval;
                }
           }  
         },
     });
</script>

    我们发现,与计算属性相比,侦听器并没有优势;也不见得好用,直观上反而比计算属性的使用更繁琐;虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

3.过滤器的使用

局部过滤器:

<body>
    <div id="app">
        <input type="text" v-model="msg">
        {{msg|myf|nu}}
    </div> 
</body>
<script>
     var app=new vue({
         el:"#app",
        data: {
           msg:"",
        },
         filters:{
             myf:function(val){
                return val.touppercase();
            },
             nu:function(val){
                  var reg=/\d/g;
                 return val.replace(reg,'*');
            }
         }
     });
</script>

全局过滤器:

<body>
    <div id="app2">
        <input type="text" v-model="msg">
        {{msg|myf|nu}}
    </div>
</body>
<script>
    vue.filter('myf',function(val){
           return  val.touppercase();
    });
    vue.filter('nu',function(val){
           var reg=/\d/g;
           return val.replace(reg,'*');
    });
    var app2=new vue({
         el:"#app2",
         data:{
             msg:"",
         }
    });
</script>

过滤器要被添加到操作值得后面,使用 管道符 | 分割;vue会自动将操作值,以实参的形式传入过滤器的方法中;

4.自定义指令

前面我们学过 v-on 、v-model、v-show 等指令,在操作 dom 时使用了 ref 属性,其实之前学过的指令也是操作dom 的一种方式,但有时,这些指令并不能满足我们的需求,因此 vue 允许我们自定义指令来操作 dom

<body>
    <div id="app">
        <p v-color>123131321</p>
    </div>
</body>
<script>
    //全局指令
    //    vue.directive("color",{
    //        inserted:function(el){
    //             el.style.background="red";
    //        }
    //    });
       var app=new vue({
           el:"#app",
           directives:{
               color:{
                   inserted:function(el){
                      el.style.background="green";
                   }
               }
           }
       });
</script>

5.ref的使用

在学习 jq 时,我们首要任务就是学习选择的使用,因为选择可以极其方便帮助我们获取节点查找dom,因为我们要通过dom展示处理数据。而在vue中,我们的编程理念发生了变化,变为了数据驱动dom;但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点;

<body>
    <div id="app">
        <input type="button" value="按钮" @click="get">
        <p ref="ps">211113131</p>
    </div>
</body>
   <script>
        var app=new vue({
            el:"#app",
            methods: {
                //用来获取具有ref属性的节点对象
                get:function(){
                    alert(this.$refs.ps.innerhtml);
                }
            },
        });
   </script>

但是在项目开发中,尽可能不要使用ref,因为从一定程度上,ref 违背的mvvm设计原则;