(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渲染函数