Vue -- 总结 07

柿子来了

于 2024-09-05 09:00:00 发布

阅读量195

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/141830370

版权

自定义指令

<template>
  <div id="app">
   <input v-focus>
    <div v-color='pinkA'>hello world</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      pinkA:"pink",
    }
  },
  components: {
    
  },
  directives:{
    focus:{
      inserted(el,binding){
         console.log('binding-input',binding)
        el.focus()
      }
    },
    color:{
      inserted(el,binding){
        console.log('binding',binding)
        el.style.color = binding.value
      }
    }
  }
}
</script>

<style>

</style>

name的作用

<template>
  <div id="app">
   <h1>组件中name作用</h1>
    <NameEffect :arr=arr></NameEffect>
  </div>
</template>

<script>
import NameEffect from '@/components/NameEffect.vue'
export default {
  name: 'App',
  data(){
    return{
      arr:[
       {
        id:1,
        brand:"小米",
        children:[
          {
            id:1-1,
            brand:'红米'
          }
        ]
       },
       {
        id:2,
        brand:"oppo",
        children:[
          {
            id:2-1,
            brand:'一加'
          }
        ]
       },
       {
        id:3,
        brand:"vivo",
        children:[
          {
            id:3-1,
            brand:'IQOO'
          }
        ]
       }
      ]
    }
  },
  components: {
    NameEffect
  },
  
}
</script>

<style>

</style>

NameEffect.vue

<template>
    <div class='NameEffect'>
       <div>我是nameeffect</div>
       <div v-for='item in arr' :key='item.id'>
          {{item.brand}}
          <NameEffect :arr='item.children'></NameEffect>
       </div>
    </div>
</template>
<script>
export default {
    props:['arr'],
    name:"NameEffect",
    data(){
        return{

        }
    }
}
</script>
<style></style>

动态切换组件以及缓存组件

<template>
  <div id="app">
  
   <button @click='changeCom'>动态切换组件</button>
   <!-- vue给你提供了一个内置组件component 他有一个特殊的属性 is-->
    <keep-alive>
      <!-- 会缓存不活动的组件实例 -->
    <component :is='componentName'></component>
    </keep-alive>
   <!-- <SonOne v-if='flag'></SonOne>
   <SonTwo v-else></SonTwo> -->
  </div>
</template>

<script>
import SonOne from './components/SonOne'
import SonTwo from './components/SonTwo'
export default {
  name: 'App',
  data(){
    return{
      flag:true,
      componentName:'SonOne'
    }
  },
  components: {
    SonOne,
    SonTwo
  },
  methods:{
    // changeCom(){
    //   this.flag = !this.flag
    // }
    changeCom(){
      if(this.componentName == 'SonOne'){
        this.componentName = 'SonTwo'
     
      }else{
        this.componentName = 'SonOne'
      }
  }
}
  
}
</script>

<style>

</style>

SonOne.vue

<template>
    <div >
        <h1>这是儿子one</h1>
    </div>
</template>
<script>
export default {
    name:"SonOne",
    data(){
        return{
            
        }
    },
    beforeCreate(){
        console.log('儿子one beforeCreate')
    },

    created(){
        console.log('儿子one created')
    },
    beforeMount(){
        console.log('儿子one beforMount')
    },
    mounted(){
        console.log('儿子one mounted')
    },
    activated(){
        console.log('儿子one activated')
    },
    deactivated(){
        console.log('儿子one deactivated')
    }
}
</script>
<style></style>

SonTwo.vue

<template>
    <div >
        <h1>这是儿子two</h1>
    </div>
</template>
<script>
export default {
    name:"SonTwo",
    data(){
        return{
            
        }
    },
    beforeCreate(){
        console.log('儿子tow beforeCreate')
    },

    created(){
        console.log('儿子tow created')
    },
    beforeMount(){
        console.log('儿子tow beforMount')
    },
    mounted(){
        console.log('儿子tow mounted')
    },
    activated(){
        console.log('儿子tow activated')
    },
    deactivated(){
        console.log('儿子tow deactivated')
    }
}
</script>
<style></style>

ref选取dom包含选取自定义组件

<template>
  <div id="app">
  <RefCom></RefCom>
   
  </div>
</template>

<script>
import RefCom from './components/RefCom.vue'
export default {
  name: 'App',
  data(){
    return{
      
    }
  },
  components: {
    RefCom
  },
  methods:{
   
}
  
}
</script>

<style>

</style>

RefCom.vue

<!--  -->
<template>
<div class='RefCom'>
    <p ref='pLabel'>hello</p>
    <RefComChild ref='childCom'></RefComChild>
    <button @click='gainChild'>获取组件实例</button>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import RefComChild from './RefComChild.vue'
export default {
    name:"RefCom",
//import引入的组件需要注入到对象中才能使用
components: {
    RefComChild
},
data() {
//这里存放数据
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    gainChild(){
        console.log('获取组件实例',this.$refs.childCom)
        this.$refs.childCom.changeMsg()
    }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    console.log(this.$refs.pLabel)
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>

</style>

RefComChild.vue

<!--  -->
<template>
<div class='RefComChild'>
    <div>{{msg}}</div>
    <button @click='changeMsg'>点击</button>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    name:"RefComChild",
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    msg:'我是refComchild中的msg'
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    changeMsg(){
        this.msg='msg已经变了'
    }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>

</style>

$nextTick使用

<template>
  <div id="app">
    
   <div ref='numlabel'>{{num}}</div>
    <button @click="changeNum">点击</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      num:99  
    }
  },
  components: {
    
  },
  methods:{
   changeNum(){
    this.num++;
    // vueDOM更新时异步的，所以需要用 this.$nextTick来获取更新后的dom
   
    this.$nextTick(()=>{
      console.log(this.$refs.numlabel.innerHTML)
    })
   }
}
  
}
</script>

<style>

</style>