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

模板语法

让我们回到最开始

    <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>

原文地址:http://blog.51cto.com/zouzhelu/2103740

时间: 2024-10-12 11:47:13

Vue2.0笔记——{{}}模板与自定义过滤器的相关文章

Vue2.0笔记——Vue实例

Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时,你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等.一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.举个例子,一个 todo 应用的组件树可以是这样的: 根实例Root └─ TodoList ├─ TodoIte

Vue2.0笔记——组件

组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 使用组件 组件的注册与使用 全局注册 我们需要通过一个全局的API来构造.Vue.extend(options)用法:使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象.同时还需要一个API通过这个构造器来注册组件,之后才能使用.Vue.component(id, [definition])用

Django之模板层-自定义过滤器以及标签

自定义标签与过滤器 在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 在app中创建templatetags模块(模块名只能是templatetags) 创建任意 .py 文件,如:my_tags.py from django import template # 该对象名必须是register register = template.Library() #自定义过滤器装饰器 @register.filter def mult

Django模板之自定义过滤器/标签/组件

自定义步骤: 1.     在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.     在app应用中创建templatetags模块包(模块名只能是templatetags) 3.     创建任意 .py 文件,如:my_tags.py ·   导入模块:from django import template ·   实例化注册器:register = template.Library()   #register的名

Vue2.0笔记——自定义指令

自定义指令 自定义指令主要用于,除系统提供外,自己对DOM的底层操作.例如当页面加载时需要将一个文本框为自动获得焦点.只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态. 我们通过全局自定义指令和局部自定义指令来讲解autofouce案例. 全局自定义指令 在全局API中通过Vue.directive( id, [definition] )来注册或获取全局指令.参数: id表示自定义的指令名称 definition为自定义指令的定义,一般可以含有几个生命周期钩子函数 bi

struts2学习笔记之十三:自定义过滤器

Struts2的拦截器 1.Struts2的拦截器只能拦截Action,拦截器是AOP的一种思路,可以使我们的系统架构 更松散(耦合度低),可以插拔,容易互换,代码不改变的情况下很容易满足客户需求 其实体现了OCP 2.如何实现拦截器?(整个拦截器体现了责任链模式,Filter也体现了责任链模式) * 继承AbstractInterceptor(体现了缺省适配器模式,建议使用该模式) * 实现Interceptor 3.如果自定了拦截器,缺省拦截器会失效,必须显示引用Struts2默认的拦截器

Vue2.0笔记——Vue常用实例属性,实例方法

实例属性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM <body> <div id="app"> <h4>你好,这是四级标题</h4> <p>这是一个段落,我什么都不想说</p> </div> <button onclick="getEl()"

Vue2.0笔记——组件2

组件组合 父子组件的通信 组件 A 在它的模板中使用了组件 B.它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件. 首先,需要在Vue实例里定义一个组件,设置data,然后在这个组件里再添加一个conponents选项,注意不要添错位置.示例: <div id="app"> <my-father></my-father> </div> //父组件的模板 <template id=&q

vue2.0中v-on绑定自定义事件的理解

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码: 1 <div id="counter-event-example"> 2 <p>{{ total }}</p>