關(guān)于vue中extend,mixins,extends,components,install的操作

// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
 template: '<p>{{extendData}}</br>實(shí)例傳入的數(shù)據(jù)為:{{propsExtend}}</p>',//template對(duì)應(yīng)的標(biāo)簽最外層必須只有一個(gè)標(biāo)簽
 data: function () {
 return {
 extendData: '這是extend擴(kuò)展的數(shù)據(jù)',
 }
 },
 props:['propsExtend']
})
// 創(chuàng)建 Profile 實(shí)例，并掛載到一個(gè)元素上。可以通過(guò)propsData傳參.
new Profile({propsData:{propsExtend:'我是實(shí)例傳入的數(shù)據(jù)'}}).$mount('#app-extend')

//1.創(chuàng)建組件構(gòu)造器
 var obj = {
 props: [],
 template: '<p><p>{{extendData}}</p></p>',//最外層只能有一個(gè)大盒子,這個(gè)和<tempalte>對(duì)應(yīng)規(guī)則一致
 data: function () {
 return {
 extendData: '這是Vue.component傳入Vue.extend注冊(cè)的組件',
 }
 },
 };

 var Profile = Vue.extend(obj);

 //2.注冊(cè)組件方法一:傳入Vue.extend擴(kuò)展過(guò)得構(gòu)造器
 Vue.component('component-one', Profile)

 //2.注冊(cè)組件方法二:直接傳入
 Vue.component('component-two', obj)

 //3.掛載
 new Vue({
 el: '#app'
 });

 //獲取注冊(cè)的組件 (始終返回構(gòu)造器)
 var oneComponent=Vue.component('component-one');
 console.log(oneComponent===Profile)//true,返回的Profile構(gòu)造器

 var mixin={
 data:{mixinData:'我是mixin的data'},
 created:function(){
 console.log('這是mixin的created');
 },
 methods:{
 getSum:function(){
 console.log('這是mixin的getSum里面的方法');
 }
 }
 }

 var mixinTwo={
 data:{mixinData:'我是mixinTwo的data'},
 created:function(){
 console.log('這是mixinTwo的created');
 },
 methods:{
 getSum:function(){
 console.log('這是mixinTwo的getSum里面的方法');
 }
 }
 } 

 var vm=new Vue({
 el:'#app',
 data:{mixinData:'我是vue實(shí)例的data'},
 created:function(){
 console.log('這是vue實(shí)例的created');
 },
 methods:{
 getSum:function(){
 console.log('這是vue實(shí)例里面getSum的方法');
 }
 },
 mixins:[mixin,mixinTwo]
 })
 
 //打印

var extend={
 data:{extendData:'我是extend的data'},
 created:function(){
 console.log('這是extend的created');
 },
 methods:{
 getSum:function(){
 console.log('這是extend的getSum里面的方法');
 }
 }
 }

 var mixin={
 data:{mixinData:'我是mixin的data'},
 created:function(){
 console.log('這是mixin的created');
 },
 methods:{
 getSum:function(){
 console.log('這是mixin的getSum里面的方法');
 }
 }
 }
 
 
 var vm=new Vue({
 el:'#app',
 data:{mixinData:'我是vue實(shí)例的data'},
 created:function(){
 console.log('這是vue實(shí)例的created');
 },
 methods:{
 getSum:function(){
 console.log('這是vue實(shí)例里面getSum的方法');
 }
 },
 mixins:[mixin],
 extends:extend
 })
 
 //打印結(jié)果
 這是extend的created
 這是mixin的created
 這是vue實(shí)例的created
 這是vue實(shí)例的getSum里面的方法

//1.創(chuàng)建組件構(gòu)造器
 var obj = {
 props: [],
 template: '<p><p>{{extendData}}</p></p>',//最外層只能有一個(gè)大盒子,這個(gè)和<tempalte>對(duì)應(yīng)規(guī)則一致
 data: function () {
 return {
 extendData: '這是component局部注冊(cè)的組件',
 }
 },
 };

 var Profile = Vue.extend(obj);
 
 //3.掛載
 new Vue({
 el: '#app',
 components:{
 'component-one':Profile,
 'component-two':obj
 }
 });

 var MyPlugin = {};
 MyPlugin.install = function (Vue, options) {
 // 2. 添加全局資源,第二個(gè)參數(shù)傳一個(gè)值默認(rèn)是update對(duì)應(yīng)的值
 Vue.directive('click', {
 bind(el, binding, vnode, oldVnode) {
 //做綁定的準(zhǔn)備工作,添加時(shí)間監(jiān)聽(tīng)
 console.log('指令my-directive的bind執(zhí)行啦');
 },
 inserted: function(el){
 //獲取綁定的元素
 console.log('指令my-directive的inserted執(zhí)行啦');
 },
 update: function(){
 //根據(jù)獲得的新值執(zhí)行對(duì)應(yīng)的更新
 //對(duì)于初始值也會(huì)調(diào)用一次
 console.log('指令my-directive的update執(zhí)行啦');
 },
 componentUpdated: function(){
 console.log('指令my-directive的componentUpdated執(zhí)行啦');
 },
 unbind: function(){
 //做清理操作
 //比如移除bind時(shí)綁定的事件監(jiān)聽(tīng)器
 console.log('指令my-directive的unbind執(zhí)行啦');
 }
 })

 // 3. 注入組件
 Vue.mixin({
 created: function () {
 console.log('注入組件的created被調(diào)用啦');
 console.log('options的值為',options)
 }
 })

 // 4. 添加實(shí)例方法
 Vue.prototype.$myMethod = function (methodOptions) {
 console.log('實(shí)例方法myMethod被調(diào)用啦');
 }
 }

 //調(diào)用MyPlugin
 Vue.use(MyPlugin,{someOption: true })

 //3.掛載
 new Vue({
 el: '#app'
 });