参考资料：技术胖的个人网站
什么是全局API
全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。
Vue.directive自定义指令
Vue.directive('jspang',function(el,binding,vnode){
el.style='color:'+binding.value;
});
- el: 指令所绑定的元素，可以用来直接操作DOM。
- binding: 一个对象，包含指令的很多信息。
- vnode: Vue编译生成的虚拟节点。
自定义指令的生命周期
自定义指令有五个生命周期（也叫钩子函数），分别是bind,inserted,update,componentUpdated,unbind
- bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
- inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
- update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
- unbind:只调用一次，指令与元素解绑时调用。
Vue.extend 扩展实例构造器
可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
Vue.set全局操作
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。
一，引用构造器外部数据：
什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。 看一个简单的代码：
//在构造器外部声明数据
var outData={
count:1,
goodName:'car'
};
var app=new Vue({
el:'#app',
//引用外部数据
data:outData
})
二、在外部改变数据的三种方法：
- 用Vue.set改变
function add(){
Vue.set(outData,'count',4);
}
- 用Vue对象的方法添加
app.count++;
- 直接操作外部数据
outData.count++;
三、为什么要有Vue.set的存在?
由于Javascript的限制，Vue不能自动检测以下变动的数组。
- 当你利用索引直接设置一个项时，vue不会为我们自动更新。
- 当你修改数组的长度时，vue不会为我们自动更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Vue.set 全局操作</title>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">{{aa}}</li>
</ul>
</div>
<button onclick="add()">外部添加</button>
<script type="text/javascript">
function add(){
console.log("我已经执行了");
app.arr[1]='ddd';
//Vue.set(app.arr,1,'ddd');
}
var outData={
arr:['aaa','bbb','ccc']
};
var app=new Vue({
el:'#app',
data:outData
})
</script>
</body>
</html>
这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。
Vue的生命周期（钩子函数）
- beforeCreate 初始化之前
- created 初始化之后
- beforeMount 挂载之前
- mounted 挂载之后
- beforeUpdate 更新之前
- updated 更新之后
- beforeDestroy 销毁前
- destroyed 销毁后
Component 初识组件
其实组件就是制作自定义的标签，这些标签在HTML中是没有的。
组件要先注册才能使用
一、全局化注册组件
全局化就是在构造器的外部用Vue.component来注册。
<div id="app">
<jspang></jspang>
</div>
//注册全局组件
Vue.component('jspang',{
template:`<div style="color:red;">全局化注册的jspang标签</div>`
})
var app=new Vue({
el:'#app',
data:{
}
})
二、局部注册组件局部
局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<div id="app">
<panda></panda>
</div>
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">局部注册的panda标签</div>`
}
}
})
局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。
三、组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。
Component 组件props 属性设置
props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件,这时我们想给他加个标签属性写成 意思就是熊猫来自中国，当然这里的China可以换成任何值。定义属性的选项是props。
一、定义属性并获取属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-2</title>
</head>
<body>
<h1>component-2</h1>
<hr>
<div id="app">
<panda here="China"></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['here']
}
}
})
</script>
</body>
</html>
上面的代码定义了panda的组件，并用props设置了here的属性值，在here属性值里传递了China给组件。 最后输出的结果是红色字体的Panda from China.
props是一个数组，不是对象，数组可以存很多个标签的属性。
二、属性中带’-‘的处理方式
我们在写属性时经常会加入’-‘来进行分词，比如：，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。
<panda from-here="China"></panda>
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['fromHere']
}
}
})
PS：因为这里有坑，所以还是少用-为好
三、在构造器里向组件中传值
<panda v-bind:here="message"></panda>
var app=new Vue({
el:'#app',
data:{
message:'SiChuan'
},
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['here']
}
}
})
Component 父子组件关系
在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。
都把局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。
我们把组件编写的代码放到构造器外部或者说单独文件。
总结：我定义了一个
header.vue组件，因为代码量太大了，不好放在构造器里边。但可以用imprort from把它引入进来。比如：import header from ./header.vue。然后我们可以继续在构造器里边的方法components{ v-header:header }注册这个组件。然后就可以使用<v-header>了。
Component 标签
标签是Vue框架自定义的标签，vue自带的。它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。 就是把组件当做一个个数据。
网友评论