Vue 实例之全局API，实例属性，全局配置，组件进阶

文章目录

• 写在前面
• Vue 全局 API
• Vue 实例属性
• Vue 全局配置
• Vue 组件进阶

写在前面

yzx 是我的名字，可忽略不计。引入 vue.js的 src 地址是"src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”，每个案列都需要添加~

Vue 全局 API

Vue.directive

用来注册自定义的指令，为 DOM 元素添加新特性。自定义注册指令 v-focus ，用于控制 input 文本框是否自动获取焦点。

<div id="app">
	<input type="text" v-focus="true">
</div>
<script>
	Vue.directive('focus',{
		//inserted：插入 ；el：指令元素；binding：指令的相关配置信息
		inserted(el,binding){
			if(binding.value){ //获取指令的值，如果为 true,执行获取焦点 yzx
				el.focus()
			}
		}
	})	
	var vm = new Vue({el:'#app'})
</script>

Vue.use

Vue.use:主要用于在 Vue中安装插件，可以 为 Vue 添加全局功能。插件可以是一个对象或者函数，如果是对象，必须提供 install() 方法，用来安装插件；如果是一个函数，则该函数将被当成 install() 方法。

<div id="app" v-my-directive></div>	
<script>
    //myplugin（自定义插件）对象 yzx
	let myplugin = {}
	//编写插件对象的 install 方法
	myplugin.install = function(vue,options){
		console.log(options);
	//在插件中为 vue 添加自定义指令
	    vue.directive('my-directive',{
		    bind(el,binding){
			//设置自定义指令v-my-directive绑定dom 元素设置style样式
			el.style ='width:100px;height:100px;background-color:pink';
		    }
	    })
    }	
	//安装插件 myplugin
	Vue.use(myplugin,{someoption:true})
	//创建 vm 实例
	var vm = new Vue({
		el:'#app',
		data:{}
	}); 
</script>

Vue.extend

vue.extend ，基于 Vue 构造器创建一个 Vue 子类，可以对于 Vue 构造器进行扩展。

<div id='app1'>app1:{{title}}</div>
<div id='app2'>app2:{{title}}</div>  
<script>
    //创建子类Vue 2
    var Vue2 = Vue.extend({
        data(){
            return {
                title:'hello yzx'
            }
        }
    })
var vm1 = new Vue({el:'#app1'})
var vm = new Vue2({el:'#app2'})

Vue.set

Vue.set :Vue 的核心具有一套响应式系统，简单来说就是通过监听数据层的数据变化，当数据改变后，通知视图也自动更新。Vue.set 用于向响应式对象中添加一个属性，并确保这个属性同样是响应式的，会触发试图更新。

<div id='app'>
    <div>{{a}}</div>
    <div>{{obj.b}}</div>
</div>
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            a:'我是根级响应式属性a (yzx)',
            obj:{}
        }
    })
    //Vue.obj.b ='我是。。。' 这样是不行的，需要set 方法才ok 必须确保是响应式的
    //这个 obj 的b属性都可以随便设置名字的~~
    Vue.set(vm.obj,'b','我是Vue.set添加的响应式属性obj.b')
</script>

Vue.mixin

mix 混合 in 进入，组合一起就是混入。当组件使用了混入对象时，所有混入对象的选项都将混入该组件本身的选项。

    Vue.mixin({
        data(){
            return{
                msg:'混入数据 yzx'
            }
        },
        created(){
            console.log('混入的created')
            var myOption = this.$options.myOption
            if(myOption){
                //将字母改成大写字母
                console.log(myOption.toUpperCase())
            }
        }
    })
    var vm = new Vue({
        el:'#app',
        myOption:'hello yzx',
        created(){
            console.log('Vue的 created 钩子函数');
        },
        data :{}
    })
</script>

Vue 实例属性

vm.$props

vm.$props 属性可以接收上级组件向下传递的数据

<div id='app'>
    <!--父组件 -->
    <my-parent></my-parent>
</div>
<!---父组件模板-->
<template id='parent'>
<div>
    <h3>歌曲详情搜索</h3>
    歌曲详情：<input type="text" v-model='singer'/>  <!--文本框双向绑定 -->  
    <!---子组件-->
    <my-child v-bind:name='singer'></my-child>
</div>  
</template>
<!---子组件模板-->
<template id='child'>
<ul>
 <li>歌手：{{show.singer}}</li>
 <li>歌曲名称：{{show.names}}</li>
 <li>歌曲时长：{{show.times}}</li>
</ul>
</template>
<script>
    Vue.component('my-parent',{
        template:'#parent',
        data(){
            return{
                singer:''
            }
        }
    })
    //在子组件里写入数据
    Vue.component('my-child',{
        props:['name'],
        template:'#child',
        data(){
            return{
                content:[{
                    singer:'yzx',
                    names:'世间美好',
                    times:'04:20'
                },{
                    singer:'小红',
                    names:'执迷的一天',
                    times:'03:27'
                },{
                    singer:'小明',
                    names:'快乐的憨憨',
                    times:'03:54'
                },{
                    singer:'小兰',
                    names:'无限可能~',
                    times:'02:49' 
                },{
                    singer:'小紫',
                    names:'星球的快乐',
                    times:'04:24'
                }],
                show:{
                    singer:'',
                    names:'',
                    times:''
                }
            }
        },
        //添加子组件监听，如果找到则返回查找结果，找不到返回一个空值
        watch:{
            name(){
                if(this.$props.name){
                  var found = false;
                  this.content.forEach(
                      (value,index)=> {
                          if(value.singer == this.$props.name){
                              found = value;
                          }
                      }
                  );  
                  this.show =found ? found:{
                      singer:'',
                      names:'',
                      times:''
                      }
                }
            }
        }
    })
    var vm = new Vue({
        el:'#app',
        data:{}
    })
</script>

vm.$options

$ options : Vue 实例化可以传入自定义的选项，自定义的选项值可以是数组，对象，函数等，需要通过 vm.$ options 来获取。

<div id='app'>
    <p>{{base}}</p>
    <p>{{nobase}}</p>
    <!--插值表达式可以直接访问 Vue 中的属性-->
    <p>{{$options.customOption}}</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            base:'我是基础数据 yzx'
        },
        customOption:'我是自定义数据 yzx',    
        created(){
            //这里的赋值为了更简单使用插值表达式
           this.nobase =this.$options.customOption //这里的赋值为了更简单使用插值表达式
        }
    })
</script>

vm.$el

vm.$el : 用来访问 vm 实列使用的 DOM 元素。

<div id="app">
    <p>我是根标签 </p>
</div>
<script>
    var vm =  new Vue({
        el:'#app',
        data:{}
    })
    vm.$el.innerHTML ='<div>我是替换后的 div 标签 yzx </div>'
</script>

vm.$chidren

$children:用来获取当前实例的子组件。

    <div id='app'>
        <button @click='child'>查看子组件 yzx</button>
        <my-component></my-component>
    </div>
    <script>        
        Vue.component('my-component',{
            template:'<div>my-component</div>'
        })
        var vm = new Vue({
            el:'#app',
            methods:{
                child(){
                    console.log(this.$children)
                }
            }
        })
    </script>

vm.$root

vm.$root: 用来获取当前组件的树的根Vue实例，如果当前实例没有父组件，则获取到的是该实例的本身。

    <div id='app'>
        <my-component></my-component>
    </div>
    <script>       
        Vue.component('my-component',{
            template:"<button @click='root'>查看根实例 yzx</button>",
            methods:{
                root(){
                    console.log(this.$root)
                    console.log(this.$root===vm.$root)
                }
            }
        })	
        var vm = new Vue({
            el:'#app',
            data:{}
            })
        console.log(vm.$root)	
    </script>  

vm.$slots

用于获取插槽，插槽是父组件向子组件传递内容。

    <div id='app'>
        <my-component>你好 yzx !</my-component>
    </div>
    <template id='first'>
        <div>
            <slot></slot>
        </div>
    </template>
    <script>
        Vue.component('my-component',{
            template:'#first'
        })
        var vm = new Vue({
            el:'#app',
            data:{}
        });
        //vm 第一个子组件的所以插槽
        //.default 获取默认的插槽
        //[0]获取插槽第一个节点
        //text 获取节点的内容
  console.log(vm.$children[0].$slots.default[0].text);
</script>

多个插槽，获取带有名字的插槽：

    <div id='app'>
        <my-component>你好 yzx !
            <template v-slot:second>
				<div>第二个插槽的内部结构</div>
			</template>
        </my-component>
    </div>
    <template id='first'>
        <div>
            <slot></slot>
            <!--具有名字的插槽：具名插槽--->
            <slot name='second'></slot>
        </div>
    </template>
    <script >
        Vue.component('my-component',{
            template:'#first'
        })
        var vm = new Vue({
            el:'#app',
            data:{}
        });
        //vm 第一个子组件的所以插槽
        //.default 获取默认的插槽
        //[0]获取插槽第一个节点
        console.log(vm.$children[0].$slots);
    </script>

vm.$attrs

vm.$attrs : 可以获取组件的属性，但其获取的属性不包括 class,style 以及被声明为 props 的属性。

    <div id='app'>
        <my-component id='yzxtest'></my-component>
    </div>
    <script>
        Vue.component('my-component',{
            template:"<button @click='showAttrs'>查看属性</button>",
            methods:{
                showAttrs(){
                    console.log(this.$attrs);
                }
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{}
        });
    </script>

Vue 全局配置

productionTIP

Vue.config.productionTip: 打开或关闭信息提示信息，默认为打开状态。 设置属性值为false ，则表示关闭生产提示信息。

<div id='app'></div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{}
    });
    Vue.config.productionTip =false;
</script>

Silent

Vue.config.silent：silent 可以取消 Vue 日志和警告，silent 默认为flase ,不要沉默，就是打开警告功能。你没事关掉干嘛，错误提示开着最好，有些你不想看到的，那你就关了吧。。。

<div id='app'>{{yzx 我是一个错误}}</div>
<script>
    //需要写在 Vue 实例前
    Vue.config.silent = true;
    var vm = new Vue({
        el:'#app',
        data:{}
    });
</script>

devtools

Vue.config.devtools: 表示打开或关闭 vue-devtools 调试工具，默认值为 true ,表示 vue-devtools 工具可用。设置属性为fasle 时，插件会变成灰色，无法使用。我演示的是可以使用的 ，可能是我浏览器设置的问题，我手动设置可以使用昂~

<div id='app'></div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'yzx'
        }
    })
    Vue.config.devtools = true;
</script>  

Vue 组件进阶

minxins

minxins: 跟上面介绍的vue.mixin 类似，不多介绍了，这里的局部的属性。
注意：混入对象与 Vue 选项冲突的预先原则： 1，如果是数据或函数冲突 ，Vue 优先。 2，如果是钩子函数冲突，先执行混入对象的钩子函数，然后执行 Vue的钩子函数。

    <div id='app'></div>
    <script>
        //定义mixin 混入对象
        var mixin = {
            data(){
                return{
                    msg:'mixin 的数据'
                }
            },
            methods:{
                hello(){
                    console.log('hello yzx from mixin')
                }
            },
            created(){
                console.log('mixin 的钩子函数');
            }
        }
        var vm = new Vue({
            el:'#app',
            mixins:[mixin],
            data:{},
            created(){
                console.log('Vue 的钩子函数');
                console.log(this.msg);
                this.hello(); //调用方法
            }
        })
    </script>

render

render() 渲染函数，在Vue 中可以使用该函数实现对虚拟 DOM 的操作。

    <div id='app'>
        <my-component>yzx 成功渲染</my-component>
    </div>
    <script>
        Vue.component('my-component', {
            render(createElement) {
                return createElement('p', {
                    style: {
                        color: 'hotpink',
                        fontSize: '20px',
                        backgroundColor:'#ccc'
                    }
                },this.$slots.default);
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {}
        })  
    </script>

createElement

createElement: createElement()函 数返回的并不是- - -个实际的DOM元素，它返回的其实是一- 个描述节点(createNodeDescription) 。

• 第1个参数可以是一一个HTML标签名或组件选项对象。
  -第2个参数是可选的，可以传入一个与模板中属性对应的数据对象。
  -第3个参数是由createElement()构建而成的子级虚拟节点，也可以使用字符串来生成文本虚拟节点。

    <div id='app'>
        <my-component>
            <template v-slot:header>
                <div style="background-color: aqua;height: 50px;">这里是导航栏yzx</div>
            </template>
            <template v-slot:content>
                <div style="background-color:pink;height: 50px;">这里是内容区域yzx</div>
            </template>
            <template v-slot:footer>
                <div style="background-color:red;height: 50px;">这里是底部区域yzx</div>
            </template>
        </my-component>
    </div>
    <script>
        Vue.component('my-component',{
            render(createElement){
                return createElement('div',[
                    createElement('header',this.$slots.header),
                    createElement('content',this.$slots.content),
                    createElement('footer',this.$slots.footer)
                ])
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{}
        })
    </script>

---

未经允许，禁止加载。写很多，手很累的????????????

本文地址：https://blog.csdn.net/qq_44761243/article/details/109292269