vue学习笔记三:vue开发基础下
一、全局API
1、Vue.directive

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

2、Vue.use

插件本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
//1、定义一个插件对象
let MyPlugin={};
//2、编写插件对象的install方法
MyPlugin.install=function('Vue(构造器)','配置对象'){
Vue.directive('指令名',{'配置对象'})
}
//3、安装插件
Vue.use(MyPlugin'(对象)',{'参数'})
vue.use会自动阻止多次安装同一插件。

3、Vue.extend

使用Vue.extend(options)定义组件,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;区别如下:
el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
options参数表示包含组件选项的对象。
每次调用Vue.extend,返回的都是一个全新的VueComponent

合并对象规则同mixin
4、Vue.set

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


5、Vue.mixin
★将一个公共对象添加到组件里面
☆vue也是组件

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

二、实例属性
1、vm.$props在这里插入图片描述


//1、文本框双向数据绑定(v-model绑定)
//2、将数据传递到子组件中
//3、子组件监听传递过来的数据,渲染结果(监听函数名字要跟需要监听的数据名字一致)
补充:使用ES6箭头函数语法定义函数,将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数列表和函数体。当函数参数只有一个,括号可以省略;但是没有参数时,括号不可以省略。箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,省略掉了{ … }和return。还有一种可以包含多条语句,这时候就不能省略{ … }和return。如果返回一个对象,需要特别注意,如果是单表达式要返回自定义对象,不写括号会报错,因为和函数体的{ … }有语法冲突。注意,用小括号包含大括号则是对象的定义,而非函数主体。来源:js—遍历的4种方法 & 箭头函数=>

2、vm.$options

小技巧:输入‘p*2’按回车可得两个
插值表达式可直接访问实例中的属性,data中的数据默认加到实例中,而$options是默认就有的实例属性。
$options.选项名

3、vm.$el


4、vm.$children

$children不保证顺序,也不是响应式的。
$parent:当前组件获取父组件实例对象的方式。
this.children可以获得当前实例的所有子组件实例集合。

5.vm.$root

☆vue也是组件,vue的很多实例属性,在组件中也是可以书写的。

6、vm.$slots
插槽:定义在组件内部的template模板,可以通过$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
功能:可以把多个组件共用的配置提取成一个混入对象

全局混入:Vue.mixin(xxx) 局部混入:mixins:[‘xxx’]
//1、定义mixin混入对象
var mixin={
data(){},
methods:{},
}
//2、注册mixin混入对象
var vm=new Vue({
el:'',
mixins:[mixin],
data:{}
})
合并同名时会合并为一个数组。

2、render

render函数返回值中需要调用createElement函数来创建函数。

3、createElement

第三个参数多为文本。

补充:1、Vue 实例对象提供了实例可操作方法,$data 数据可以由实例 vm 委托代理,通过 Vue 实例对象可以进行 Vue 全局配置。
2、请简述什么是 Vue 插件。
Vue 插件就是一个对象或函数,需要有 install 方法,可以通过 Vue.use 安装
let 自定义插件对象,然后写其 install 方法,最后用 Vue.use 安装插件。
3.请简述 Vue 全局 API 接口的主要内容。
Vue.directive,自定义内置指令,例如 focus
Vue.use,安装插件
Vue.extend,为 Vue 构造器创建一个子类
Vue.set,向响应式对象中添加一个属性,并确保其也是响应式的
Vue.mixin,混入,影响全局 vue 实例
3.请简单介绍 Vue 实例对象的属性和方法。
vm.$props,接收上级组件向下级传递的数据
vm.options,Vue 实例初始化时传的自定义选项
vm.$el,访问根 DOM 元素
vm.$children,当前实例的直接子组件
vm.$root,组件树的根 Vue 实例
vm.$slot,查看插槽内容
更多推荐



所有评论(0)