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

发布时间:2019-05-20 06:00:10发布者:Mr.Zhang阅读(405)

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





本文转自博客园,原文地址:https://www.cnblogs.com/shineguang/p/10891235.html