Vue

computed:{
	resultContent(){
		return this.result.content.length>0?"Yes":"No";
	}
}

watch:{
	//此处函数名必须和要监听的数据变量一致
	message(newValue, oldValue){
		console.log(newValue, oldValue);
	}
}

<p ref ="a" :class="classObject">{{ content }}</p>
console.log(this.$refs.a.innerHTML="hahaha")

// Parent.vue
<f06_comp title="Parent 数据" demo="测试" :msg="message"/>

// Child.vue
export default{
    props:["title","demo", "msg"]
}

// Child2.vue
export default{
    props:{
        age:{
            type:Number,
            default:0
        },
        demo:{
            type:[String, Number, Array, Object]
        },
        msg:{
            type:String
        }
        //数字和字符串可以直接default,数组和对象必须通过工厂函数返回默认值。
    }
}

//父
<f07_comp demo=20 :msg=message :names="names" :onEvent="dataFn"/>

dataFn(data){
	console.log(data)
	this.message2 = data
}
//子
<p>{{ onEvent("要传递的数据") }}</p>

    beforeCreate(){
        console.log("组件创建之前");
    },
    created(){
        console.log("组件创建之后");
    },
    beforeMount(){
        console.log("组件渲染之前");
    },
    mounted(){
        console.log("组件渲染之后");
    },
    beforeUpdate(){
        console.log("组件更新之前");
    },
    updated(){
        console.log("组件创建之后");
    },
    beforeUnmount(){
        console.log("组件销毁之前");
    },
    unmounted(){
        console.log("组件销毁之后");
    }

//不保持组件存活
<component :is="tabComponent"></component>
<button @click="changeHandle">切换组件</button>
changeHandle(){
	this.tabComponent=this.tabComponent=="f10_comp"?"f11_comp":"f10_comp";
}
//保持组件存活
<keep-alive>
	<component :is="tabComponent"></component>
</keep-alive>

import { defineAsyncComponent } from 'vue';
import f10_comp from './f10_comp.vue';
// import f11_comp from './f11_comp.vue';
// 异步加载组件
const f11_comp = defineAsyncComponent(()=>import("./f11_comp.vue"))

//父
provide:{
	message:"f09的数据",
},
//子
inject:["message"],

import{ref} from 'vue'
const count = ref(0)
const userInfo = reactive({
    name:"iewn",
})
function increment(){
    count.value++;
}

const message = ref("ABC")
//计算属性
// 在JS读取时必须通过.value才能读取到值
const myreverse = computed(()=>{
    return message.value.split("").reverse().join("")
})

<button @click="increment($event)">Count={{ count }}</button>
function increment(e){
    console.log("count++")
    count.value++;
}

//侦听器
watch(count,(NewValue,OldValue)=>{
    console.log(NewValue,OldValue);
})

import{onMounted} from 'vue'
//生命周期
onMounted(()=>{
    console.log("Initial count is " + count.value)
})

//这个不能放在函数里
const countNumber = ref(null);
onMounted(()=>{
    console.log("Initial count is "+ count.value);
    console.log("Initial count is "+ countNumber.value.innerHTML);
})

//props
const props = defineProps({
    title:{
        type:String,
        default:""
    }
})
console.log(props)
console.log(props.title)

const emit = defineEmits(["eventf14",])
//组件事件
function increment(e){
    console.log("count++")
    count.value++;
    emit("eventf14", [this.count, this.message])
}

<p v-author>西游记</p>
//自定义指令
    directives:{
        author:{
            mounted(element){
                console.log(element);
                element.innerHTML = element.innerHTML + "-wy撰写";
            }
        }
    }

<p v-author>西游记</p>
//自定义指令
const vAuthor = {
    mounted:(element)=>{
        console.log(element);
        element.innerHTML = element.innerHTML + "-wy撰写";
    }
}

const app = createApp(App);
//在挂载前写全局注册的组件
app.component("f04_component", f04_component);
//在挂载前写全局自定义指令
app.directive("red",{
    mounted(element){
        element.style.color = 'red';
    }
})
app.mount('#app');

const vBlue = {
	//在绑定元素的attribute前
	//或事件监听器应用前调用
	created(el, binding, vnode, prevVnode){
		console.log("created");
	},
	
	//在元素被插入到DOM前调用
	beforeMount(el, binding, vnode, prevVnode){
		console.log("beforeMount");
	},
	
	//在绑定元素的父组件
	//以及它自己的所有子节点都挂载完成后调用
	mounted(el, binding, vnode, prevVnode){
		console.log(el);
        console.log(binding);
        console.log(vnode);
        console.log(prevVnode);
        el.style.color = 'blue';
		console.log("mounted");
	},
	
	//绑定元素的父组件更新前调用
	beforeUpdate(el, binding, vnode, prevVnode){
		console.log("beforeUpdate");
	},
	
	//在绑定元素的父组件
	//以及它自己的所有子节点都更新后调用
	updated(el, binding, vnode, prevVnode){
		console.log("updated");
	},
	
	//绑定元素的父组件卸载前调用
	beforeUnmount(el, binding, vnode, prevVnode){
		console.log("beforeUnmount");
	},
	
	//绑定元素的父组件卸载后调用
	unmounted(el, binding, vnode, prevVnode){
		console.log("unmounted");
	},
}