vue学习笔记三:vue开发基础下

一、全局API

1、Vue.directive
在这里插入图片描述

//定义
Vue.directive('指令名称(定义时不需要v-,使用时需要)',{
    
    '指令的配置对象'})
//el:函数参数,代表使用当前指令元素
//binding:代表当前指令相关的配置信息

在这里插入图片描述
2、Vue.use
在这里插入图片描述

//1、定义一个插件对象
let MyPlugin={
    
    };
//2、编写插件对象的install方法
MyPlugin.install=function('Vue(构造器)','配置对象'){
    
    
Vue.directive('指令名',{
    
    '配置对象'})
}
//3、安装插件
Vue.use(MyPlugin'(对象)',{
    
    '参数'})

在这里插入图片描述
3、Vue.extend
在这里插入图片描述
在这里插入图片描述
4、Vue.set
用于向响应式对象中动态添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新
在这里插入图片描述

//a和obj是一级属性,obj:{b}的b是二级属性
Vue.set(vm.属性,'属性名','属性值');
//直接在外面添加非响应式

在这里插入图片描述
在这里插入图片描述
5、Vue.mixin
★将一个公共对象添加到组件里面
☆vue也是组件
在这里插入图片描述

//混入对象可以有组件中的选项
Vue.mixin({
    
    '接收对象'})
//被混入的组件可以使用混入对象数据。
//钩子函数优先执行混入对象的钩子函数,再去执行混入对象的钩子函数。

在这里插入图片描述

二、实例属性

1、vm.$props
在这里插入图片描述

//1、文本框双向数据绑定(v-model绑定)
//2、将数据传递到子组件中
//3、子组件监听传递过来的数据,渲染结果(监听函数名字要跟需要监听的数据名字一致)

在这里插入图片描述
2、vm.$options
在这里插入图片描述

小技巧:输入‘p*2’按回车可得两个


插值表达式可直接访问实例中的属性,data中的数据默认加到实例中,而$options是默认就有的实例属性。
$options.选项名

在这里插入图片描述
3、vm.$el
在这里插入图片描述
在这里插入图片描述

4、vm.$children
在这里插入图片描述
在这里插入图片描述

5.vm.$root
在这里插入图片描述
☆vue也是组件,vue的很多实例属性,在组件中也是可以书写的。
在这里插入图片描述

6、vm.$slots
在这里插入图片描述
插槽标签实际是占位标签,可以接受组件中的内容进行显示。

//插槽:用于接收自定义组件的内容(开始标签到结束标签的内容)
<slot></slot>//默认插槽,通过$slots.default获取,此时获取的是节点([0]获取第一个结点);如果获取内容,则需要添加.text
<template v-slot:插槽名></template>//定义具名函数(带名字的插槽)
<slot name="插槽名"></slot>//使用具名函数

在这里插入图片描述
7、vm.$attrs
在这里插入图片描述
在这里插入图片描述

三、全局配置

1、productionTip
在这里插入图片描述

在这里插入图片描述
2、silent
在这里插入图片描述
注意:配置需要在vue实例化之前执行。
在这里插入图片描述
3、devtools
在这里插入图片描述
在这里插入图片描述

四、组件进阶

1、mixins
在这里插入图片描述

//1、定义mixin混入对象
var mixin={
    
    
data(){
    
    },
methods:{
    
    },
}
//2、注册mixin混入对象
var vm=new Vue({
    
    
el:'',
mixins:[mixin],
data:{
    
    }
})

在这里插入图片描述
2、render
在这里插入图片描述
在这里插入图片描述
3、createElement
在这里插入图片描述
第三个参数多为文本。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/jinyeran/article/details/120831282