在Vue.js的初识篇了解了Vue的内部指令，并做了一些简单的小案例。这一篇来了解Vue的全局API。
Vue的全局API：在构造器外部用Vue提供的API函数来定义新功能。
首先了解一下自定义指令的生命周期：
bind:function(){ //被绑定 console.log(' bind: 我被被绑定！'); }, inserted:function(){ //绑定到节点 console.log('inserted: 我绑定到节点了！'); }, update:function(){ //组件更新 console.log('update: 组件更新了！'); }, componentUpdated:function(){ //组件更新完成 console.log('componentUpdated: 组件更新完成了！'); }, unbind:function(){ //解绑 console.log('bind: 我已解绑了！'); }
Vue.directive 自定义指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Vue directive</title> </head> <body> <div class="container"> <div id="app"> <h5>{{ message }}</h5> <hr /> <p v-momei='color' id="Dome">{{ num }}</p> <p><button class="btn btn-success" @click="add()">Add</button></p> </div> </div> </body> <script src="https://unpkg.com/vue"></script> <script> Vue.directive('momei',function(el,binding,vnode){ el.style.color=binding.value; }); var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js One Day!', num: 10, color: 'green' }, methods: { add: function() { this.num ++; } } }); </script> </html>
自定义指令传入的三个参数：
el: 指令绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含以下属性：
-
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值。
- oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
Vue的生命周期：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Vue 生命周期</title> </head> <body> <div class="container"> <div id="app"> <h5>{{ message }}</h5> <hr /> <p>{{ num }}</p> <p><button class="btn btn-success" @click="add()">Add</button></p> </div> </div> </body> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js ONE Day!', num: 10, }, methods: { add: function() { this.num ++; } }, 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> </html>
Vue.extend构造器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Vue Extend</title> </head> <body> <div class="container"> <author></author> </div> </body> <script src="https://unpkg.com/vue"></script> <script> var Extend = Vue.extend({ template: "<p><a :href='Url'>{{Name}}</a></p>", //模板 data:function() { return{ Name: 'momei', Url: 'http://www.cnblogs.com/momei/' } } }); new Extend().$mount('author'); //挂载扩展实例构造器 </script> </html>
Vue.set 全局操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Vue.set 全局操作</title> </head> <body> <div class="container"> <h1>Vue.set 全局操作</h1> <hr> <div id="app"> <ul> <li v-for=" aa in arr">{{aa}}</li> </ul> <!-- <button @click="add()">外部添加</button> --> </div> <button onclick="add()">外部添加</button> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> function add(){ console.log("我已经执行了"); //app.arr[1]='ddd'; //我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新 Vue.set(app.arr,1,'ddd'); } //在构造器外部声明数据 var outData={ arr:['aaa','bbb','ccc'] }; var app=new Vue({ el:'#app', data:outData }) </script> </body> </html>
Template 制作模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>template 模板</title> </head> <body> <div class="container"> <h1>template 模板</h1> <hr> <div id="app"> <h4>{{message}}</h4> </div> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message: 'hello Vue!' }, template: `<h4 style="color:green">template选项模板</h4>` }) </script> </body> </html>
当模板内容较多时上面的方式就不那么方便了，来看看template的标签模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>template 模板</title> </head> <body> <div class="container"> <h1>template 模板</h1> <hr> <div id="app"> <h4>{{message}}</h4> </div> </div> <template id="demo"> <h2 style="color:red">我是template标签模板</h2> </template> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message: 'hello Vue!' }, template: '#demo' }) </script> </body> </html>
Component 组件
在构造器外部注册全局化 Vue.component:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Vue component</title> </head> <body> <div class="container"> <!-- 组件标签 --> <small>*** 全局化就是在构造器的外部用Vue.component来注册</small> <div id="app"> <h5>{{ message }}</h5> <hr /> <momei></momei> </div> </div> </body> <script src="https://unpkg.com/vue"></script> <script> //注册全局组件 Vue.component('momei',{ template:`<div style="color:red;">全局化注册的jspang标签</div>` }) var app=new Vue({ el:'#app', data:{ message: 'Component组件' } }) </script> </html>
局部注册和全局注册相对，只在其作用域可用：
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"momei":{
template:`<div style="color:red;">局部注册的panda标签</div>`
}
}
})
</script>
components写在构造器内且加上了S。
Comonent 组件的props属性设置
propr选项就是设置和获取标签上的属性值。
<panda from-here="XIAN"></panda>
var app=new Vue({ el: '#app', components: { "panda": { template: `<div style="color:red;">Panda from {{ fromHere }}.</div>`, props: ['fromHere'] // 注意此处采用驼峰书写 } } })
Component 父子组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>component 父子组件</title> </head> <body> <div class="container"> <div id="app"> <h3>{{ messgae }}</h3> <hr /> <momei></momei> </div> </div> </body> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var city={ template:`<div>from xian!</div>` } var momei = { template:`<div> <p> 八百里秦川</p> <city></city> </div>`, components:{ "city":city } } var app=new Vue({ el:'#app', data: { messgae: 'component 父子组件嵌套' }, components:{ "momei":momei } }) </script> </html>
Component 标签
<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。
定义组件：
var componentA = { template: `<h1 style="color:red;">Im componentA</h1>` }; var componentB = { template: `<h1 style="color:red;">Im componentB</h1>` }; var componentC = { template: `<h1 style="color:red;">Im componentC</h1>` };
compoments 挂载组件：
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
}
在html里书写component标签，通过数据绑定，调用组件。
至此Vue的全局API已有一定的认识，要做的就是多多实践，去发现，去建立信心，去走更远。
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
