（4）vue基础3
（1）全局API（提供的一些方法）
- Vue.directive 用来注册自定义指令，为DOM元素添加新的属性
- Vue.use
- Vue.extend 用于基于Vue构造器创建一个Vue的子类，可以对Vue构造器进行扩展。
- Vue.set vue的核心是具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据发生改变后，通知使图层自动跟新。Vue.set用于向响应式对象中添加一个属性，并确保这个属性同样是响应式的，会触发试图更新（用于向响应式中增加新属性，确保新属性也具备响应式的特点）。
- Vue.mixin：混入。是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入到该组件本身的选项。当组件和混入对象有同名选项时，这些选项将以恰当的方式混合。
全局API案例
Vue.directive()
<body>
<div id="app">
<input type="text" v-focus="true">
</div>
<script type="text/javascript">
// 1、指令的名称
// 2、指令的配置对象
Vue.directive("focus",{
// 希望使用当前指令的元素，当调用此方法的元素被插入到界面时，此元素获取焦点
inserted(el,binding){
// el:使用指令的元素
// binding:指令相关的配置信息
if(binding.value){//获取的是指令的值，如果是true，就执行指令
el.focus()
}
}
})
var vm = new Vue({
el:"#app",
data:{}
})
</script>
</body>
Vue.use()
<body>
<div id="app" v-my-directive>
</div>
<script type="text/javascript">
//1、定义一个新插件
let MyPlugin = {};
//2、编写插件的install方法
MyPlugin.install = function(Vue, options){
console.log(options);//接收安装此插件时传进的参数
Vue.directive("my-directive",{
bind(el,binding){
//给el添加样式
el.style="width:100px;height:100px;background-color:#ccc"
}
})
}
//3、安装插件
Vue.use(MyPlugin,{
someOption:true
})
var vm = new Vue({
el:"#app",
data:{}
})
</script>
</body>
Vue.extend()
<body>
<div id="app1">
app1：{{title}}
</div>
<div id="app2">
app2：{{title}}
</div>
<script type="text/javascript">
var Vue2 = Vue.extend({
data(){
return {
title:"Hello 我是Vue的子类"
}
}
})
var vm1 = new Vue({
el:"#app1"
})
var vm2 = new Vue2({
el:"#app2"
})
</script>
</body>
Vue.set()
<body>
<div id="app1">
<div>{{a}}</div>
<div>{{obj.b}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app1",
data:{
a:"我是根级响应式属性a",
obj:{}
}
})
Vue.set(vm.obj,"b","我是Vue.set添加的响应式属性obj.b")
</script>
</body>
Vue.mixin()
<body>
<div id="app">
<div>{{msg}}</div>
</div>
<script type="text/javascript">
Vue.mixin({
data(){
return {
msg:"混入的msg"
}
},
created(){
console.log("混入的钩子函数");
var myOption = this.$options.myOption;
if(myOption){
console.log(myOption.toUpperCase());
}
}
})
var vm = new Vue({
el:"#app",
myOption:"hello world",
created(){
console.log("Vue的created钩子函数")
},
data:{},
})
</script>
</body>
（2）实例属性
- $props 使用vm.$props属性可以接收上级组件向下传递的数据（父组件-->子组件）
- $options Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取。用于获取Vue实例化时传入的选项的值。
- $el 用来访问vm实例使用的根DOM元素。 获取Vm实例绑定的DOM结构。
- $children 用来获取当前组件的直接子组件
- $root 用来获取当前组件树的根Vue实例，如果当时实例没有父实例，则获取该实例本身。
- $slots 用于获取插槽，插槽是父组件像子组件传递内容的。
- $attrs 获取组件的属性，但其获取的属性不包含class、style以及被声明的props属性。
案例讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例属性$props</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<my-parent></my-parent>
</div>
<!-- 父组件模板 -->
<template id="parent">
<div>
<h3>手机信息搜索：</h3>
<span>手机品牌：</span>
<input type="text" v-model="brand">
<!-- 子组件 -->
<my-child v-bind:name="brand"></my-child>
</div>
</template>
<!-- 子组件模板 -->
<template id="child">
<ul>
<li>手机品牌：{{show.brand}}</li>
<li>手机型号：{{show.type}}</li>
<li>手机价格：{{show.price}}</li>
</ul>
</template>
<script type="text/javascript">
//1、文本框数据双向绑定
//2、将数据传入到子组件中
//3、子组件监听传递过来的数据，渲染结果
Vue.component("my-parent",{
template:"#parent",
data(){
return {
brand:""
}
}
})
Vue.component("my-child",{
template:"#child",
props:["name"],
data(){
return {
content:[
{brand:"华为",type:"Mata 40", price:"4999"},
{brand:"苹果",type:"苹果12", price:"5499"},
{brand:"小米",type:"小米10", price:"3999"}
],
show:{brand:"",type:"",price:""}
}
},
watch:{
name(){
if(this.$props.name){
var found = false;
this.content.forEach(
(value,index) => {
if(value.brand == this.$props.name){
found = value;
}
}
);
this.show = found ? found : {brand:"", type:"",price:""};
}
}
}
})
var vm = new Vue({
el:"#app",
data:{}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例属性$options-$el-$children</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<p>{{base}}</p>
<p>{{noBase}}</p>
</div>
<div id="child">
<button @click="child">打印子组件</button>
<my-compenten></my-compenten>
<my-compenten></my-compenten>
<my-compenten></my-compenten>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
//可以是自定义选项
custormOption:"我是自定义数据！",
data:{
base:"我是基本数据！"
},
created(){
this.noBase = this.$options.custormOption;
}
})
//$el获取到vm绑定的DOM结构，即id为app的元素
vm.$el.innerHTML = "<div>我是替换后的DOM结构</div>"
//直接子组件
Vue.component("my-compenten",{
template:"<div>我是一个组件</div>"
})
var vm = new Vue({
el:"#child",
data:{},
methods:{
child(){
console.log(this.$children)
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例属性$root/title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<my-child></my-child>
</div>
<template id="child">
<button @click="root">点击查看根实例</button>
</template>
<script type="text/javascript">
Vue.component("my-child",{
template:"#child",
methods:{
root(){
console.log(this.$root);
console.log(this.$root == vm.$root)
}
}
})
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
console.log(vm.$root)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例属性$slots</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<my-child>
你好
<template v-slot:second>
<div>第二个插槽的内部结构</div>
</template>
</my-child>
</div>
<template id="child">
<div>
<!-- 插槽 用来回去自定义组件的内容-->
<slot></slot>
<!-- 具名插槽 -->
<slot name="second"></slot>
</div>
</template>
<script type="text/javascript">
Vue.component("my-child",{
template:"#child"
})
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
//vm.$children[0].$slots.default[0].text
//获取vm的第一个节点的所有插槽
//.delault 获取默认插槽
//[0]获取插槽中的第一个节点
//text获取节点中的内容
console.log(vm.$children[0].$slots.default[0].text)
console.log(vm.$children[0].$slots)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例属性$attrs</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<my-child id="托尔斯泰"></my-child>
</div>
<template id="child">
<button @click="show">显示属性值</button>
</template>
<script type="text/javascript">
Vue.component("my-child",{
template:"#child",
methods:{
show(){
console.log(this.$attrs.id)
}
}
})
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
</script>
</body>
</html>
（3）全局配置
- productionTip Vue.config.productionTip 打开或关闭生产信息提示信息，默认是打开状态。
- silent silent可以取消Vue日志和警告，silent默认值是false，开启警告功能。
- devtools 表示打开或者关闭vue-devtools测试工具，默认值为true，表示vue-devtools工具可用。
案例测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局配置</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
//是否安静要放在实例化之前
Vue.config.silent = true;
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
//使用生产版本的vue默认的有配置信息，就是一大开的时候会有提示，可以使用全局配置信息关闭掉
// Vue.config.productionTip = false;
//关闭调试工具
// Vue.config.devtools = false
</script>
</body>
</html>
（4）组件进阶
- mixins 是一种分发Vue组件中可复用功能的方式。mixins是一种分发Vue组件中可复用功能的方式。 Vue组件中可复用功能的方式。 mixins对象可以包含任何组件选项，将定义的mixmins对象引入组件即可使用，mixins中的所有选项将会混入到组件自己的选项中。 局部的。全局API里面的mixin是全局的，但是功能类似。
- render 渲染函数 在Vue中可以使用Vue.render()实现对虚拟DOM的操作、在Vue中一般使用template来创建HTML，但这种方式可编程性不高，而使用Vue.render()可以更好地发挥JS的编程能力。
- createElement createElement()函数返回的并不是一个世纪的DOM元素，他返回的其实是一个描述节点（createNodeDescription）。第一个参数可以是一个HTML标签名或组件选项对象，第二个参数是可选的，可以传入一个与模板中属性对应的数据对象，第三个由createElement()构建而成的子级虚拟节点，也可以使用字符串来生成文本虚拟节点。
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件进阶</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
var mixin = {
data(){
return {
message:"mixin的数据"
}
},
methods:{
hello(){
console.log("hello from mixin")
}
},
created(){
console.log("mixin的钩子函数")
}
}
var vm = new Vue({
el:"#app",
mixins:[mixin],
data:{
message:"Vue的数据"
},
methods:{
hello(){
console.log("hello from Vue")
}
},
created(){
console.log("Vue的钩子函数");
//可以使用mixin的数据，如果vue中没有数据的话
//但是，如果vue中有同名的数据，以vue中的数据为准，函数也是如此
console.log(this.message);
this.hello();
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局配置render</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<my-component>渲染成功</my-component>
</div>
<script type="text/javascript">
Vue.component("my-component",{
render(createElement){
return createElement("p",{
style:{
color:"green",
fontSize:"16px",
backgroundColor:"orange"
}
},this.$slots.default);
}
})
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局配置</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<my-component>
<template v-slot:header>
<div style="background-color:#ccc; height:50px;">这里是导航栏</div>
</template>
<template v-slot:content>
<div style="background-color:#ddd; height:50px;">这里是主要内容</div>
</template>
<template v-slot:footer>
<div style="background-color:#eee; height:50px;">这里是底部区域</div>
</template>
</my-component>
</div>
<script type="text/javascript">
Vue.component("my-component",{
render(createElement){
return createElement("div",[
createElement("header",this.$slots.header),
createElement("header",this.$slots.content),
createElement("header",this.$slots.footer),
])
}
})
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
</script>
</body>
</html>
（1）vue全局api
（2）Vue常用属性
（3）全局对象配置vue的方法
（4）render渲染函数
浙公网安备 33010602011771号