构造器
每个 Vue.js 应用都是通过构造函数 Vue
创建一个 Vue 的根实例 启动的:
var vm = new Vue({
// 选项
});
class与style
<div v-bind:class="{ active: isActive }">你好</div>
语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
js:
var app = new Vue({
el: '.static',
data: {
isActive: true,
hasError: false
}
});
可以直接绑定数据里的一个对象:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">123</div>
js:
var app = new Vue({
el: '.classObject',
data: {
classObject:{
active: true,
'text-danger': false
}
}
});
也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
<div v-bind:class="classObject"></div>
var app = new Vue({
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
});
数组可以把一个数组传给 v-bind:class
,以应用一个 class 列表:
<div v-bind:class="[activeClass, errorClass]">
js:
var app = new Vue({
el:'div',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
});
根据条件切换列表中的 class ,可以用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
js:
var app = new Vue({
el:'div',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
});
用在组件上
使用组件
注册
以通过以下方式创建一个 Vue 实例
js:
new Vue({
el: '#some-element',
// 选项
})
要注册一个全局组件,你可以使用 Vue.component(tagName, options)
。 例如:
js:
Vue.component('my-component', {
// 选项
})
对于自定义标签名,Vue.js 不强制要求遵循 W3C规则 (小写,并且包含一个短杠),尽管遵循这个规则比较好。
组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component>
的形式使用。要确保在初始化根实例 之前 注册了组件
<div id="example">
<my-component></my-component>
</div>
js:
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
渲染为:
<div id="example">
<div>A custom component!</div>
</div>
|
局部注册
不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:
js:
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
本文是在官方文档