vue全局API

时间 2021-08-13

标签 javascript html vue java node jquery 数组 app 框架 jsp 栏目 JavaScript 繁體版

原文原文链接

1、Vue.directive 自定义指令

1、什么是全局API？javascript

全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，好比要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给API函数来定义新的功能。html

2、Vue.directive自定义指令vue

已经了解内部指令，也能够定义一些属于本身的指令，好比要定义一个v-hedong的指令，做用就是让文字变成绿色。java

在自定义指令前写一个小功能，在页面上有一个数字为10，数字的下面有一个按钮,每点击一次按钮后，数字加1。node

写好了这个功能，如今就本身定义一个全局的指令。这里使用Vue.directive( );jquery

1数组

2app

3框架

Vue.directive('hedong',function(el,binding,vnode){jsp

el.style='color:'+binding.value;

});

3、自定义指令中传递的三个参数

el: 指令所绑定的元素，能够用来直接操做DOM。

binding: 一个对象，包含指令的不少信息。

vnode: Vue编译生成的虚拟节点。

4、自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind

1. bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数能够定义一个绑定时执行一次的初始化动做。

2. inserted:被绑定元素插入父节点时调用（父节点存在便可调用，没必要存在于document中）。

3. update:被绑定于元素所在的模板更新时调用，而不管绑定值是否变化。经过比较更新先后的绑定值，能够忽略没必要要的模板更新。

4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

5. unbind:只调用一次，指令与元素解绑时调用。

bind:function(){//被绑定

console.log('1 - bind');

inserted:function(){//绑定到节点

console.log('2 - inserted');

update:function(){//组件更新

console.log('3 - update');

componentUpdated:function(){//组件更新完成

console.log('4 - componentUpdated');

unbind:function(){//解绑

console.log('1 - bind');

}

2、Vue.extend构造器的延伸

1、什么是Vue.extend？

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。常常服务于Vue.component用来生成组件，能够简单理解为当在模板中遇到该组件名称做为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

3、自定义无参数标签

4、想象一个需求，需求是这样的，要在博客页面多处显示做者的网名，并在网名上直接有连接地址。但愿在html中只须要写<author></author> ，这和自定义组件很像，可是没有传递任何参数，只是个静态标签。

Vue.extend该登场了，先用它来编写一个扩展实例构造器。代码以下：

var authorExtend = Vue.extend({

template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",

data:function(){

return{

authorName:'JSliu',

authorUrl:'http://www.jspang.com'

}

});

这时html中的标签仍是不起做用的，由于扩展实例构造器是须要挂载的，再进行一次挂载。

1	new authorExtend().$mount('author');

这时在html写<author><author>就是管用的。来看一下所有代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>vue.extend-扩展实例构造器</title>

</head>

<body>

<h1>vue.extend-扩展实例构造器</h1>

<hr>

<author></author>

var authorExtend = Vue.extend({

template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",

data:function(){

return{

authorName:'JSliu',

authorUrl:'http://www.liuhedong.online'

}

});

new authorExtend().$mount('author');

</script>

</body>

</html>

3、挂载到普通标签上

还能够经过HTML标签上的id或者class来生成扩展实例构造器，Vue.extend里的代码是同样的，只是在挂载的时候，用相似jquery的选择器的方法，来进行挂载就能够了。

1	new authorExtend().$mount('#author');

3、Vue.set全局操做

Vue.set 的做用就是在构造器外部操做构造器内部的数据、属性或者方法。好比在vue构造器内部定义了一个count为1的数据，在构造器外部定义了一个方法，要每次点击按钮给值加1.就须要用到Vue.set。

1、引用构造器外部数据：

什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，而后在data处引用就能够了。外部数据的加入让程序更加灵活，能够在外部获取任何想要的数据形式，而后让data引用。

看一个简单的代码：

//在构造器外部声明数据

var outData={

count:1,

goodName:'car'

};

var app=new Vue({

el:'#app',

//引用外部数据

data:outData

})

2、在外部改变数据的三种方法：

一、用Vue.set改变

function add(){

Vue.set(outData,'count',4);

}

二、用Vue对象的方法添加

1	app.count++;

三、直接操做外部数据

1	outData.count++;

其实这三种方式均可以操做外部的数据，Vue增长了一种操做外部数据的方法。

3、为何要有Vue.set的存在?

因为Javascript的限制，Vue不能自动检测如下变更的数组。

*当利用索引直接设置一个项时，vue不会自动更新。

*当修改数组的长度时，vue不会自动更新。

看一段代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<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>

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存在的意义。

5、Vue的生命周期（钩子函数）

Vue一共有10个生命周期函数，能够利用这些函数在vue的每一个阶段都进行操做数据或者改变内容。

其实在Vue的官网有一张图已经很好的诠释了生命周期。

直接来看一段代码：

<!DOCTYPE html>

<head>

<title>构造器的声明周期</title>

</head>

<body>

<h1>构造器的声明周期</h1>

<hr>

</div>

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>

</html>

5、Template 制做模版

1、直接写在选项里的模板

直接在构造器里的template选项后边编写。这种写法比较直观，可是若是模板html代码太多，不建议这么写。

javascript代码：

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

template:`<h1 style="color:red">我是选项模板</h1>`

})

这里须要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键。

2、写在<template>标签里的模板

这种写法更像是在写HTML代码，就算不会写Vue的人，也能够制做页面

<template id="demo2">

<h2 style="color:red">我是template标签模板</h2>

</template>

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

template:'#demo2'

})

</script>

3、写在<script>标签里的模板

这种写模板的方法，可让模板文件从外部引入。

<h2 style="color:red">我是script标签模板</h2>

</script>

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

template:'#demo3'

})

</script>

6、Component 初识组件

1、全局化注册组件

全局化就是在构造器的外部用Vue.component来注册，注册如今就注册<liu></liu>的组件来体验一下。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>component-1</title>

</head>

<body>

<h1>component-1</h1>

<hr>

<div id="app">

<liu></liu>

</div>

//注册全局组件

Vue.component('liu',{

template:`<div style="color:red;">全局化注册的liu标签</div>`

})

var app=new Vue({

el:'#app',

data:{

}

})

</script>

</body>

</html>

在javascript里注册了一个组件，在HTML中调用了他。这就是最简单的一个组件的编写方法，而且它能够放到多个构造器的做用域里。

2、局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的做用域里进行使用，其余做用域使用无效。

<!DOCTYPE html>

<head>

<title>component-1</title>

</head>

<body>

<h1>component-1</h1>

<hr>

</div>

var app=new Vue({

el:'#app',

components:{

"panda":{

template:`<div style="color:red;">局部注册的panda标签</div>`

}

})

</script>

</body>

</html>

从代码中能够看出局部注册其实就是写在构造器里，可是须要注意的是，构造器里的components 是加s的，而全局注册是不加s的。

3、组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中仍是用组件比较多，指令用的比较少。由于指令看起来封装的没那么好，这只是我的见解

7、Component 组件props 属性设置

props选项就是设置和获取标签上的属性值的，例若有一个自定义的组件<panda></panda>,这时想给他加个标签属性写成<panda here='China'></panda> 意思就是熊猫来自中国，固然这里的China能够换成任何值。定义属性的选项是props。

1、定义属性并获取属性值

定义属性须要用props选项，加上数组形式的属性名称，例如：props:['here']。在组件的模板里读出属性值只须要用插值的形式，例如{{ here }}.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>component-2</title>

</head>

<body>

<h1>component-2</h1>

<hr>

<div id="app">

<panda here="China"></panda>

</div>

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.

2、属性中带'-'的处理方式

咱们在写属性时常常会加入'-'来进行分词，好比：<panda from-here="China"></panda>，那这时在props里若是写成props:['form-here']是错误的，咱们必须用小驼峰式写法props:['formHere']。

html文件：

1	<panda from-here="China"></panda>

javascript文件：

var app=new Vue({

el:'#app',

components:{

"panda":{

template:`<div style="color:red;">Panda from {{ here }}.</div>`,

props:['fromHere']

}

})

3、在构造器里向组件中传值

把构造器中data的值传递给组件，只要进行绑定就能够了。就是第一季学的v-bind:xxx.直接看代码:

Html文件：

1	<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、构造器外部写局部注册组件

上面上课都把局部组件的编写放到了构造器内部，若是组件代码量很大，会影响构造器的可读性，形成拖拉和错误。

把组件编写的代码放到构造器外部或者说单独文件。

须要先声明一个对象,对象里就是组件的内容。

var js = {

template:`<div>Panda from China!</div>`

}

声明好对象后在构造器里引用就能够了。

components:{

"js":js

}

html中引用

1	<js></js>

2、父子组件的嵌套

先声明一个父组件，好比叫js，而后里边加入一个city组件，来看这样的代码如何写。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>component-3</title>

</head>

<body>

<h1>component-3</h1>

<hr>

<div id="app">

<js></js>

</div>

var city={

template:`<div>Sichuan of China</div>`

}

var js = {

template:`<div>

<p> Panda from China!</p>

</div>`,

components:{

"city":city

}

var app=new Vue({

el:'#app',

components:{

"js":js

}

})

</script>

</body>

</html>

9、Component 标签

<component></component>标签是Vue框架自定义的标签，它的用途就是能够动态绑定组件，根据数据的不一样更换不一样的组件。

1.先在构造器外部定义三个不一样的组件，分别是componentA,componentB和componentC.

var componentA={

template:`<div>I'm componentA</div>`

}

var componentB={

template:`<div>I'm componentB</div>`

}

var componentC={

template:`<div>I'm componentC</div>`

}

2.在构造器的components选项里加入这三个组件。

components:{

"componentA":componentA,

"componentB":componentB,

"componentC":componentC,

}

3.在html里插入component标签，并绑定who数据，根据who的值不一样，调用不一样的组件。

1	<component v-bind:is="who"></component>

这就是咱们的组件标签的基本用法。咱们提升如下，给页面加个按钮，每点如下更换一个组件。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>component-4</title>

</head>

<body>

<h1>component-4</h1>

<hr>

<div id="app">

<component v-bind:is="who"></component>

<button @click="changeComponent">changeComponent</button>

</div>

var componentA={

template:`<div style="color:red;">I'm componentA</div>`

}

var componentB={

template:`<div style="color:green;">I'm componentB</div>`

}

var componentC={

template:`<div style="color:pink;">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>

</body>

</html>