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设计原则；

上一篇：深入浅析分布式系统的一致性模型

下一篇：搭建前端监控系统（三）NodeJs服务器部署篇