Vue常用全局Api简介及使用

---

全局API：

(1)Vue.directive

(2)Vue.use

(3)Vue.extend

(4)Vue.set

(5)Vue.mixin

实例属性

(6)vm.$props

(7)vm.$options

(8)vm.$el

(9)vm.$children

(10)vm.$root

(11)vm.$slots

(12)vm.$attrs

全局配置

(13)productionTip

(14)silent

(15)devtools

组件进阶

(16)mixins

(17)render

(18)createElement

---

代码示例：

    
    
    



    
Vue.directive：用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性
    
自定义注册指令v-focus:
    
控制input文本框是否自动获得焦点
    
打开文件时,光标自动插入该input
    

    

    

        
Vue.use：
Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，

            如果是对象，必须提供install()方法，用来安装插件；如果是一个函数，则该函数将被当成install()方法。
        
        

        

            
Vue.js官方提供的一些插件（如vue-router）在检测到 Vue 是可访问的全局变量时，
            
会自动调用 Vue.use()。
            
但是在CommonJS等模块环境中，则始终需要Vue.use()显式调用
        
    
    

        
Vue.extend：
        
Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。
        
它有一个options参数，表示包含组件选项的对象
        
app1: {{title}}
        
app2: {{title}}
    
    

    

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

        
{{a}}
        
{{obj.file_name}}
        

    
    

    
Vue.mixin：
    
Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例。
    
该接口主要是提供给插件作者使用，在插件中向组件注入自定义的行为。
    
该接口不推荐在应用代码中使用。
    

    
$props：使用vm.$props属性可以接收上级组件向下传递的数据。
    
通过$props实现手机信息搜索(华为,vivo,三星,苹果)
    
在子组件的data中定义props用来接收name的值
    
    
    

    

        
$options：Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。
        
自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取
        
{{base}}
        
{{noBase}}
        
$el：vm.$el用来访问vm实例使用的根DOM元素，案例展示如下
    
    

        
$children：vm.$el用来访问vm实例使用的根DOM元素，案例演示如下
        查看子组件
        
        

        
$root：
        
vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身
        
控制台查看结果：
        
    
    

    
    
$slots：Vue中的组件中使用template模板定义HTML结构，为了方便使用template公共模板结构。
    
Vue提出了插槽（Slots）的概念，插槽就是定义在组件内部的template模板，可以通过$slots动态获取。

 效果图：