vue2.0---模板语法

***插值

文本

数据绑定最常见的形式就是双大括号的形式:

{{message}}

只要绑定的属性message上的值发生变化,插值出的内容都会发生变化

var app = new Vue({
el:"#app",
data:{
message:'hello Ling!'
}
})

纯HTML

双大括号会将数据解释为纯文本,而不是HTML 。为了输出真正的 HTML ,就需要使用到 v-html 指令:


var vm = new Vue({
el:'#app-2',
data:{
rawHtml:'

这是一个P标签!

'
}
});

效果:

属性:

如果check的值是false,则disabled属性将不会被渲染。以v-开头的是Vue.js的指令,你马上就能看到如何使用它们。

***表达式

可以在指令及{{}}中使用表达式,事实上,常量或变量的名称就是最简单的表达式。Vue可以通过是否带引号来判断一个表达式是一个变量还是一个常量字符串。所以在以后的内容里,指令及{{}}中的内容会被成为表达式

{{message}}
{{number + 1}}
{{ok ? 'yes' : 'no'}}
{{ message.split('').reverse().join('') }}

这些表达式都被支持,但是{{}}和指令中只支持一个表达式,不支持语句。

***过滤器

{{message | capitalize}}======》Vue.js的内置过滤器,作用是似的message中的值首字母大写。
另外,你也可以自定义过滤器:
new Vue({
//......
filters:{
ling:function(value){
return 'ling is a pretty girl!I want to say:' + value
}
}
})
过滤器可以串联,也可以接受参数。在接受参数时,第一个参数默认是前面返回的字符串,第二个参数开始是用户传递的参数,注意如果参数是字符串要加引号。如:

***指令

指令(Directives)是带有 v- 前缀的特殊属性。
1:循环v-for:




  1. {{todo.text}}



posted @ 2016-12-28 14:33  L迷鹿L  阅读(1252)  评论(0)    收藏  举报