Vue基础（二）--模板和过滤器

2019-10-29 本文已影响0人程序员大佬超

模板

1.简介

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法(双大括号)。

2. 数据绑定的方式

a.双向绑定
双向绑定可以使用 v-model ，这里常用在输入框等地方。

b.单向绑定
方式1：使用双大括号即可，但是可能会出现闪烁的问题，可以使用 v-cloak 来解决。

用法：
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            /* 必须配置css样式，否则不生效 */
            [v-cloak]{
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="mui-content" id="content">
            <h3>解决双大括号闪烁的问题:
            <span v-cloak>{{msg}}</span>
            </h3>
        </div>
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            var vm=new Vue({
                el:"#content",
                data:{
                    msg:"利用v-cloak指令，需配置css样式"
                },
                created:function(){
                    //这个是vue生命周期里开始创建的方法
                    alert("延时一下，看闪烁效果");
                }
            })
        </script>
    </body>

</html>

方式2：使用v-text,v-html

3. 其他指令

v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

过滤器

1. 简介

用来过滤模型数据，在显示之前进行数据处理和筛选。
语法：{{data | filter1(参数) | filter2(参数)}}

2.自定义过滤器

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div class="mui-content" id="content">
            <h3>{{8 | addZero}}</h3>
            
            <h3>{{66.8935462 | formatNumber(5,'这是四舍五入')}}</h3>
            
            <h3>{{currentTime | formatTime}}</h3>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init();
            // 自定义全局过滤器
            Vue.filter('addZero',function(data){
                console.log(data);
                return data<10?'0'+data:data;
            })
            Vue.filter('formatNumber',function(data,n,msg){
                console.log(data,n,msg);
                return msg+data.toFixed(n);//toFixed方法有bug,不准，建议自己写
            })
            var vm=new Vue({
                el:"#content",
                data:{
                    currentTime:Date.now()
                },
                filters:{
                    //局部过滤器
                    formatTime:function(data){
                        console.log(data);
                        var d=new Date(data);
                        return d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
                    }
                }
            })
        </script>
    </body>

</html>

原创不易，转载请注明出处。