自定义指令
<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>