Vue选项/资源
Vue选项/资源
- directives
- filters
- components
directives
- 类型:
Object
- 详细:包含 Vue 实例可用指令的哈希表。
示例:
<div id="app">
<span v-hello="color3">{
{message}}</span>
<button @click="add"> 点击开始加1</button>
</div>
Vue.directive("hello",function(el,binding,vnode){
el.style["color"]= binding.value;
})
var app = new Vue({
el:"#app",
data:{
message:10,
color3:"red"
},
methods:{
add:function(){
this.message++;
}
}
})
filters
- 类型:
Object
- 详细:包含 Vue 实例可用过滤器的哈希表。
示例:
<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
components
- 类型:
Object
- 详细:包含 Vue 实例可用组件的哈希表。
示例:
let child1 = Vue.extend({
template: ` <p>子组件child1</p> `
});
let child2 = Vue.extend({
template: ` <p>子组件child2</p> `
});
Vue.component('like', {
components: {
'child-com1': child1,
'child-com2': child2
},
template: ` <div> <child-com1></child-com1> <child-com2></child-com2> </div> `
});
还没有评论,来说两句吧...