<h2 id="选项数据">选项/数据
<h3 id="data">data
类型:Array
详细:
props可以是数组或对象,用于接收来自父组件的数据。props可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测,自定义校验和设置默认值
// 简单语法
Vue.component('props-demo-simple',{
props: ['size','myMessage']
})
// 对象语法,提供校验
Vue.component('props-demo-advanced',{
props: {
// 检测类型
height: Number,// 检测类型 + 其他验证
age: {
type: Number,default: 0,required: true,validator: function (value) {
return value >= 0
}
}
}
})
类型:{[key:string]:any}
限制:只用于new创建的实例中
详细:创建实例时传递props。主要作用是方便测试
var Comp = Vue.extend({
props: ['msg'],template: '{{ msg }}
'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
propsData Option 全局扩展的数据传递
PropsData Option Demo
我们用propsData三步解决传值
1,在全局扩展里加入props进行接收。propsData:{a:1}
2、传值时用propsData进行传递。props:['a']
3、用插值的形式写人模板。{{a}}
var header_a = Vue.extend({
template:`{{message}}--{{a}}
`,data:function(){
return {
message: 'Hello,I am Header'
}
},props: ['a']
});
new header_a({propsData:{a:1}}).$mount('header');
类型:{[key:string]:Function | {get: Function,set:function}}
详细:计算属性将被混入到vue实例中。所有getter和setter的this上下文自动地绑定为vue实例
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖(比如非响应式属性)在改实例范畴之外,则计算属性是不会被更新的
var vm = new Vue({
data: { a: 1 },computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
Computed Option
Computed Option 计算选项
类型:{[key:string]:Function}
详细:
methods将混入到vue实例中,可以直接通过VM实例访问这些方法,或者在指令表达式中使用。方法中的this自动绑定为Vue实例
var vm = new Vue({
data: { a: 1 },methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
Methods Option
Methods Option 方法选项
类型:{[key:string]:string | Function | Object | Array }
详细:
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性
var vm = new Vue({
data: {
a: 1,b: 2,c: 3,d: 4,e: {
f: {
g: 5
}
}
},watch: {
a: function (val,oldVal) {
console.log('new: %s,old: %s',val,oldVal)
},// 方法名
b: 'someMethod',// 深度 watcher
c: {
handler: function (val,oldVal) { /* ... */ },deep: true
},// 该回调将会在侦听开始之后被立即调用
d: {
handler: function (val,immediate: true
},e: [
function handle1 (val,function handle2 (val,oldVal) { /* ... */ }
],// watch vm.e.f's value: {g: 5}
'e.f': function (val,oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2,old: 1
watch
Watch 选项 监控数据
今日温度:{{temperature}}°C
穿衣建议:{{this.suggestion}}
类型:string | HTMLElement
限制:只在new创建的实例中遵守
详细
提供一个页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器,也可以是一个HTMLElement实例
在实例挂载之后,元素可以用vm.$el访问
如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显示调用vm.$mount()手动开启编译