Vue.js初次尝试，温故知新（五）

这一节重点是模板语法，有些内容前面我们已经接触到了，在本小节将会做一个小的复习，然后同时也会介绍一些简单的写法。那，让我们开始今天的学习之旅。

一、插值技巧

1、目前我们常用的插值方式是使用{{}}表达式；
2、有时候页面初始化的一些参数，我们只希望
渲染一次的时候该怎么处理呢？Vue.js已经想到了，我们可以使用v-once指令
3、以上的技能点不够使用，正常的开发过程中偶尔还会追加html，这可怎么办？别急，v-html指令可以轻松帮你解决疑难杂症。
4、还有一位老朋友v-bind指定，还记得前面的例子么？可以使用该指令来绑定一些html属性值。

具体用法，如下：

    
    
    


 

     
一次性插值
     {{a}}
     
永久性插值
     {{a}}
     
     
插入html值
     
     ![](imgSrc)
 

二、快速缩写

1.v-bind缩写

2.v-on缩写

三、过滤器

过滤器是一个神奇的玩意，一般是用来处理文本的格式，比如常见的日期格式、货币格式等。那么在Vue中如何使用过滤器呢？这边涉及到一个管道的概念，大家可以想想日常生活中的管道（水管），管道是不是有两个口，一段是自来水工厂，一端是家里的水龙头，这样我们是不是不要自己净化水，也能喝到干净的自来水了?在Vue.js中使用|表示管道的概念，是不是很熟悉，在C语言中也能看到这个符号。

语法是比较简单的，如下：第一个参数是帮定值的name，第二个参数是要使用的过滤器的name。当然内置的过滤器只能处理简单的需求，特殊的需求还是得自定义过滤器。

     {{ msg | capitalize }}
     
永久性插值
     {{count | currency '￥' 2}}

过滤器效果图

以上内置过滤器是基于1.X版本上使用的，2.X的貌似无效，所以可以使用自定义过滤器的方法。

//告诉Vue.js，我们要使用过滤器了
filters: {
    //将字符串首字母转换为大写
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }

PS：今天就学习这么多知识，祝小伙伴们周末愉快！