Vue.js初次尝试，温故知新（五）
2017-03-19 本文已影响107人
葉糖糖
这一节重点是模板语法，有些内容前面我们已经接触到了，在本小节将会做一个小的复习，然后同时也会介绍一些简单的写法。那，让我们开始今天的学习之旅。
一、插值技巧
1、目前我们常用的插值方式是使用
{{}}表达式；
2、有时候页面初始化的一些参数，我们只希望
渲染一次的时候该怎么处理呢？Vue.js已经想到了，我们可以使用v-once指令
3、以上的技能点不够使用，正常的开发过程中偶尔还会追加html，这可怎么办？别急，v-html指令可以轻松帮你解决疑难杂症。
4、还有一位老朋友v-bind指定，还记得前面的例子么？可以使用该指令来绑定一些html属性值。
具体用法，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js模板语法练习</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>一次性插值</p>
<label v-once>{{a}}</label>
<p>永久性插值</p>
<label v-model>{{a}}</label>
<input type="text" v-model="a">
<p>插入html值</p>
<label v-html="SayHello"></label>
</div>
</body>
<script>
var data={
a:1,
SayHello:'<h2>你好啊，我是html内容</h2>',
imgSrc:'resource/002.jpg'}
var vm = new Vue({
el:'#app',
data:data
})
//监视a的值变化，如果发生变化，就执行该回调函数
vm.$watch('a',function(newVal,oldVal){
//展示改变后新值
alert("改变后的数值是："+newVal);
})
</script>
</html>
二、快速缩写
1.v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
2.v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
三、过滤器
过滤器是一个神奇的玩意，一般是用来处理文本的格式，比如常见的日期格式、货币格式等。那么在Vue中如何使用过滤器呢？这边涉及到一个管道的概念，大家可以想想日常生活中的管道（水管），管道是不是有两个口，一段是自来水工厂，一端是家里的水龙头，这样我们是不是不要自己净化水，也能喝到干净的自来水了?在Vue.js中使用
|表示管道的概念，是不是很熟悉，在C语言中也能看到这个符号。
语法是比较简单的，如下：第一个参数是帮定值的name，第二个参数是要使用的过滤器的name。当然内置的过滤器只能处理简单的需求，特殊的需求还是得自定义过滤器。
<label v-once>{{ msg | capitalize }}</label>
<p>永久性插值</p>
<label v-model>{{count | currency '￥' 2}}</label>
过滤器效果图
以上内置过滤器是基于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：今天就学习这么多知识，祝小伙伴们周末愉快！
