Vue.js 官方文档摘记:模板语法

模板语法

Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应式系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

插值

文本

前面的介绍中见过:

<!--直接使用双花括号,其中的anyName都会被模板进行替换-->
<div id='example1'>{{anyName}}</div>
var example1=new Vue({
    el:"#example1",
    data:{
        anyName:'这里是替换anyName的内容'
    }
});

上面中的example1.anyName会与div中的文本进行绑定,如果不想绑定,只想渲染一次,可以使用v-once指令。

纯HTML

上面是直接使用模板替换了文本,但是如果想让模板支持使用HTML进行输出,可以采用v-html命令:

<div id='example2' v-html='anyName'>{{anyName}}</div>
var example2=new Vue({
    el:"#example2",
    data:"<span>这里就是上面{{anyName}}被替换后的内容</span>"
});

属性

前面的介绍中也展示过一个例子,这里再贴一下:

<div v-bind:id='example3'></div>
var example3=new Vue({
    el:"div",
    data:{example3:'example3'}
});

其中也可以设置bool值:

<div v-bind:disabled='example4'></div>
var example4=new Vue({
    el:"div",
    data:{example4:true}
});

使用javaScript表达式

上面的文本插入中,我们是直接输出文本,其实Vue支持简单的javaScript表达式,如以下形式:

{{number+1}}
{{ok?'Yes':'No'}}
{{message.split('').join('')}}
<div id="'Prev'+anyName"></div>

上面那些简单的表达式都是可行的,但是下面这些就不行了:

{{var a=1}}
{{ if(true) {return true;} }}

模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如MathDate。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单一javascript表达式。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。
<p v-if:exists>根据exists的值来选择是否将该元素插入文档中</p>

参数

如果要往指令中加入参数的话,可以在指令后面加上:,表示接下来传入的是该指令的参数。

<a v-bind:href='anyName'></a>

这里的href就是参数,告知将anyName表达式与a href参数进行绑定。

或者是下面的例子:

<a v-on:click='functionName'></a>

修饰符

修饰符(Modifiers)是以半角句号:.指明的特殊后缀,用于指出一个指令应该以特殊的方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件使用event.preventDefault()

这里只是做一个介绍,每个命令的修饰符后面讲到具体命令时再说。

过滤器

{{Parameter|FunctionName}}
new Vue({
    filters:{
        FunctionName:funciton(anyName){
            //这里的名字不需要跟上面的参数名:Parameter一样,value默认是Parameter
        }
    }
});

可以串联多个过滤器:

{{Parameter|FunctionName1|FunctionName2|FunctionName3}}

当要想过滤器函数中加入多个参数时,可以使用下面的形式:

{{Parameter|Function(SecondParameter,ThirdParameter)}}

上面例子中的Parameter还是会默认作为第一个参数传递进Funciton中,而剩下的额外添加的参数则是第二、第三个参数。

不止可以针对文本输出使用过滤器,也可以针对v-bind使用过滤器。

<div v-bind:id="Parameter|FunctionName"></div>

缩写

v-bind 缩写 :

<!--完全形式-->
<a v-bind:href='anyName'></a>
<!--缩写形式-->
<a :href='anyName'></a>

v-on 缩写 @

<!--完全形式-->
<a v-on:click='FunctionName'></a>
<!--缩写形式-->
<a @click='FunctionName'></a>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值