首页 > Web开发 > 详细

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

时间:2016-03-20 11:45:24      阅读:210      评论:0      收藏:0      [点我收藏+]

   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;
                }
            }
           }
        );

  

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!