1.文本
<span>Message:{{ msg }}</span>
双括号里的内容会由对象msg的属性值更新而更新。
<span v-once> Message:{{ msg }}</span>
v-once使用时,msg的值改变时,不会更新
2.纯HTML
<div v-html="rawHtml"></div>
插入的内容都会被当做HTML,自然不会数据绑定。
注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。
3.属性
<div v-bind:id="dynamicId"></div>
v-bind用于响应的更新HTML属性
4.js表达式 vue.js支持js表达式的支持。但是每个绑定只能包含单个表达式:
{{number + 1 }}
{{ OK ? 'Yes' : 'No' }}
//这是对的,但是下面的就是错了。
{{ if (oK) {return message} }}
指令都是带有v- 前缀的特殊属性。例如v-if
指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
1.参数 指令用冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
<a v-bind:href="url"> </a>
href 就是参数。v-bind指令就是讲href的属性和url的值绑定。 v-on用于监听dom事件
<a v-on:click="doSomething">
这里的参数是监听的事件名(doSomething),为什么我也还不知道,之后补充上来。
2.修饰符
修饰符就是用 . 指明的特殊后缀,用来指明这个指令用过以特殊的方式绑定。
例如:
<form v-on:submit.prevent="onSubmit"></form>
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()或者event.stopPropagation():
我们再来几个例子
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
3.过滤器 过滤器常用在{{}}和v-bind表达式。应该被添加在javascript表达式的尾部,由管道浮指示(|) 过滤器一般只用在文本转换。
{{ message | caitalize }}
{{ message | filterA | filterB }}//过滤器可以串联
{{ message | filterA('arg1', arg2) }}//过滤器是 JavaScript 函数,因此可以接受参数
//这里,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
//或者
<div v-bind:id="rawId | formatId" ></div>
过滤器函数总接受表达式的值作为第一个参数。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
4.缩写 v-bind缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on缩写:
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>