Vue的学习路
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的学习路相关的知识，希望对你有一定的参考价值。
学习资源来自技术胖老师http://jspang.com/2017/03/14/vue2_02/
一、什么是全局API？
全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。
二、Vue.directive自定义指令
我们在第一季就学习了内部指令，我们也可以定义一些属于自己的指令，比如我们要定义一个v-jspang的指令，作用就是让文字变成绿色。
在自定义指令前我们写一个小功能，在页面上有一个数字为10，数字的下面有一个按钮，我们每点击一次按钮后，数字加1.
三、自定义指令中传递的三个参数
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
四、自定义指令的生命周期
自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
- bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
- inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
- update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
- unbind:只调用一次，指令与元素解绑时调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.directive 自定义指令</title> </head> <body> <h1>vue.directive 自定义指令</h1> <div id="app"> <div v-kevin="color" class="kevin">{{num}}</div> <button @click="add">ADD</button> </div> <p><button onclick="unbind()">解绑</button></p> <script src="vue.min.js"></script> <script> function unbind() { app.$destroy(); //销毁 } Vue.directive("kevin",function(el,binding) { // el:使用自定义指令的对象 // binding.value:绑定的color值 // binding.name:指令名称 el.style = "color:" + binding.value; console.log(binding) }) Vue.directive("kevin",{ bind:function(){//被绑定 console.log(‘1 - bind‘); }, inserted:function(){//绑定到节点 console.log(‘2 - inserted‘); }, update:function(el,binding){//组件更新 el.style = "color:" + binding.value; 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: ‘red‘, }, methods: { add: function() { this.num++; } } }) </script> </body> </html>
一、什么是Vue.extend？
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
由于我们还没有学习Vue的自定义组件，所以我们先看跟组件无关的用途。
二、自定义无参数标签
我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地址。我们希望在html中只需要写<author></author> ，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。
三、挂载到普通标签上
还可以通过HTML标签上的id或者class来生成扩展实例构造器，Vue.extend里的代码是一样的，只是在挂载的时候，我们用类似jquery的选择器的方法，来进行挂载就可以了。
new authorExtend().$mount(‘#author‘);
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.extend 构造器的延伸</title> </head> <body> <h1>vue.extend 构造器的延伸</h1> <hr> <kevin></kevin> <!-- 标签绑定方式 --> <div id="kevin"></div> <!-- id绑定方式 --> <script src="vue.min.js"></script> <script> var kevinExtend = Vue.extend({ template: "<p><a :href = ‘kevinUrl‘>{{kevinName}}</p>", data: function() { //不能直接写对象，需要return出来
return { kevinName: ‘kevin‘, kevinUrl: ‘http://www.baidu.com‘ } } }); new kevinExtend().$mount(‘kevin‘); new kevinExtend().$mount(‘#kevin‘); </script> </body> </html>
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 })
二、在外部改变数据的三种方法：
//1、用Vue.set改变 function add(){ Vue.set(outData,‘count‘,4); }//2、用Vue对象的方法添加 app.count++; app.count++; //3、直接操作外部数据 outData.count++;
其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。
三、为什么要有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> <div id="app"> {{count}} <ul> <li v-for="vo in arr"> {{vo}} </li> </ul> </div> <p><button onclick="add()">ADD</button></p> <script src="vue.min.js"></script> <script> function add() { // Vue.set(outData,‘count‘,2); // app.count++; // outData.count++; app.arr[1] = ‘kevin‘; //当只通过数组下标改变数组时，Vue监听不到，需要用下面的Vue.set()改变 Vue.set(app.arr,1,‘kevin‘); } var outData = { count: 1, name: ‘kevin‘, arr: [‘aaa‘,‘bbb‘,‘ccc‘] } var app = new Vue({ el: ‘#app‘, data: outData, methods: { } }) </script> </body> </html>
第4节：Vue的生命周期（钩子函数）
Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue的生命周期（钩子函数）</title> </head> <body> <h1>vue的生命周期（钩子函数）</h1> <div id="app"> {{count}} <p><button @click="add">ADD</button></p> </div> <button onclick="app.$destroy()">销毁</button> <script src="vue.min.js"></script> <script> var app = new Vue({ el: ‘#app‘, data: { count: 1 }, methods: { add: function() { this.count++; } }, 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代码：
var app=new Vue({ el:‘#app‘, data:{ message:‘hello Vue!‘ }, template:` <h1 style="color:red">我是选项模板</h1> ` })
这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键。
二、写在<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>
三、写在<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>
这节课我们学习了Template的三种写法，以后学习到vue-cli的时候还会学到一种xxx.vue的写法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Templage 制作模板</title> </head> <body> <h1>Templage 三种写法</h1> <hr> <div id="app"> {{message}} </div> <template id="kevin"> <h2 style="color: red;">Template标签模板</h2> </template> <!-- script标签模板可以引入外部链接 src --> <script type="x-template" id="kevin2"> <h2 style="color: red;">Script标签模板</h2> </script> <script src="vue.min.js"></script> <script> var app = new Vue({ el: ‘#app‘, data: { message: ‘kevin‘ }, template: "#kevin2", // template: ` // <h2 style="color: red;">选项模板</h2> // `, methods: { } }) </script> </body> </html>
第6节：Component 初识组件
一、全局化注册组件
全局化就是在构造器的外部用Vue.component来注册，我们注册现在就注册一个<jspang></jspang>的组件来体验一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <jspang></jspang> </div> <script type="text/javascript"> //注册全局组件 Vue.component(‘jspang‘,{ template:`<div style="color:red;">全局化注册的jspang标签</div>` }) var app=new Vue({ el:‘#app‘, data:{ } }) </script> </body> </html>
我们在javascript里注册了一个组件，在HTML中调用了他。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。
二、局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <panda></panda> </div> <script type="text/javascript"> var app=new Vue({ el:‘#app‘, components:{ "panda":{ template:`<div style="color:red;">局部注册的panda标签</div>` } } }) </script> </body> </html>
从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。
三、组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。
未完待续......
以上是关于Vue的学习路的主要内容，如果未能解决你的问题，请参考以下文章