Vue.js 是一套构建用户界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
文本(Mustache语法)
<span>Message: { { msg } }</span>
HTML
<div v-html="rawHtml"></div>
属性 Mustache 不能在 HTML 属性中使用,应使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
JavaScript表达式
<div v-bind:id="'list-' + id"></div>
指令(Directives)是带有 v- 前缀的特殊属性
过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用
v-bind
<a v-bind:href="url"></a> <a :href="url"></a>
v-on
<a v-on:click="doSomething"></a> <a @click="doSomething"></a>
scoped 属性会自动添加一个唯一的属性(比如 data-v-21e5b78)为组件内 CSS 指定作用域,编译的时候
.list-container:hover
会被编译成类似.list-container[data-v-21e5b78]:hover
<style scoped></style>
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。