网站建设所需的基本内容,桂林新闻桂林人论坛,昆明网站开发正规培训,wordpress w3一、什么是全局API#xff1f; 全局API并不在构造器里#xff0c;而是先声明全局变量或者直接在Vue上定义一些新功能#xff0c;Vue内置了一些全局API#xff0c;比如我们今天要学习的指令Vue.directive。说的简单些就是#xff0c;在构造器外部用Vue提供给我们的API函数来…一、什么是全局API 全局API并不在构造器里而是先声明全局变量或者直接在Vue上定义一些新功能Vue内置了一些全局API比如我们今天要学习的指令Vue.directive。说的简单些就是在构造器外部用Vue提供给我们的API函数来定义新的功能。 二、Vue.directive自定义指令 我们在第一季就学习了内部指令我们也可以定义一些属于自己的指令比如我们要定义一个v-jspang的指令作用就是让文字变成绿色。 在自定义指令前我们写一个小功能在页面上有一个数字为10数字的下面有一个按钮我们每点击一次按钮后数字加1. 你不妨模仿下面的功能在自己本地先写出这个效果。我用JSRun提供了预览和代码展示功能你也可以在线调试。 写好了这个功能我们现在就自己定义一个全局的指令。我们这里使用Vue.directive( ); 1 2 3 Vue.directive(jspang,function(el,binding,vnode){ el.stylecolor:binding.value; }); 可以看到数字已经变成了绿色说明自定义指令起到了作用。可能您看这个代码还是有些不明白的比如传入的三个参数到底是什么。 三、自定义指令中传递的三个参数 el: 指令所绑定的元素可以用来直接操作DOM。 binding: 一个对象包含指令的很多信息。 vnode: Vue编译生成的虚拟节点。 四、自定义指令的生命周期 自定义指令有五个生命周期也叫钩子函数分别是 bind,inserted,update,componentUpdated,unbind bind:只调用一次指令第一次绑定到元素时调用用这个钩子函数可以定义一个绑定时执行一次的初始化动作。inserted:被绑定元素插入父节点时调用父节点存在即可调用不必存在于document中。update:被绑定于元素所在的模板更新时调用而无论绑定值是否变化。通过比较更新前后的绑定值可以忽略不必要的模板更新。componentUpdated:被绑定元素所在模板完成一次更新周期时调用。unbind:只调用一次指令与元素解绑时调用。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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构造器的延伸 一、什么是Vue.extend Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时会自动调用“扩展实例构造器”来生产组件实例并挂载到自定义元素上。 由于我们还没有学习Vue的自定义组件所以我们先看跟组件无关的用途。 二、自定义无参数标签 我们想象一个需求需求是这样的要在博客页面多处显示作者的网名并在网名上直接有链接地址。我们希望在html中只需要写author/author 这和自定义组件很像但是他没有传递任何参数只是个静态标签。 我们的Vue.extend该登场了我们先用它来编写一个扩展实例构造器。代码如下 1 2 3 4 5 6 7 8 9 var authorExtend Vue.extend({ template:pa :hrefauthorUrl{{authorName}}/a/p, data:function(){ return{ authorName:JSPang, authorUrl:http://www.jspang.com } } }); 这时html中的标签还是不起作用的因为扩展实例构造器是需要挂载的我们再进行一次挂载。 1 new authorExtend().$mount(author); 这时我们在html写authorauthor就是管用的。我们来看一下全部代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script titlevue.extend-扩展实例构造器/title /head body h1vue.extend-扩展实例构造器/h1 hr author/author script typetext/javascript var authorExtend Vue.extend({ template:pa :hrefauthorUrl{{authorName}}/a/p, data:function(){ return{ authorName:JSPang, authorUrl:http://www.jspang.com } } }); new authorExtend().$mount(author); /script /body /html 最终实现结果三、挂载到普通标签上 还可以通过HTML标签上的id或者class来生成扩展实例构造器Vue.extend里的代码是一样的只是在挂载的时候我们用类似jquery的选择器的方法来进行挂载就可以了。 1 new authorExtend().$mount(#author); 第3节Vue.set全局操作 Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据我们在构造器外部定义了一个方法要每次点击按钮给值加1.就需要用到Vue.set。 一、引用构造器外部数据 什么是外部数据就是不在Vue构造器里里的data处声明而是在构造器外部声明然后在data处引用就可以了。外部数据的加入让程序更加灵活我们可以在外部获取任何想要的数据形式然后让data引用。 看一个简单的代码 1 2 3 4 5 6 7 8 9 10 //在构造器外部声明数据 var outData{ count:1, goodName:car }; var appnew Vue({ el:#app, //引用外部数据 data:outData }) 二、在外部改变数据的三种方法 1、用Vue.set改变 1 2 3 function add(){ Vue.set(outData,count,4); } 2、用Vue对象的方法添加 1 app.count; 3、直接操作外部数据 1 outData.count; 其实这三种方式都可以操作外部的数据Vue也给我们增加了一种操作外部数据的方法。 三、为什么要有Vue.set的存在? 由于Javascript的限制Vue不能自动检测以下变动的数组。 *当你利用索引直接设置一个项时vue不会为我们自动更新。 *当你修改数组的长度时vue不会为我们自动更新。 看一段代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script titleVue.set 全局操作/title /head body h1Vue.set 全局操作/h1 hr div idapp ul li v-for aa in arr{{aa}}/li /ul /div button onclickadd()外部添加/button script typetext/javascript function add(){ console.log(我已经执行了); app.arr[1]ddd; //Vue.set(app.arr,1,ddd); } var outData{ arr:[aaa,bbb,ccc] }; var appnew Vue({ el:#app, data:outData }) /script /body /html 这时我们的界面是不会自动跟新数组的我们需要用Vue.set(app.arr,1,’ddd’)来设置改变vue才会给我们自动更新这就是Vue.set存在的意义。 第4节Vue的生命周期钩子函数 Vue一共有10个生命周期函数我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。 其实在Vue的官网有一张图已经很好的诠释了生命周期我在这里就不再多讲了直接贴图然后上程序代码。 我们直接来看一段代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script title构造器的声明周期/title /head body h1构造器的声明周期/h1 hr div idapp {{message}} pbutton clickjia加分/button/p /div button onclickapp.$destroy()销毁/button script typetext/javascript var appnew 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 制作模版 一、直接写在选项里的模板 直接在构造器里的template选项后边编写。这种写法比较直观但是如果模板html代码太多不建议这么写。 javascript代码 1 2 3 4 5 6 7 8 9 var appnew Vue({ el:#app, data:{ message:hello Vue! }, template: h1 stylecolor:red我是选项模板/h1 }) 这里需要注意的是模板的标识不是单引号和双引号而是就是Tab上面的键。 二、写在template标签里的模板 这种写法更像是在写HTML代码就算不会写Vue的人也可以制作页面。 1 2 3 4 5 6 7 8 9 10 11 12 13 template iddemo2 h2 stylecolor:red我是template标签模板/h2 /template script typetext/javascript var appnew Vue({ el:#app, data:{ message:hello Vue! }, template:#demo2 }) /script 三、写在script标签里的模板 这种写模板的方法可以让模板文件从外部引入。 1 2 3 4 5 6 7 8 9 10 11 12 13 script typex-template iddemo3 h2 stylecolor:red我是script标签模板/h2 /script script typetext/javascript var appnew Vue({ el:#app, data:{ message:hello Vue! }, template:#demo3 }) /script 这节课我们学习了Template的三种写法以后学习到vue-cli的时候还会学到一种xxx.vue的写法。 第6节Component 初识组件 前言废话component组件是Vue学习的重点、重点、重点重要的事情说三遍。所以你必须学好Vue component。其实组件就是制作自定义的标签这些标签在HTML中是没有的。比如jspang/jspang那我们就开始学习这种技巧吧。 一、全局化注册组件 全局化就是在构造器的外部用Vue.component来注册我们注册现在就注册一个jspang/jspang的组件来体验一下。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script titlecomponent-1/title /head body h1component-1/h1 hr div idapp jspang/jspang /div script typetext/javascript //注册全局组件 Vue.component(jspang,{ template:div stylecolor:red;全局化注册的jspang标签/div }) var appnew Vue({ el:#app, data:{ } }) /script /body /html 我们在javascript里注册了一个组件在HTML中调用了他。这就是最简单的一个组件的编写方法并且它可以放到多个构造器的作用域里。 二、局部注册组件局部注册组件和全局注册组件是向对应的局部注册的组件只能在组件注册的作用域里进行使用其他作用域使用无效。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script titlecomponent-1/title /head body h1component-1/h1 hr div idapp panda/panda /div script typetext/javascript var appnew Vue({ el:#app, components:{ panda:{ template:div stylecolor:red;局部注册的panda标签/div } } }) /script /body /html 从代码中你可以看出局部注册其实就是写在构造器里但是你需要注意的是构造器里的components 是加s的而全局注册是不加s的。 三、组件和指令的区别 组件注册的是一个标签而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多指令用的比较少。因为指令看起来封装的没那么好这只是个人观点。 第7节Component 组件props 属性设置 props选项就是设置和获取标签上的属性值的例如我们有一个自定义的组件panda/panda,这时我们想给他加个标签属性写成panda here’China’/panda 意思就是熊猫来自中国当然这里的China可以换成任何值。定义属性的选项是props。 一、定义属性并获取属性值 定义属性我们需要用props选项加上数组形式的属性名称例如props:[‘here’]。在组件的模板里读出属性值只需要用插值的形式例如{{ here }}. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script titlecomponent-2/title /head body h1component-2/h1 hr div idapp panda hereChina/panda /div script typetext/javascript var appnew Vue({ el:#app, components:{ panda:{ template:div stylecolor:red;Panda from {{ here }}./div, props:[here] } } }) /script /body /html 上面的代码定义了panda的组件并用props设置了here的属性值在here属性值里传递了China给组件。 最后输出的结果是红色字体的Panda from China. 二、属性中带’-‘的处理方式 我们在写属性时经常会加入’-‘来进行分词比如panda from-here”China”/panda那这时我们在props里如果写成props:[‘form-here’]是错误的我们必须用小驼峰式写法props:[‘formHere’]。 html文件 1 panda from-hereChina/panda javascript文件 1 2 3 4 5 6 7 8 9 var appnew Vue({ el:#app, components:{ panda:{ template:div stylecolor:red;Panda from {{ here }}./div, props:[fromHere] } } }) PS因为这里有坑所以还是少用-为好。 三、在构造器里向组件中传值 把构造器中data的值传递给组件我们只要进行绑定就可以了。就是我们第一季学的v-bind:xxx. 我们直接看代码: Html文件 1 panda v-bind:heremessage/panda javascript文件 1 2 3 4 5 6 7 8 9 10 11 12 var appnew Vue({ el:#app, data:{ message:SiChuan }, components:{ panda:{ template:div stylecolor:red;Panda from {{ here }}./div, props:[here] } } }) 第8节Component 父子组件关系 在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件这就需要一个父子组件关系。 一、构造器外部写局部注册组件 上面上课我们都把局部组件的编写放到了构造器内部如果组件代码量很大会影响构造器的可读性造成拖拉和错误。 我们把组件编写的代码放到构造器外部或者说单独文件。 我们需要先声明一个对象,对象里就是组件的内容。 1 2 3 var jspang { template:divPanda from China!/div } 声明好对象后在构造器里引用就可以了。 1 2 3 components:{ jspang:jspang } html中引用 1 jspang/jspang 二、父子组件的嵌套 我们先声明一个父组件比如叫jspang然后里边我们加入一个city组件我们来看这样的代码如何写。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script titlecomponent-3/title /head body h1component-3/h1 hr div idapp jspang/jspang /div script typetext/javascript var city{ template:divSichuan of China/div } var jspang { template:div p Panda from China!/p city/city /div, components:{ city:city } } var appnew Vue({ el:#app, components:{ jspang:jspang } }) /script /body /html 第9节Component 标签 component/component标签是Vue框架自定义的标签它的用途就是可以动态绑定我们的组件根据数据的不同更换不同的组件。 1.我们先在构造器外部定义三个不同的组件分别是componentA,componentB和componentC. 1 2 3 4 5 6 7 8 9 var componentA{ template:divIm componentA/div } var componentB{ template:divIm componentB/div } var componentC{ template:divIm componentC/div } 2.我们在构造器的components选项里加入这三个组件。 1 2 3 4 5 components:{ componentA:componentA, componentB:componentB, componentC:componentC, } 3.我们在html里插入component标签并绑定who数据根据who的值不同调用不同的组件。 1 component v-bind:iswho/component 这就是我们的组件标签的基本用法。我们提高以下给页面加个按钮每点以下更换一个组件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 !DOCTYPE html html langen head meta charsetUTF-8 script typetext/javascript src../assets/js/vue.js/script titlecomponent-4/title /head body h1component-4/h1 hr div idapp component v-bind:iswho/component button clickchangeComponentchangeComponent/button /div script typetext/javascript var componentA{ template:div stylecolor:red;Im componentA/div } var componentB{ template:div stylecolor:green;Im componentB/div } var componentC{ template:div stylecolor:pink;Im componentC/div } var appnew Vue({ el:#app, data:{ who:componentA }, components:{ componentA:componentA, componentB:componentB, componentC:componentC, }, methods:{ changeComponent:function(){ if(this.whocomponentA){ this.whocomponentB; }else if(this.whocomponentB){ this.whocomponentC; }else{ this.whocomponentA; } } } }) /script /body /html 转载于:https://www.cnblogs.com/vervin/p/8290574.html
