vue.js-模版
2016-12-13 22:27:17 0 举报AI智能生成
vue.js
作者其他创作
大纲/内容
文本
Mustache语法双大括号
<span>Message:{{ msg }}</span
绑定的数据对象上msg属性改变，插值处内容也会随之改变
<span v-once>This will never change:{{ msg }}</span>
一次性插入，不会随属性改变而改变
纯HTML
<div v-html="rawHtml"></div>
属性
Mustache语法不可以在HTML属性中使用，应实用v-bind指令
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="someDynamicCondition">Button</button>
v-bind指令被用来将HTML属性和表达式绑定达到响应的更新HTML属性目的。
使用JavaScript表达式
仅可以是单个表达式，不可以是语句或者流程
{{ number + 1 }}
{{message.split('').reverse().join('') }}
<div v-bind:id="'list-'+id"></div>
{{ ok ? 'YSE' : 'NO' }}
指令
带有V-前缀的特殊属性
职责就是当其表达式的值改变时相应地将某些行为应用到DOM上
<p v-if="seen">Now you see me</p>
v-if是指令
参数
<a v-bind:href="url"></a>
href是参数
<a v-on:click="doSomething">
click是参数
v-on指令用于监听DOM事件
修饰符
用于指出一个指定应用以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>
.prevent是修饰符
缩写
v-bind
<a v-bind:href="url"></a>
<a :href="url"></a>
v-on
<a v-on:click="doSomething"></a>
<a @click="doSomething></a>
过滤器
过滤器的两种定义办法
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>
过滤器的目的是为了文本转换
过滤器默认接受表达式的值为第一个参数
{{ message | filterA | filterB }}
过滤器可以串联
{{ message | filterA('arg1',arg2) }}
message表达式值为第一参数，arg1第二，arg2第三
0 条评论
下一页
