Vue2.0笔记——{{}}模板与自定义过滤器

Posted 2020-10-31

模板语法

让我们回到最开始

    <div id="app">
        <h1>{{message}}</h1>
    </div>
<script>
    var vm = new Vue({
        el:‘#app‘,
        data:{
            message:‘HelloWorld‘
        }
    })
</script>

这是一个HelloWorld，简单的通过模板输出。我们称之为数据绑定，而最常见的就是“Mustache”语法 (双大括号) 。
v-once指令，前面介绍过，一次性绑定，数据改变时，绑定的值是不会改变的。

<span v-once>这个将不会改变{{message}</span>

原始html

使用{{}}语法，输出时普通文本，而如果要输出带有HTML的，则要使用v-html指令

data:{
    message:‘HelloWorld‘,
    htmlText:‘<h2>这是一个标题,h2的标题</h2>‘
}

{{htmlText}}<br/>
<span v-html="htmlText"></span>

这个 span 的内容将会被替换成为属性值 htmlText

不编译模板

v-pre指令，可以跳过该元素和它子元素的编译过程，来显示原始的Mustache标签

<span v-pre>{{message}}</span>

输出的结果是{{message}}，不对其进行编译。

延缓显示

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

 <div v-cloak>
    {{message}}
</div>

<style>
    [v-cloak]{
        display:none;
    }
</style>

当DOM运行到此处时，该模板还未编译，所以将其隐藏，等实例准备完毕后，显示。

自定义过滤器

在Vue2.0中已经除去了1.0的过滤器，但是可以自定义。分为局部的和全局的。
过滤器可以用在两个地方，双花括号插值和v-bind表达式。
语法为:

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

“|”符号 左侧为需要过滤的数据，右侧为过滤器名称。
另外注意,使用过滤器后，需要返回值，才能正常显示。

局部过滤器定义

局部过滤器定义在实例中的filters选项中。
示例:过滤数字，四舍五入。

filters:{    //局部过滤器，仅当前Vue实例可用
    number:(data,n) => {
        return data.toFixed(n);  //四舍五入,参数为保留的位数
    }
}

{{12.356 | number(2)}}

过滤器方法声明，第一个参数始终未为传递来的数据，后面的参数一次为方法传递的参数。

全局过滤器

语法：Vue.filter( id, [definition] )

// 注册
Vue.filter(‘my-filter‘, function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter(‘my-filter‘)

示例:

Vue.filter(‘formatDate‘,function(val){
        var d = new Date(val);
        return d.getFullYear() + ‘-‘ + (d.getMonth()+1) + ‘-‘ + d.getDate() + ‘ ‘ + d.getHours() + ‘:‘ + d.getMinutes();
    });

<h3>时间:<span>{{currentDate | formatDate}}</span></h3>