Vue 实例之全局API,实例属性,全局配置,组件进阶
文章目录
写在前面
yzx 是我的名字,可忽略不计。引入 vue.js的 src 地址是"src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”,每个案列都需要添加~
Vue 全局 API
Vue.directive
用来注册自定义的指令,为 DOM 元素添加新特性。自定义注册指令 v-focus ,用于控制 input 文本框是否自动获取焦点。
<div id="app">
<input type="text" v-focus="true">
</div>
<script>
Vue.directive('focus',{
//inserted:插入 ;el:指令元素;binding:指令的相关配置信息
inserted(el,binding){
if(binding.value){ //获取指令的值,如果为 true,执行获取焦点 yzx
el.focus()
}
}
})
var vm = new Vue({el:'#app'})
</script>
Vue.use
Vue.use:主要用于在 Vue中安装插件,可以 为 Vue 添加全局功能。插件可以是一个对象或者函数,如果是对象,必须提供 install() 方法,用来安装插件;如果是一个函数,则该函数将被当成 install() 方法。
<div id="app" v-my-directive></div>
<script>
//myplugin(自定义插件)对象 yzx
let myplugin = {}
//编写插件对象的 install 方法
myplugin.install = function(vue,options){
console.log(options);
//在插件中为 vue 添加自定义指令
vue.directive('my-directive',{
bind(el,binding){
//设置自定义指令v-my-directive绑定dom 元素设置style样式
el.style ='width:100px;height:100px;background-color:pink';
}
})
}
//安装插件 myplugin
Vue.use(myplugin,{someoption:true})
//创建 vm 实例
var vm = new Vue({
el:'#app',
data:{}
});
</script>
Vue.extend
vue.extend ,基于 Vue 构造器创建一个 Vue 子类,可以对于 Vue 构造器进行扩展。
<div id='app1'>app1:{{title}}</div>
<div id='app2'>app2:{{title}}</div>
<script>
//创建子类Vue 2
var Vue2 = Vue.extend({
data(){
return {
title:'hello yzx'
}
}
})
var vm1 = new Vue({el:'#app1'})
var vm = new Vue2({el:'#app2'})
Vue.set
Vue.set :Vue 的核心具有一套响应式系统,简单来说就是通过监听数据层的数据变化,当数据改变后,通知视图也自动更新。Vue.set 用于向响应式对象中添加一个属性,并确保这个属性同样是响应式的,会触发试图更新。
<div id='app'>
<div>{{a}}</div>
<div>{{obj.b}}</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
a:'我是根级响应式属性a (yzx)',
obj:{}
}
})
//Vue.obj.b ='我是。。。' 这样是不行的,需要set 方法才ok 必须确保是响应式的
//这个 obj 的b属性都可以随便设置名字的~~
Vue.set(vm.obj,'b','我是Vue.set添加的响应式属性obj.b')
</script>
Vue.mixin
mix 混合 in 进入,组合一起就是混入。当组件使用了混入对象时,所有混入对象的选项都将混入该组件本身的选项。
Vue.mixin({
data(){
return{
msg:'混入数据 yzx'
}
},
created(){
console.log('混入的created')
var myOption = this.$options.myOption
if(myOption){
//将字母改成大写字母
console.log(myOption.toUpperCase())
}
}
})
var vm = new Vue({
el:'#app',
myOption:'hello yzx',
created(){
console.log('Vue的 created 钩子函数');
},
data :{}
})
</script>
Vue 实例属性
vm.$props
vm.$props 属性可以接收上级组件向下传递的数据
<div id='app'>
<!--父组件 -->
<my-parent></my-parent>
</div>
<!---父组件模板-->
<template id='parent'>
<div>
<h3>歌曲详情搜索</h3>
歌曲详情:<input type="text" v-model='singer'/> <!--文本框双向绑定 -->
<!---子组件-->
<my-child v-bind:name='singer'></my-child>
</div>
</template>
<!---子组件模板-->
<template id='child'>
<ul>
<li>歌手:{{show.singer}}</li>
<li>歌曲名称:{{show.names}}</li>
<li>歌曲时长:{{show.times}}</li>
</ul>
</template>
<script>
Vue.component('my-parent',{
template:'#parent',
data(){
return{
singer:''
}
}
})
//在子组件里写入数据
Vue.component('my-child',{
props:['name'],
template:'#child',
data(){
return{
content:[{
singer:'yzx',
names:'世间美好',
times:'04:20'
},{
singer:'小红',
names:'执迷的一天',
times:'03:27'
},{
singer:'小明',
names:'快乐的憨憨',
times:'03:54'
},{
singer:'小兰',
names:'无限可能~',
times:'02:49'
},{
singer:'小紫',
names:'星球的快乐',
times:'04:24'
}],
show:{
singer:'',
names:'',
times:''
}
}
},
//添加子组件监听,如果找到则返回查找结果,找不到返回一个空值
watch:{
name(){
if(this.$props.name){
var found = false;
this.content.forEach(
(value,index)=> {
if(value.singer == this.$props.name){
found = value;
}
}
);
this.show =found ? found:{
singer:'',
names:'',
times:''
}
}
}
}
})
var vm = new Vue({
el:'#app',
data:{}
})
</script>
vm.$options
$ options : Vue 实例化可以传入自定义的选项,自定义的选项值可以是数组,对象,函数等,需要通过 vm.$ options 来获取。
<div id='app'>
<p>{{base}}</p>
<p>{{nobase}}</p>
<!--插值表达式可以直接访问 Vue 中的属性-->
<p>{{$options.customOption}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
base:'我是基础数据 yzx'
},
customOption:'我是自定义数据 yzx',
created(){
//这里的赋值为了更简单使用插值表达式
this.nobase =this.$options.customOption //这里的赋值为了更简单使用插值表达式
}
})
</script>
vm.$el
vm.$el : 用来访问 vm 实列使用的 DOM 元素。
<div id="app">
<p>我是根标签 </p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{}
})
vm.$el.innerHTML ='<div>我是替换后的 div 标签 yzx </div>'
</script>
vm.$chidren
$children:用来获取当前实例的子组件。
<div id='app'>
<button @click='child'>查看子组件 yzx</button>
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template:'<div>my-component</div>'
})
var vm = new Vue({
el:'#app',
methods:{
child(){
console.log(this.$children)
}
}
})
</script>
vm.$root
vm.$root: 用来获取当前组件的树的根Vue实例,如果当前实例没有父组件,则获取到的是该实例的本身。
<div id='app'>
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template:"<button @click='root'>查看根实例 yzx</button>",
methods:{
root(){
console.log(this.$root)
console.log(this.$root===vm.$root)
}
}
})
var vm = new Vue({
el:'#app',
data:{}
})
console.log(vm.$root)
</script>
vm.$slots
用于获取插槽,插槽是父组件向子组件传递内容。
<div id='app'>
<my-component>你好 yzx !</my-component>
</div>
<template id='first'>
<div>
<slot></slot>
</div>
</template>
<script>
Vue.component('my-component',{
template:'#first'
})
var vm = new Vue({
el:'#app',
data:{}
});
//vm 第一个子组件的所以插槽
//.default 获取默认的插槽
//[0]获取插槽第一个节点
//text 获取节点的内容
console.log(vm.$children[0].$slots.default[0].text);
</script>
多个插槽,获取带有名字的插槽:
<div id='app'>
<my-component>你好 yzx !
<template v-slot:second>
<div>第二个插槽的内部结构</div>
</template>
</my-component>
</div>
<template id='first'>
<div>
<slot></slot>
<!--具有名字的插槽:具名插槽--->
<slot name='second'></slot>
</div>
</template>
<script >
Vue.component('my-component',{
template:'#first'
})
var vm = new Vue({
el:'#app',
data:{}
});
//vm 第一个子组件的所以插槽
//.default 获取默认的插槽
//[0]获取插槽第一个节点
console.log(vm.$children[0].$slots);
</script>
vm.$attrs
vm.$attrs : 可以获取组件的属性,但其获取的属性不包括 class,style 以及被声明为 props 的属性。
<div id='app'>
<my-component id='yzxtest'></my-component>
</div>
<script>
Vue.component('my-component',{
template:"<button @click='showAttrs'>查看属性</button>",
methods:{
showAttrs(){
console.log(this.$attrs);
}
}
})
var vm = new Vue({
el:'#app',
data:{}
});
</script>
Vue 全局配置
productionTIP
Vue.config.productionTip: 打开或关闭信息提示信息,默认为打开状态。 设置属性值为false ,则表示关闭生产提示信息。
<div id='app'></div>
<script>
var vm = new Vue({
el:'#app',
data:{}
});
Vue.config.productionTip =false;
</script>
Silent
Vue.config.silent:silent 可以取消 Vue 日志和警告,silent 默认为flase ,不要沉默,就是打开警告功能。你没事关掉干嘛,错误提示开着最好,有些你不想看到的,那你就关了吧。。。
<div id='app'>{{yzx 我是一个错误}}</div>
<script>
//需要写在 Vue 实例前
Vue.config.silent = true;
var vm = new Vue({
el:'#app',
data:{}
});
</script>
devtools
Vue.config.devtools: 表示打开或关闭 vue-devtools 调试工具,默认值为 true ,表示 vue-devtools 工具可用。设置属性为fasle 时,插件会变成灰色,无法使用。我演示的是可以使用的 ,可能是我浏览器设置的问题,我手动设置可以使用昂~
<div id='app'></div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'yzx'
}
})
Vue.config.devtools = true;
</script>
Vue 组件进阶
minxins
minxins: 跟上面介绍的vue.mixin 类似,不多介绍了,这里的局部的属性。
注意:混入对象与 Vue 选项冲突的预先原则: 1,如果是数据或函数冲突 ,Vue 优先。 2,如果是钩子函数冲突,先执行混入对象的钩子函数,然后执行 Vue的钩子函数。
<div id='app'></div>
<script>
//定义mixin 混入对象
var mixin = {
data(){
return{
msg:'mixin 的数据'
}
},
methods:{
hello(){
console.log('hello yzx from mixin')
}
},
created(){
console.log('mixin 的钩子函数');
}
}
var vm = new Vue({
el:'#app',
mixins:[mixin],
data:{},
created(){
console.log('Vue 的钩子函数');
console.log(this.msg);
this.hello(); //调用方法
}
})
</script>
render
render() 渲染函数,在Vue 中可以使用该函数实现对虚拟 DOM 的操作。
<div id='app'>
<my-component>yzx 成功渲染</my-component>
</div>
<script>
Vue.component('my-component', {
render(createElement) {
return createElement('p', {
style: {
color: 'hotpink',
fontSize: '20px',
backgroundColor:'#ccc'
}
},this.$slots.default);
}
});
var vm = new Vue({
el: '#app',
data: {}
})
</script>
createElement
createElement: createElement()函 数返回的并不是- - -个实际的DOM元素,它返回的其实是一- 个描述节点(createNodeDescription) 。
- 第1个参数可以是一一个HTML标签名或组件选项对象。
-第2个参数是可选的,可以传入一个与模板中属性对应的数据对象。
-第3个参数是由createElement()构建而成的子级虚拟节点,也可以使用字符串来生成文本虚拟节点。
<div id='app'>
<my-component>
<template v-slot:header>
<div style="background-color: aqua;height: 50px;">这里是导航栏yzx</div>
</template>
<template v-slot:content>
<div style="background-color:pink;height: 50px;">这里是内容区域yzx</div>
</template>
<template v-slot:footer>
<div style="background-color:red;height: 50px;">这里是底部区域yzx</div>
</template>
</my-component>
</div>
<script>
Vue.component('my-component',{
render(createElement){
return createElement('div',[
createElement('header',this.$slots.header),
createElement('content',this.$slots.content),
createElement('footer',this.$slots.footer)
])
}
})
var vm = new Vue({
el:'#app',
data:{}
})
</script>
未经允许,禁止加载。写很多,手很累的????????????
本文地址:https://blog.csdn.net/qq_44761243/article/details/109292269
上一篇: 学习《第一行代码》第三版敲的代码