文章目录
Vue.directive
Vue.directive("changecolor",function(el,binding){
//Vue需要大写,自定义指令不能有大写字母,自定义指令此处写法需要去掉v-前缀
console.log(el);//el是传入的div对象
console.log(binding);//binding是一个属性
// 比如这个实例中
// name: "changecolor"
// rawName: "v-changecolor"
// value: "red"
// expression: "color"
// modifiers: {}
// def: {bind: ƒ, update: ƒ}
// __proto__: Object
console.log(binding.value);
el.style ="color:"+binding.value;
});
binding对象
binding是一个对象，包含以下属性：
(1)name：指令名，不包括 v- 前缀。
(2)value：指令的绑定值，例如：v-my-directive=”1 + 1”, value 的值是 2。
(3)oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
(4)expression：绑定值的字符串形式。例如 v-my-directive=”1 + 1” ，expression 的值是 “1 + 1”。
(5)arg：传给指令的参数。例如 v-my-directive:foo，arg 的值是 “foo”。
(6)modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
自定义指令的生命周期函数
Vue.directive("changecolor",{
bind:function(){
console.log('a-bind');
console.log('a-num:'+this.num);
},
inserted:function(){
console.log('b-inserted');
console.log('b-num:'+this.num);
},
updated:function(){
console.log('c-updated');
console.log('c-num:'+this.num);
},
componentUpdated:function(){
console.log('d-componentUpdated');
console.log('d-num:'+this.num);
},
unbind:function(){
console.log('e-unbind');
console.log('e-num:'+this.num);
}
})
包含Vue生命周期钩子函数的实例测试图
Vue.extend构造器的延伸
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。
经常服务于Vue.component用来生成组件，
可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，
会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.extend 构造器的延伸</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.extend 构造器的延伸</h1>
<!--构造器的延伸:
组件也是类似的写法
所以一般建议以id形式写
-->
<blog></blog>
<div id="blog"></div>
<hr>
<script type="text/javascript">
var blogURL = Vue.extend({
template:"<p><a :href='blogURL'>{
{blogName}}</a></p>",//注意href前面还有个冒号 v-bind 指令被用来响应地更新 HTML 属性
data:function(){
return{
blogName:'Kacey的博客',
blogURL:"https://blog.csdn.net/DUT_Walnut"
};
}
});
//创建 blogURL 实例，并挂载到一个元素上。
new blogURL().$mount("blog");//对应组件式写法
new blogURL().$mount("#blog");//对应id式写法
</script>
</body>
</html>
Vue.set
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。
比如在vue构造器内部定义了一个count为1的数据，
我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。
Vue.set存在意义
当你利用索引直接设置一个项时，vue不会为我们自动更新。
当你修改数组的长度时，vue不会为我们自动更新
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.set 全局操作</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<div id="test">
<p>{
{count}}</p>
<br>
<p>Vue.set用于数组</p>
<br>
<ul>
最低0.47元/天 解锁文章
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
