Vue.js基本规则提炼总结及计算属性学习

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhu-xingyu/p/5297342.html

文章标签：

#javascript #ViewUI

本文详细介绍了Vue.js的基本使用方法，包括表达式输出、指令绑定、计算属性和观察器等核心概念，以及如何通过计算属性处理多表达式场景。同时，提供了实例演示如何实现动态姓名组合和响应式更新。

Vue.js基本须知:

1)以“{{}}”格式 “Mustache” 语法（双大括号）来绑定表达式输出文本值;

2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容,输出字符串解析后的html内容;

3)绑定表达式由一个简单的javascript表达式与一个或多个过滤器组成,格式如下:{{express|filterOne|filterTwo}}(过滤器可省略);

4)指令为"v-"格式的绑定表达式,其功能是当表达式的值改变时把某些特殊的行为应用到 DOM 上;

5)某些指令带有参数以" v-指令名:参数='绑定表达式' "的格式书写,其作用是将元素的属性以参数的形式与绑定表达式的值连接，表达式的值变了，相应的元素属性的值也就变了;

6)带参数的指定如"v-bind:参数"与"v-on:参数"可以分别简写为":参数"与"@:参数";

计算属性computed,当绑定中含有1个以上的表达式时,多余表达式要放在options的计算属性computed里进行处理，举例如下:

 <div id="box">
        {{a}}{{b,c}}
        <p>{{d}}</p>
    </div>

    <script>
       new Vue(
           {
            el:"#box",
            data:{     //绑定内只有一个表达式时,会在该绑定位置直接输出表达式内容
                a:"zhuxingyu",
                b:"loujiaxing",
                d:""
            },
            computed:{  //当绑定内含有1个以上的表达式时,多余表达式要放在options的计算属性computed里进行处理
                c:function(){
                  this.d=this.a+this.b;
                }
            }
           }
        );

　　$watcher用来指定监测的绑定表达式的值，其是computed也是实时更新的，能用computed的地方尽量用computed,因为它做得更简洁。例子如下：

  <div id="demo">{{fullName}}</div>
     <script>
        var vm = new Vue({
            el:"#demo",
            data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
          }
        })

        vm.$watch('firstName', function (val) {
          this.fullName = val + ' ' + this.lastName
        })

        vm.$watch('lastName', function (val) {
          this.fullName = this.firstName + ' ' + val
        });
        setTimeout(function(){vm.firstName="Hello"},3000); //指定受监测的firstName变化时，就会立即触发相应函数

　　计算setter用来实时更新设置绑定表达式的值，提供一个默认的参数为计算属性的值，举例如下：

<div id="demo">
    <p>{{firstName}}</p>
    <p>{{lastName}}</p>
    <p>{{fullName}}</p>
    </div>
    <script>
        var vm=new Vue(
              {
                el:"#demo",
                data:{
                    firstName:"Zhu",
                    lastName:"xing yu"
                },
                computed:{
                     fullName:{
                        //默认为get,
                        get:function(){
                        return this.firstName+" "+this.lastName;
                      },
                        //其实可以setter
                        set:function(newName){  //newName为fullName,实时更新
                          var names=newName.split(" ");
                          this.firstName=names[0]; //在set中设置绑定表达式的值获取规则，并且实时更新
                          this.lastName=names[names.length-1];
                     }

                  }
               }
              
            });
             vm.fullName="Lou jia xing";//当fullName变化时触发set函数

转载于:https://www.cnblogs.com/zhu-xingyu/p/5297342.html