Vue笔记系列（二）全局API
Vue全局API
第一节：Vue.directive自定义指令
1.什么是全局API
全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。
2.Vue.directive自定义指令
自定义指令中传递的三个参数
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
3.自定义指令的生命周期
自定义指令有五个生命周期（也叫钩子函数），分别是
bind, 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted, 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。【插入完之后调用】
update, 被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。【常用】
componentUpdated, 被绑定元素所在模板完成一次更新周期时调用【完成时】
unbind 只调用一次，指令与元素解绑时调用【解绑时】
<div id="app">
<div v-jqy="color">{{num}}</div>
<p><button @click="add">add</button></p>
</div>
<p><button onclick="unbind()">解绑</button></p>
<script type="text/javascript">
function unbind(){
app.$destroy();
}
Vue.directive("jqy",{
bind:function(el,binding){//被绑定
console.log('1 - bind');
el.style="color:"+binding.value;
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('5 - unbind');
}
});
var app = new Vue({
el:"#app",
data:{
num:10,
color:"skyblue"
},
methods:{
add:function(){
this.num++;
}
}
})
</script>
第2节：Vue.extend构造器的延伸
- 1. 什么是Vue.extend
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
由于我们还没有学习Vue的自定义组件，所以我们先看跟组件无关的用途。
- 2. 自定义无参数标签
我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地址。我们希望在html中只需要写<author></author> ，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。
- 3. 挂载到普通标签上
new authorURL().$mount('author');
4.完整代码
<body>
<h1>Vue.extend拓展实例构造器</h1>
<hr>
<author></author>
<script type="text/javascript">
var authorURL = Vue.extend({
template:"<p><a :href='authorURL'>{{authorName}}</a></p>",
data:function(){
return{
authorName:"jqy",
authorURL:"http://www.cnblogs.com/yishichangan925/"
}
}
});
new authorURL().$mount('author');
</script>
</body>
第3节：Vue.set全局操作
- 1. 引用构造器外部数据：
- //在构造器外部声明数据
- var outData={
- count:1,
- goodName:'car'
- };
- var app=new Vue({
- el:'#app',
- //引用外部数据
- 10. data:outData
11. })
2. 在外部改变数据的三种方法：
(a)用Vue.set改变
function add(){
Vue.set(outData,'count',4);
}
(b)用Vue对象的方法添加
app.count++;
(c)直接操作外部数据
outData.count++;
3. 为什么要有Vue.set的存在?
由于Javascript的限制，Vue不能自动检测以下变动的数组。改变下标的时候vue不能再检测到
因此Vue.set存在的优点是：当下标改变的时候，如果使用
app.count++或者outData.count++ 都不能再检测到
而使用Vue.set则可以
第4节：Vue的生命周期（钩子函数）
<body>
<h1>构造器的声明周期</h1>
<hr>
<div id="app">
{{message}}
<p><button @click="jia">加分</button></p>
</div>
<button onclick="app.$destroy()">销毁</button>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:1
},
methods:{
jia:function(){
this.message ++;
}
},
beforeCreate:function(){
console.log('1-beforeCreate 初始化之后');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted被创建');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
activated:function(){
console.log('7-activated');
},
deactivated:function(){
console.log('8-deactivated');
},
beforeDestroy:function(){
console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){
console.log('10-destroyed 销毁之后')
}
})
</script>
</body>
第5节：Template 制作模版三种方法
1. 直接写在选项里的模板：直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。
这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键
javascript代码：
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:`
<h1 style="color:red">我是选项模板</h1>
`
})
2. 写在<Template>标签里的模板
这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。
<template id="demo2">
<h2 style="color:red">我是template标签模板</h2>
</template>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo2'
})
</script>
3. Script标签模板
这种写模板的方法，可以让模板文件从外部引入。
<script type="x-template" id="demo3">
<h2 style="color:red">我是script标签模板</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo3'
})
</script>
第6节：Component 初识组件
Vue component。其实组件就是制作自定义的标签，这些标签在HTML中是没有的。
1. 全局化注册组件
全局化就是在构造器的外部用Vue.component来注册
<div id="app">
<jqy></jqy>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('jqy',{
template:`<div style="color:red;">全局化注册的jqy标签</div>`
})
var app=new Vue({
el:'#app',
data:{
}
})
</script>
我们在javascript里注册了一个组件，在HTML中调用了他。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。
2. 局部注册组件
局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<div id="app">
<jjb></jjb>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"jjb":{
template:`<div style="color:red;">局部注册的jjb标签</div>`
}
}
})
</script>
从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。
3. 组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。
第7节：Component 组件props 属性设置
props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件<panda></panda>,这时我们想给他加个标签属性写成<panda here=’China’></panda> 意思就是熊猫来自中国，当然这里的China可以换成任何值。定义属性的选项是props
1. 定义属性并获取属性值
定义属性我们需要用props选项，加上数组形式的属性名称，例如：props:[‘here’]。在组件的模板里读出属性值只需要用插值的形式，例如{{ here }}.
<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>
3. 属性中带’-‘的处理方式
我们在写属性时经常会加入’-‘来进行分词，比如：<panda from-here=”China”></panda>，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。
Html文件：
<panda from-here="China"></panda>
Javascript文件：
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ fromHere }}.</div>`,
props:['fromHere']
}
}
})
4. 在构造器里向组件中传值
把构造器中data的值传递给组件，我们只要进行绑定就可以了。就是我们(一)里面写的v-bind:xxx.
Html文件
<panda
v-bind:here="message"></panda>
Javascript文件
var app=new Vue({
el:'#app',
data:{
message:'SiChuan'
},
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['here']
}
}
})
第8节：Component 父子组件关系
1. 构造器外部写局部注册组件
我们都把局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。
我们把组件编写的代码放到构造器外部或者说单独文件。
- a. 我们需要先声明一个对象,对象里就是组件的内容。
var js = {
template:`<div>Panda from China!</div>`
}
b. 声明好对象后在构造器里引用
components:{
"js":js
}
c.html里面引用
<js></js>
2. 父子组件的嵌套
我们先声明一个父组件，比如叫js，然后里边我们加入一个city组件，我们来看这样的代码如何写。
<div id="app">
<js></js>
</div>
<script type="text/javascript">
var city={
template:`<div>Sichuan of China</div>`
}
var js = {
template:`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components:{
"city":city
}
}
var app=new Vue({
el:'#app',
components:{
"js":js
}
})
</script>
第9节：Component 标签
<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。
- 我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.
var componentA={
template:`< div style= "color:pink">I'm componentA</div>`
}
var componentB={
template:`<div style= "color:#ccc">I'm componentB</div>`
}
var componentC={
template:`< div style= "color:skyblue">I'm componentC</div>`
}
- 2. 我们在构造器的components选项里加入这三个组件。
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
}
- 3. 我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件
<component v-bind:is="who"></component>
<div id="app">
<component v-bind:is="who"></component>
<button @click="changeComponent">changeComponent</button>
</div>
<script type="text/javascript">
var componentA={
template:`<div style="color:pink">I'm componentA</div>`
}
var componentB={
template:`<div style="color:#ccc">I'm componentB</div>`
}
var componentC={
template:`<div style="color:skyblue">I'm componentC</div>`
}
var app = new Vue({
el:"#app",
data:{
who:"componentA"
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
},
methods:{
changeComponent:function(){
if(this.who=="componentA"){
this.who="componentB";
}else if(this.who=="componentB"){
this.who="componentC"
}else{
this.who="componentA"
}
}
}
})
</script>
